Android TabLayout custom indicator width

Question

I want to reduce width of indicator - for example, make it's width not whole tab width, but 1/2 of tab width.
That's all I need to do, so I don't want to download some custom library and search where I can do this.

Is it a way to do this or I should write such view by myself?

Answer 1

if a tab indicator with a fixed size is what you want, to achieve you can create an indicator shape with a fixed size by drawable:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:gravity="center">
        <shape android:shape="rectangle">
            <solid android:color="@color/colorAccent" />
            <corners
                android:topLeftRadius="2dp"
                android:topRightRadius="2dp" />
            <size
                android:width="16dp"
                android:height="2dp" />
        </shape>
    </item>
</layer-list>

Then on the TabLayout, you can then just set the tab indicator drawable. at the same time, you also have to set the tabIndicatorColor

 app:tabIndicatorColor="@color/tabIndicatorColor"
 app:tabIndicator="@drawable/tab_indicator"

Because the drawable itself center the shape inside its bounds, the indicator will have a fixed size.

if you want the indicator to match the width of the label, you can remove the tabIndicator android:gravity.

<?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/colorAccent" />
            <corners
                radius="2dp" />
            <size
                android:width="16dp"
                android:height="2dp" />
        </shape>
    </item>
</layer-list>

Answer 2

For anyone that ends up on this issue, I found a simple solution with vector drawables for a ~90% of the tab width indicator:

ic_tab_indicator_24dp:

<vector
android:height="24dp"
android:width="24dp"
android:viewportHeight="24.0"
android:viewportWidth="24.0"
xmlns:android="http://schemas.android.com/apk/res/android">
<path
    android:strokeWidth="4"
    android:fillColor="@android:color/white"
    android:pathData="M2,0 L22,0 L22,24 L2,24 z"/>

And then set tabIndicator in the layout:

app:tabIndicator="@drawable/ic_tab_indicator_24dp"

Or in styles.xml:

<item name="tabIndicator">@drawable/ic_tab_indicator_24dp</item>

Edit: As my solution is getting attention, I'd add that you can play with the width just modifying the pathData ("M2,0 L22,0 L22,24 L2,24 z") changing 2 and 22 values. The amount added to 2 should be subtracted from 22. i.e.: "M4,0 L20,0 L20,24 L4,24 z" or "M6,0 L18,0 L18,24 L6,24 z"...