CODEWITHSUNDEEP
androiddrawableandroid-tablayout
Divyang Panchal
Divyang Panchal

Reputation: 1909

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

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.

Upvotes: 7

Views: 7125

Answers (5)

Linh
Linh

Reputation: 60989

in my case, combine tabIndicatorColor and tabIndicatorHeight will make tabIndicator drawable work

app:tabIndicatorColor="@null"
app:tabIndicatorHeight="10dp"
app:tabIndicator="@drawable/tab_indicator_drawable"

You can also use android:background="@null" to remove the default background of the TabLayout

Upvotes: 2

Stella
Stella

Reputation: 11

I've tried a massive of cases, and found it worked when you set the 【tabIndicator】 and also set the 【tabIndicatorColor (the color equals the color of your drawable)】.

My codes:

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tab_layout"
    android:layout_width="wrap_content"
    android:layout_height="40dp"
    android:layout_marginStart="12dp"
    app:tabIndicator="@drawable/tab_indicator_background"
    app:tabIndicatorColor="@color/Ga1"
    app:tabIndicatorGravity="center"
    app:tabMode="scrollable"
    app:tabRippleColor="@android:color/transparent"
    app:tabSelectedTextColor="@color/theme_color_secondary"
    app:tabTextColor="@color/Ga8" />

drawable/tab_indicator_background：

<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">

<item android:gravity="center">
    <shape>

        <size
            android:width="74dp"
            android:height="28dp" />

        <corners android:radius="4dp" />

        <solid android:color="@color/Ga1" />

    </shape>
</item>

Upvotes: 1

LeHaine
LeHaine

Reputation: 1378

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

app:tabIndicatorHeight="2dp"

Upvotes: 11

Md. Asaduzzaman
Md. Asaduzzaman

Reputation: 15433

Use app:tabBackground with selector

Upvotes: 1

Sandi
Sandi

Reputation: 2731

There is a separate attribute for the tab indicator color:

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

Upvotes: 1

Related Questions