Android自定义TabLayout时app:tabPadding不生效 如何正确设置tab项内边距

问题根因 #

你设置的app:tabPadding不生效，是因为当TabLayout的tabMode设为fixed、tabGravity设为fill时，系统会自动拉伸TabItem填满TabLayout宽度，该属性会被拉伸逻辑覆盖，且高版本Material Components库已逐步废弃该属性，推荐用tabContentPadding替代。你想要的外层灰色背景、内部选中Tab为白色圆角、和外层背景留间距的效果，按以下步骤修改即可：

解决方案 #

1. 修改TabLayout布局属性

替换原有TabLayout代码，调整属性如下：

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tabLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginTop="16dp"
    android:layout_marginEnd="8dp"
    android:background="@drawable/tab_layout_bg"
    android:padding="4dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:tabBackground="@drawable/selector_tab"
    app:tabGravity="fill"
    app:tabIndicatorColor="@android:color/transparent"
    app:tabIndicatorHeight="0dp"
    app:tabMode="fixed"
    app:tabMarginStart="2dp"
    app:tabMarginEnd="2dp"
    app:tabRippleColor="@null"
    app:tabSelectedTextColor="@color/black"
    app:tabTextColor="@color/black">

    <com.google.android.material.tabs.TabItem
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Order Tracking" />

    <com.google.android.material.tabs.TabItem
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Order details" />
</com.google.android.material.tabs.TabLayout>

关键修改点说明：

• 新增android:padding="4dp"：给TabLayout本身加内边距，直接实现内部Tab和外层灰色背景的间距
• 新增app:tabMarginStart/app:tabMarginEnd：控制两个Tab之间的间距，避免选中态白色背景挨在一起
• 移除了无效的app:tabPadding属性，如需调整Tab内部文字和Tab边缘的间距，可以新增app:tabContentPadding属性设置，该属性在fixed模式下可正常生效

2. 可选适配圆角

如果修改后觉得选中Tab的圆角和外层背景不匹配，可调整shape_tab_selected.xml里的corners radius数值，和外层tab_layout_bg的圆角数值保持一致即可。

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