效果如下

按照官方的文件，TabLayout是無法設定下劃線的寬度的，需要實現圖裡的效果就。那就要在程式碼裡面自定義View，程式碼十分的繁瑣。

那有沒有一種直接在佈局檔案裡面就可以做到這個效果呢？

答案是有的。

首先我們要自定義一個圖片資源，如下 tab_indicator_default.xml

<?xml version="1.0" encoding="utf-8"?><layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <item android:gravity="center"> <shape> <size android:width="15dp" android:height="3dp" /> <solid android:color="#fffa3ca6" /> </shape> </item></layer-list>

然後在佈局檔案中TabLayout中設定

<com.google.android.material.tabs.TabLayout android:id="@+id/tl_type" android:layout_width="match_parent" android:layout_height="46dp" android:background="#FFFFFF" app:tabIndicator="@drawable/tab_indicator_default" app:tabSelectedTextColor="#FA3CA6" app:tabTextColor="#999999"> <com.google.android.material.tabs.TabItem android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="模組1" /> <com.google.android.material.tabs.TabItem android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="模組2" /> <com.google.android.material.tabs.TabItem android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="模組3" /></com.google.android.material.tabs.TabLayout>

重點為app:tabIndicator="@drawable/tab_indicator_default"

其實原理也很簡單，既然TabLayout固定是鋪滿，那我們就可以用一張左右留有空白的圖片去代替，就可以很簡單解決了TabLayout無法設定下標無法設定寬度的問題了。