如何为Android Material Tab Layout实现圆角指示器

原生Android View实现（基于Material Components库） #

• 步骤1：创建自定义圆角指示器drawable
  在res/drawable目录下新建tab_rounded_indicator.xml，内容如下：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <!-- 指示器颜色可自行修改 -->
    <solid android:color="@color/colorPrimary" />
    <!-- 圆角大小可自行调整 -->
    <corners android:radius="8dp" />
</shape>

• 步骤2：在布局中配置TabLayout属性
  核心是将tabIndicator指定为上述自定义drawable，同时关闭默认的全屏宽度指示器避免圆角被截断，示例代码：

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tab_layout"
    android:layout_width="match_parent"
    android:layout_height="48dp"
    app:tabIndicator="@drawable/tab_rounded_indicator"
    app:tabIndicatorHeight="3dp"
    <!-- 关闭指示器占满Tab宽度 -->
    app:tabIndicatorFullWidth="false"
    <!-- 可选：直接指定指示器固定宽度，需Material Components 1.5.0及以上版本 -->
    app:tabIndicatorWidth="24dp"
    app:tabMode="fixed"
    app:tabGravity="fill"/>

• 可选：低版本库动态调整指示器宽度
  如果你的Material Components版本低于1.5.0，没有tabIndicatorWidth属性，可以通过代码调整指示器边距实现宽度控制：

// Kotlin示例
tab_layout.apply {
    setSelectedTabIndicator(R.drawable.tab_rounded_indicator)
    // 调整左右边距控制指示器宽度
    setIndicatorMargins(TabLayout.IndicatorMargins(
        start = 36,
        end = 36
    ))
}

Jetpack Compose实现 #

直接在TabRow/ScrollableTabRow的indicator参数中自定义带圆角的指示器即可：

var selectedTab by remember { mutableStateOf(0) }
val tabTitles = listOf("Tab1", "Tab2", "Tab3")

TabRow(
    selectedTabIndex = selectedTab,
    modifier = Modifier.fillMaxWidth(),
    indicator = { tabPositions ->
        TabRowDefaults.Indicator(
            modifier = Modifier
                .tabIndicatorOffset(tabPositions[selectedTab])
                .width(24.dp)
                .height(3.dp)
                .clip(RoundedCornerShape(8.dp))
                .background(Color.Blue)
        )
    }
) {
    tabTitles.forEachIndexed { index, title ->
        Tab(
            selected = selectedTab == index,
            onClick = { selectedTab = index },
            text = { Text(title) }
        )
    }
}

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