Custom drawable as tabIndicator of com.google.android.material.tabs.TabLayout not working

Question

I am trying to set custom drawable as tabIndicator as shown below

<com.google.android.material.tabs.TabLayout
            android:id="@+id/tab_layout"
            app:tabIndicatorFullWidth="false"
            app:layout_scrollFlags="scroll"
            app:tabIndicator="@drawable/tab_layout_indicator_selected"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

drawable/tab_layout_indicator_selected

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <corners android:radius="2dp" />
            <gradient
                android:angle="180"
                android:endColor="#FF00FF"
                android:startColor="#00FFFF"
                android:type="linear" />
            <size
                android:width="60dp"
                android:height="4dp" />
        </shape>
    </item>
    <item android:gravity="end">
        <shape android:shape="oval">
            <solid android:color="#FF00FF" />
            <size
                android:width="4dp"
                android:height="4dp" />
        </shape>
    </item>
</layer-list>

This shows shape of indicator as my drawable but its color remains always gray, not as given in drawable.

Answer 1

I had the same issue when using a custom drawable. What fixed it for me was setting the tab indicator height.

app:tabIndicatorHeight="2dp"

Answer 2

There is a separate attribute for the tab indicator color:

<com.google.android.material.tabs.TabLayout
    ...
    app:tabIndicatorColor="?colorPrimary"
/>

Answer 3

Use app:tabBackground with selector