Android TabLayout custom indicator width
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"...
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>