How to create TabItem indicator with bottom padding

Question

I want to implement a Tab Indicator with bottom margin

<com.google.android.material.tabs.TabLayout android:id="@+id/tabs" android:layout_width="match_parent" android:layout_height="wrap_content" app:tabIndicator="@drawable/sui_tab_indicator" app:tabIndicatorColor="@color/black" app:tabIndicatorGravity="bottom" app:tabIndicatorFullWidth="false" app:tabIndicatorHeight="2dp" app:tabMode="scrollable" />

Used this TabItem with indicator drawable

<?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item android:end="6dp" android:start="6dp"> <shape android:shape="rectangle"> <corners android:radius="5dp" /> <solid android:color="@color/black" /> </shape> </item> </layer-list>

Answer 1

Create a new drawable resource file for your tab indicator custom_tab_indicator.xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Background rectangle with padding -->
    <item android:top="0dp" android:left="6dp" android:right="6dp" android:bottom="6dp">
        <shape android:shape="rectangle">
            <corners android:radius="5dp" />
            <solid android:color="@color/black" />
        </shape>
    </item>
    <!-- Bottom border without padding -->
    <item android:top="0dp" android:left="6dp" android:right="6dp" android:bottom="0dp">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/transparent" />
        </shape>
    </item>
</layer-list>

Then, set this drawable as the tab indicator in your TabLayout:
<com.google.android.material.tabs.TabLayout
    android:id="@+id/tabs"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabIndicator="@drawable/custom_tab_indicator"
    app:tabIndicatorColor="@color/black"
    app:tabIndicatorGravity="bottom"
    app:tabIndicatorFullWidth="false"
    app:tabIndicatorHeight="2dp"
    app:tabMode="scrollable" />

As a result, a Tab Indicator with bottom padding should appear. As required for your design, change the padding settings.