将颜色设置为选项卡布局中未选中的选项卡指示器

Question

I am using tablayout provided by google and everything is working fine except the color of the unselected tab indicator. I am unable to set the unselected tab indicator color.

 android:layout_width="match_parent"
 android:layout_height="match_parent">

 <android.support.design.widget.AppBarLayout
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

     <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
         android:layout_width="match_parent"
         android:layout_height="?attr/actionBarSize"
         android:background="?attr/colorPrimary"
         app:layout_scrollFlags="scroll|enterAlways"
         app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

     <android.support.design.widget.TabLayout
         android:id="@+id/tabs"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         app:tabMode="fixed"
         style="@style/MyCustomTabLayout"

         />
 </android.support.design.widget.AppBarLayout>

 <android.support.v4.view.ViewPager
     android:id="@+id/viewpager"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     app:layout_behavior="@string/appbar_scrolling_view_behavior" /> </android.support.design.widget.CoordinatorLayout>

Answer 1

try this changing the color as you wish:

Create this file in drawable folder

tab_indicator_color.xml :

<?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- UNSELECTED TAB STATE -->
    <item android:state_selected="false" android:state_pressed="false">
        <layer-list>
            <!-- Bottom indicator color for the UNSELECTED tab state -->
            <item android:top="-5dp" android:left="-5dp" android:right="-5dp">
                <shape android:shape="rectangle">
                    <stroke android:color="#65acee" android:width="2dp"/>
                </shape>
            </item>
        </layer-list>
    </item>
</selector>

and after set your .xml file in app:tabBackground like this:

 <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="fixed"
        style="@style/MyCustomTabLayout"
        app:tabBackground="@drawable/tab_indicator_color" />

Answer 2

**1.app:**

    tabBackground="@drawable/tablayout_selector"

**2.tablayout_selector.xml**

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/shl_common_default_color" />
        </shape>
    </item>
    <item>
        <inset android:insetBottom="1.5dp">
            <shape android:shape="rectangle">
                <solid android:color="@color/white" />
            </shape>
        </inset>
    </item>
</layer-list>


or

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/white" />
        </shape>
    </item>
    <item android:gravity="bottom">
        <shape android:shape="rectangle">
            <solid android:color="@color/shl_common_default_color" />
            <size android:height="1.5dp" />
        </shape>
    </item>
</layer-list>

Answer 3

ic_tab_indicator_default.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle" />
    </item>
    <item android:gravity="bottom">
        <shape android:shape="rectangle">
            <size android:height="1dp" />
            <solid android:color="@color/steel_blue" />
        </shape>
    </item>
</layer-list>

ic_tab_indicator_selected.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle" />
    </item>
    <item android:gravity="bottom">
        <shape android:shape="rectangle">
            <size android:height="3dp" />
            <solid android:color="@color/congress_blue" />
        </shape>
    </item>
</layer-list>

selector_tab_indicator.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/ic_tab_indicator_selected" android:state_selected="true" />
    <item android:drawable="@drawable/ic_tab_indicator_default" />
</selector>

TabLayout

<com.google.android.material.tabs.TabLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabIndicator="@android:color/transparent"
        app:tabBackground="@drawable/selector_tab_indicator">

Answer 4

For people using the new com.google.android.material.tabs.TabLayout if you apply the solution given as the correct answer in this post would get corners on all four sides of the tab

To fix that use the following "hack"

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- UNSELECTED TAB STATE -->
    <item android:state_selected="false" android:state_pressed="false">
        <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
            <!-- Bottom indicator color for the UNSELECTED tab state -->
            <item  android:top="-10dp" android:left="-1000dp" android:right="-1000dp">
                <shape android:shape="rectangle" >
                    <stroke android:color="#4cffffff" android:width="1dp"/>
                </shape>
            </item>
        </layer-list>
    </item>
</selector>