how to customize Tab indicator width ?

Question

I want this type of tab indicator how i can achieve this, i have tried all solutions with drawable selectable handler but not getting anything

Answer 1

There is a simpler approach to achieve this by just providing a drawable of your custom indicator to the app:tabIndicator.

For example, in this case:

underline.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <item android:gravity="center">
        <shape>
            <size
                android:width="22dp"
                android:height="2dp" />

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

            <solid android:color="#FF0000" />
        </shape>
    </item>
</layer-list>

and add it in your TabLayout in this way

<com.google.android.material.tabs.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="@dimen/_16dp"
        android:layout_marginTop="@dimen/_16dp"
        app:tabIndicator="@drawable/underline"
        app:tabIndicatorColor="@color/offers_header_text"
        app:tabIndicatorHeight="4dp"
        app:tabMode="scrollable"
        app:tabRippleColor="@null" />