如何实现带有底部边距的TabItem指示器？

![期望的TabIndicator效果：底部带有边距的圆角指示器]

我希望实现一个带有底部边距的Tab Indicator，当前使用的TabLayout布局如下：

<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" />

自定义的指示器Drawable（sui_tab_indicator.xml）代码：

<?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>

解决方案 #

要给TabIndicator添加底部边距，只需修改自定义Drawable并调整TabLayout属性：

1. 更新指示器Drawable
   在layer-list的item标签中添加android:bottom属性设置底部边距，示例如下：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 设置左右6dp、底部2dp的边距 -->
    <item android:start="6dp" android:end="6dp" android:bottom="2dp">
        <shape android:shape="rectangle">
            <corners android:radius="5dp" />
            <solid android:color="@color/black" />
        </shape>
    </item>
</layer-list>

2. 调整TabLayout属性
   移除app:tabIndicatorHeight属性，因为自定义Drawable的高度由shape自行控制，保留该属性会导致指示器显示异常。修改后的布局：

<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:tabMode="scrollable" />

完成以上设置后，TabIndicator就会在底部留出指定边距，同时保留原有的左右边距和圆角样式。

内容的提问来源于stack exchange，提问作者Sharan