TabLayout 的底部指示线修改(固定长度,圆角)

最终效果

底部导航栏长度不再是填满,而是固定长度

显示圆角矩形

实现原理

隐藏 TabLayout 原生的 tabIndicator

<android.support.design.widget.TabLayout

      ...

        app:tabIndicatorHeight="0dp"

    .../>

1

2

3

4

替换 tabBackground

<android.support.design.widget.TabLayout

      ...

        app:tabBackground="@drawable/tab_selector"

    .../>

1

2

3

4

selector 代码

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

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/tab_selected" android:state_selected="true" />

    <item android:drawable="@color/white" />

</selector>

1

2

3

4

5

其中的选中 tab_selected 代码

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

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- 整个背景色-->

    <item>

        <shape>

            <solid android:color="@color/white" />

        </shape>

    </item>

    <!-- 底部圆角,参数是固定的 -->

    <item

        android:width="20dp"

        android:height="3dp"

        android:gravity="bottom|center_horizontal">

        <shape>

            <solid android:color="@color/colorPrimary" />

            <corners android:radius="3dp" />

        </shape>

    </item>

</layer-list>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

备注

原理是替换 tabBackground 的背景.

具体的替换drawable可以是 UI 设计,这里只是用 xml 简单的写了一个用于演示

测试发现这个xml写的drawable在 YunOs手机(魅族2)上失效