TabLayout Indicator的自定义效果

简介

通常，TabLayout的指示器一般只是修改下颜色，并没有过多的进行自定义。但是通过修改Indicator的相关属性，可以达到一些特殊的效果，先看下相关的效果图：

test.gif

开始

其实上面的实现思路基本都是一样的，就是让indicator的高度和TabLayout的高度一致

第一种方式如下：

部分属性说明：

• android:background：用于设置TabLayout的背景圆角
• app:tabIndicator：用于设置指示器的圆角
• app:tabIndicatorColor： 设置指示器的颜色

注意：如果不设置该参数app:tabIndicatorColor，则指示器颜色默认为colorPrimary，即使在app:tabIndicator设置的drawable里设置颜色也是无效的！

第二种方式实际上就设置了indicator的动画

app:tabIndicatorAnimationMode="elastic"

默认动画为linear

第三种方式如下：

其实与第一种基本一致，主要就是将app:tabIndicatorColor设置为透明，确保app:tabIndicator不会被遮挡

第四种方式如下：

相当于把TabItem中的文字换成了图标，并通过设置app:tabMinWidth来缩小TabItem的间距，默认值为72dp，这样看起来其实并不一定要用来当做Tab使用，也可以当做Toggle button来使用，当然也有用作ViewPager的指示器的

内容比较简单，就不放源码了

Material Design Tabs

Android Dot TabItem