<androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="@dimen/dp_218"
        android:layout_marginTop="@dimen/dp_10"
        android:orientation="horizontal" />

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="wrap_content"
        android:layout_height="@dimen/dp_6"
        app:tabBackground="@drawable/selector_tab_indicator"
        app:tabIndicatorHeight="@dimen/dp_0"
        app:tabMode="scrollable"
        android:layout_marginTop="@dimen/dp_12"
        android:layout_gravity="center_horizontal"
        app:tabSelectedTextColor="#5FD78D"
        app:tabTextAppearance="@style/CustomTabLayoutTextAppearance"
        app:tabTextColor="@color/color_141414" />

      viewPager?.adapter = adapter
                    tabLayout?.let {
                        viewPager?.let { it1 ->
                            TabLayoutMediator(it, it1) { tab, position ->
                                tab.text = ""
                            }.attach()
                        }
                        try {
                            // 初始化所有 TabItem 的默認(rèn)寬度
                            for (i in 0 until it.tabCount) {
                                val tab = tabLayout?.getTabAt(i)
                                if (i==0){
                                    tab?.view?.layoutParams?.width = resources.getDimensionPixelSize(R.dimen.dp_16)
                                }else {
                                    tab?.view?.layoutParams?.width = resources.getDimensionPixelSize(R.dimen.dp_12)
                                }
                                val tabView = tab?.view as? LinearLayout
                                tabView?.let {
                                    val params = it.layoutParams as LinearLayout.LayoutParams
                                    params.marginStart = resources.getDimensionPixelSize(R.dimen.dp_2)
                                    params.marginEnd = resources.getDimensionPixelSize(R.dimen.dp_2)
                                    it.layoutParams = params
                                }
                                tab?.view?.requestLayout()
                            }

                            // 默認(rèn)選中第一個(gè) Tab（如果需要）
                            tabLayout?.getTabAt(0)?.select()
                        } catch (e: Exception) {
                            e.printStackTrace()
                        }

                    }
                    // 監(jiān)聽 Tab 選中事件
                    tabLayout?.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener {
                        override fun onTabSelected(tab: TabLayout.Tab?) {
                            // 選中時(shí)設(shè)置更大的寬度
                            tab?.view?.layoutParams?.width = resources.getDimensionPixelSize(R.dimen.dp_16)
                            tab?.view?.requestLayout() // 刷新布局
                        }

                        override fun onTabUnselected(tab: TabLayout.Tab?) {
                            // 未選中時(shí)恢復(fù)默認(rèn)寬度
                            tab?.view?.layoutParams?.width = resources.getDimensionPixelSize(R.dimen.dp_12)
                            tab?.view?.requestLayout()
                        }

                        override fun onTabReselected(tab: TabLayout.Tab?) {
                            // 重新選中時(shí)保持選中寬度
                            tab?.view?.layoutParams?.width = resources.getDimensionPixelSize(R.dimen.dp_16)
                            tab?.view?.requestLayout()
                        }
                    })

selector_tab_indicator

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

shape_tab_indicator_selected

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="@dimen/dp_3" />
    <size android:width="@dimen/dp_16" android:height="@dimen/dp_6"/>
    <gradient
        android:angle="0"
        android:endColor="#ff06bdd2"
        android:startColor="#ff18e479" />
</shape>

shape_tab_indicator

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <size
        android:width="@dimen/dp_12"
        android:height="@dimen/dp_6" />
    <corners android:radius="@dimen/dp_3" />
    <solid android:color="@color/color_4d808985" />
</shape>