Set color to unselected tab indicator in tab layout

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 colo

Answer 1

**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 2

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>

Answer 3

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 4

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">