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

最终效果

• 底部导航栏长度不再是填满,而是固定长度
• 显示圆角矩形
  

实现原理

• 隐藏 TabLayout 原生的 tabIndicator

 <android.support.design.widget.TabLayout
       ...
        app:tabIndicatorHeight="0dp"
     .../>

• 替换 tabBackground

 <android.support.design.widget.TabLayout
       ...
         app:tabBackground="@drawable/tab_selector"
     .../>

• 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>

其中的选中 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>

备注

• 原理是替换 tabBackground 的背景.
• 具体的替换drawable可以是 UI 设计,这里只是用 xml 简单的写了一个用于演示
• 测试发现这个xml写的drawable在 YunOs手机(魅族2)上失效