Android自定义TabIndicator样式不符求助（关联ViewPager2与TabLayoutMediator）

问题场景 #

需为TabLayout实现自定义TabIndicator，TabLayout通过TabLayoutMediator与ViewPager2关联，预期选中状态显示圆角矩形、未选中状态显示圆点，但实际显示效果不符合预期。

现有代码 #

TabLayout所在布局 #

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/whiteCandy"
    android:fitsSystemWindows="true">

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/onBoardingViewPager"
        android:layout_width="match_parent"
        android:layout_height="@dimen/dimen_0"
        android:layout_marginStart="@dimen/tablet_default_margin"
        android:layout_marginTop="@dimen/dimen_40"
        android:layout_marginEnd="@dimen/tablet_default_margin"
        android:layout_marginBottom="@dimen/dimen_75"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabDots"
        android:layout_width="wrap_content"
        android:layout_height="@dimen/dimen_6"
        android:layout_marginStart="@dimen/dimen_30"
        android:layout_marginBottom="@dimen/dimen_75"
        android:background="@android:color/transparent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="@id/onBoardingViewPager"
        app:tabBackground="@drawable/tab_selector"
        app:tabIndicatorHeight="@dimen/dimen_0"
        app:tabPaddingEnd="@dimen/dimen_6" />

</androidx.constraintlayout.widget.ConstraintLayout>

Tab选择器 #

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/selected_dot" android:state_selected="true" />

    <item android:drawable="@drawable/default_dot" />
</selector>

选中状态Drawable #

<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle" xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="@dimen/dimen_3"/>
    <solid android:color="#FFFF0000"/>
    <size android:height="@dimen/dimen_6" android:width="@dimen/dimen_20"/>
</shape>

未选中状态Drawable #

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape
            android:innerRadius="@dimen/dimen_0"
            android:shape="ring"
            android:thickness="@dimen/dimen_6"
            android:useLevel="false">
            <solid android:color="#80FF0000" />
        </shape>
    </item>
</layer-list>

问题原因分析 #

1. 未选中状态Drawable实现不合理：使用ring形状配合innerRadius=0实现圆点时，未设置item padding会导致ring占满整个Tab容器，加上TabLayout高度固定为@dimen/dimen_6，造成圆点显示拉伸或裁剪。
2. TabLayout尺寸与Drawable不匹配：TabLayout高度固定为@dimen/dimen_6，和未选中状态ring的thickness一致，没有足够空间展示Drawable；同时缺少tabPaddingStart和Tab宽度限制，导致Tab间距不均、选中状态矩形变形。
3. TabLayoutMediator配置隐患：若给Tab设置文本，会挤压自定义背景的显示空间，导致样式偏离预期。

修复方案 #

1. 替换未选中状态Drawable为oval形状（更稳定） #

<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="oval" xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#80FF0000" />
    <size android:width="@dimen/dimen_6" android:height="@dimen/dimen_6"/>
</shape>

2. 修改TabLayout布局参数 #

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tabDots"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" <!-- 改为wrap_content避免裁剪Drawable -->
    android:layout_marginStart="@dimen/dimen_30"
    android:layout_marginBottom="@dimen/dimen_75"
    android:background="@android:color/transparent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintStart_toStartOf="@id/onBoardingViewPager"
    app:tabBackground="@drawable/tab_selector"
    app:tabIndicatorHeight="@dimen/dimen_0"
    app:tabPaddingStart="@dimen/dimen_6" <!-- 补充左侧padding，保证Tab间距均匀 -->
    app:tabPaddingEnd="@dimen/dimen_6"
    app:tabMinWidth="@dimen/dimen_6" <!-- 限制Tab最小宽度，适配圆点尺寸 -->
    app:tabMaxWidth="@dimen/dimen_20" /> <!-- 限制Tab最大宽度，适配选中状态矩形 -->

3. 确保TabLayoutMediator正确配置 #

代码中关联时不要给Tab设置文本，避免挤压自定义背景：

TabLayoutMediator(tabDots, onBoardingViewPager) { tab, position ->
    // 不设置tab.text，保持Tab内容为空
}.attach()

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