注：使用新的屬性需要設(shè)置implementation 'com.android.support:design:28.0.0'

在布局里加入 TabLayout，默認(rèn)是下劃線的樣式欠啤，可以使用 tabIndicatorGravity 屬性設(shè)置為：bottom（默認(rèn)值，可以不用設(shè)置沿盅，指示器顯示在底部）、 top（指示器顯示在頂部）、center（指示器顯示在中間）疾渣、stretch（指示器高度拉伸鋪滿 item）拴魄。

<android.support.design.widget.TabLayout
    android:id="@+id/tl"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabIndicatorColor="@color/colorPrimary"
    app:tabIndicatorFullWidth="true"
    <!-- 設(shè)置 Indicator 高度 -->
    app:tabIndicatorHeight="2dp" 
    app:tabMode="scrollable" />

1. "app:tabIndicatorFullWidth" 屬性

注意 app:tabIndicatorFullWidth="true" 屬性冗茸，設(shè)為 true，是 Indicator 充滿 item 的寬度：

app:tabIndicatorFullWidth="true"

設(shè)為 false 是 Indicator 保持和 item 的內(nèi)容寬度一致：

app:tabIndicatorFullWidth="false"

2. 給 Indicator 設(shè)置邊距

網(wǎng)上的做法一般是通過反射來設(shè)置 Indicator 的寬度匹中，可以參見博客：
關(guān)于Android改變TabLayout 下劃線(Indicator)寬度實踐總結(jié)

不過我覺得可以使用 layer-list 來實現(xiàn)夏漱。
在 drawable 文件夾下新建一個 indicator.xml 文件：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        <!-- 設(shè)置左邊距 -->
        android:left="15dp"
        <!-- 設(shè)置右邊距 -->
        android:right="15dp">
        <!-- 注：這里需要一個空的 <shape /> 標(biāo)簽，否則會報錯 -->
        <shape />
    </item>
</layer-list>

需要注意的是在 shape 里設(shè)置顏色是無效的顶捷，需要在布局文件里設(shè)置 Indicator 顏色挂绰。

在 TabLayout 布局里添加 Indicator 的樣式：

<android.support.design.widget.TabLayout
        android:id="@+id/tl"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        <!-- 設(shè)置 Indicator 高度 -->
        app:tabIndicatorHeight="2dp" 
        <!-- 設(shè)置 Indicator 顏色 -->
        app:tabIndicatorColor="@color/colorPrimary"
        <!-- 設(shè)置 Indicator 的樣式 -->
        app:tabIndicator="@drawable/indicator" 
        app:tabMode="scrollable" />

設(shè)置app:tabIndicator

3. 給 Indicator 設(shè)置圓角

如果不需要邊距，只需要圓角服赎，可以配合 app:tabIndicatorFullWidth 屬性葵蒂，使用 shape 設(shè)置 app:tabIndicator 來實現(xiàn)圓角即可交播，無需使用 layer-list，代碼就不用貼了吧~

這里為了使效果看得明顯一點践付，把 Indicator 的高度設(shè)置為 5dp秦士。
給 Indicator 添加了 5dp 的圓角：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:left="15dp"
        android:right="15dp">
        <shape>
            <corners android:radius="5dp" />
        </shape>
    </item>
</layer-list>

帶圓角的下劃線

4. 給 Indicator 設(shè)置寬高

4.1 在 <shape> 的 <size> 標(biāo)簽里設(shè)置寬高：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 若不設(shè)置 gravity，則 Indicator 寬度會填滿整個 item -->
    <item android:gravity="center_horizontal">
        <shape>
            <corners android:radius="5dp" />
            <size
                android:width="20dp"
                android:height="5dp" />
        </shape>
    </item>
</layer-list>

4.2 在 API 23 以上荔仁，支持直接在 layer-list 里給 <item> 標(biāo)簽設(shè)置寬度和高度：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:width="20dp"
        android:height="5dp"
        <!-- 若不設(shè)置 gravity 則默認(rèn)是居左顯示伍宦，需要設(shè)置為水平居中顯示 -->
        android:gravity="center_horizontal"> 
        <shape>
            <corners android:radius="5dp" />
        </shape>
    </item>
</layer-list>

在這里插入圖片描述

5. tabIndicator 屬性源碼分析

TabLayout 的 tabIndicator 屬性里設(shè)置的 layer-list 不支持設(shè)置顏色。
我們查看一下 TabLayout 的源碼乏梁，搜索 TabLayout_tabIndicator：

this.setSelectedTabIndicator(MaterialResources.getDrawable(context, a, styleable.TabLayout_tabIndicator));

setSelectedTabIndicator() 方法：

setSelectedTabIndicator()

在這里插入圖片描述

在這里插入圖片描述

在這里插入圖片描述

可見如果我們在布局里給 TabLayout 設(shè)置了 tabIndicatorHeight 屬性遇骑，則 Indicator 高度優(yōu)先取 tabIndicatorHeight 設(shè)置的高度卖毁；否則才會取咱們自定義的 drawable 里的高度。

繼續(xù)落萎，第 2 處 tabSelectedIndicator

在這里插入圖片描述

6. 自定義復(fù)雜的 Indicator 樣式

如果需要復(fù)雜一點的樣式媒鼓，比如 <stroke> 届吁。
先寫一個 tab 被選中時的樣式 indicator.xml：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        <!-- 設(shè)置邊距 -->
        android:bottom="8dp"
        android:left="8dp"
        android:right="8dp"
        android:top="8dp">
        <shape>
            <!-- 設(shè)置圓角 -->
            <corners android:radius="5dp" />
            <!-- 設(shè)置邊框 -->
            <stroke
                android:width="1dp"
                android:color="@color/colorAccent" />
        </shape>
    </item>
</layer-list>

還需要一個 selector.xml：

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

接下來，我們要設(shè)置的是 tabBackground绿鸣，也就是 tab 標(biāo)簽的背景疚沐，而不再是tabIndicator，所以要把 Indicator 的高度設(shè)為 0 潮模，不使用 tab 原生的 Indicator亮蛔。

這里還要注意一下 tabRippleColor 屬性，是設(shè)置點擊 tab 標(biāo)簽時的波紋顏色擎厢，不設(shè)置的時候究流，默認(rèn)是灰色的，文章前面的截圖里有顯示效果动遭。如果想去掉這個效果梯嗽，設(shè)置顏色為透明即可。

<android.support.design.widget.TabLayout
        android:id="@+id/tl"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        <!-- 使用我們自定義的點擊樣式 -->
        app:tabBackground="@drawable/selector"
        <!-- tabIndicator 高度設(shè)為 0 -->
        app:tabIndicatorHeight="0dp"
        app:tabMode="scrollable"
        <!-- 設(shè)置點擊時的波紋顏色為透明 -->
        app:tabRippleColor="@android:color/transparent" />

在這里插入圖片描述

附上一個效果圖，感覺還是很酷炫的：

在這里插入圖片描述