Android TabLayout如何让tabIndicator尺寸大于tabIcon实现选中效果

开发中使用Material组件的TabLayout实现标签栏时，希望选中状态下的tabIndicator尺寸大于tabIcon，呈现类似选中按钮的视觉效果。查阅原生TabLayout的配置属性后未找到对应实现方案，需要在图标四周保留一定内边距，让指示器不会紧贴图标边框，最终实现带图标ImageButton的选中交互效果。

当前使用的TabLayout布局代码：

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tabLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:paddingTop="@dimen/padding_small"
    android:paddingBottom="@dimen/padding_medium"
    app:tabIconTint="@color/tab_icon_tint"
    app:tabIndicator="@drawable/tab_indicator"
    app:tabIndicatorColor="@color/tab_primary"
    app:tabIndicatorGravity="center"
    app:tabIndicatorFullWidth="false"
    app:tabIndicatorHeight="22dp"
    app:tabRippleColor="@null">

    <com.google.android.material.tabs.TabItem
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:icon="@drawable/tab_account_icon"/>

    <com.google.android.material.tabs.TabItem
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:icon="@drawable/tab_account_icon"/>

    <com.google.android.material.tabs.TabItem
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:icon="@drawable/tab_account_icon"/>

</com.google.android.material.tabs.TabLayout>

自定义指示器代码：

<?xml version="1.0" encoding="utf-8"?>
<shape
    android:shape="oval"
    android:useLevel="false"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/tab_primary" />
</shape>

当前效果预览：

原生TabLayout默认的指示器宽度只会贴合Tab内容的实际宽度，没有直接配置指示器大于图标尺寸的属性，要实现目标选中按钮效果，有两种可直接落地的实现方式：

• 方式一：代码动态调整指示器尺寸（适配性更好）
  监听Tab选中事件，在Tab布局完成后，基于图标位置手动给指示器增加四周的额外边距，核心实现代码如下：

  // 配置指示器超出图标的内边距，示例为四周各留8dp间距
  val indicatorPadding = TypedValue.applyDimension(
      TypedValue.COMPLEX_UNIT_DIP, 8f, resources.displayMetrics
  ).toInt()
  
  tabLayout.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener {
      override fun onTabSelected(tab: TabLayout.Tab?) {
          tab?.let {
              // 等布局绘制完成再计算位置，避免取值为0
              tabLayout.post {
                  val tabContainer = it.view as LinearLayout
                  // 拿到Tab内的图标控件
                  val tabIcon = tabContainer.getChildAt(1) as ImageView
                  val indicatorView = tabLayout.getChildAt(0)
                  // 基于图标位置计算指示器的尺寸和位置，四周增加预设边距
                  val indicatorLeft = tabIcon.left - indicatorPadding
                  val indicatorRight = tabIcon.right + indicatorPadding
                  val indicatorSize = indicatorRight - indicatorLeft
                  // 因为是圆形指示器，宽高保持一致避免拉伸
                  indicatorView.layoutParams = indicatorView.layoutParams.apply {
                      width = indicatorSize
                      height = indicatorSize
                  }
                  // 偏移指示器到居中位置
                  indicatorView.x = tabContainer.x + indicatorLeft
              }
          }
      }
      override fun onTabUnselected(tab: TabLayout.Tab?) {}
      override fun onTabReselected(tab: TabLayout.Tab?) {}
  })
  

• 方式二：固定尺寸配置（适合图标尺寸固定的场景）
  如果Tab图标尺寸是固定值，可以直接给自定义圆形指示器设置固定宽高（比图标大出需要的边距即可），同时给Tab图标设置对应数值的内边距，保持图标在指示器内居中，配合已设置的app:tabIndicatorGravity="center"、app:tabIndicatorFullWidth="false"属性就能实现效果，不需要额外写代码。注意圆形指示器的宽高必须设置为相同值，否则会拉伸成椭圆。

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