简介
通常，TabLayout的指示器一般只是修改下颜色，并没有过多的进行自定义。但是通过修改Indicator的相关属性，可以达到一些特殊的效果，先看下相关的效果图：
test.gif
开始
其实上面的实现思路基本都是一样的，就是让indicator的高度和TabLayout的高度一致
第一种方式如下：
<com.google.android.material.tabs.TabLayout
android:id="@+id/tabLayout1"
android:layout_width="wrap_content"
android:layout_height="40dp"
android:layout_marginTop="16dp"
android:background="@drawable/bg_tab_corner"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:tabIndicator="@drawable/bg_tab_indicator"
app:tabIndicatorColor="@color/teal_200"
app:tabIndicatorHeight="40dp"
app:tabMode="auto"
app:tabSelectedTextColor="@color/white">
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Java" />
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Kotlin" />
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Flutter" />
</com.google.android.material.tabs.TabLayout>
部分属性说明：
-
android:background：用于设置TabLayout的背景圆角 -
app:tabIndicator：用于设置指示器的圆角 -
app:tabIndicatorColor： 设置指示器的颜色
注意：如果不设置该参数app:tabIndicatorColor，则指示器颜色默认为colorPrimary，即使在app:tabIndicator设置的drawable里设置颜色也是无效的！
第二种方式实际上就设置了indicator的动画
app:tabIndicatorAnimationMode="elastic"
默认动画为linear
第三种方式如下：
<com.google.android.material.tabs.TabLayout
android:id="@+id/tabLayout3"
android:layout_width="wrap_content"
android:layout_height="40dp"
android:layout_marginTop="16dp"
android:background="@drawable/bg_tab_corner"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/tabLayout2"
app:tabGravity="center"
app:tabIndicator="@drawable/bg_tab_outline_indicator"
app:tabIndicatorColor="@android:color/transparent"
app:tabIndicatorHeight="40dp"
app:tabMode="auto"
app:tabSelectedTextColor="@color/teal_700">
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Java" />
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Kotlin" />
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Flutter" />
</com.google.android.material.tabs.TabLayout>
其实与第一种基本一致，主要就是将app:tabIndicatorColor设置为透明，确保app:tabIndicator不会被遮挡
第四种方式如下：
<com.google.android.material.tabs.TabLayout
android:id="@+id/tabLayout4"
android:layout_width="wrap_content"
android:layout_height="40dp"
android:layout_marginTop="16dp"
android:background="@drawable/bg_tab_outline_corner"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/tabLayout3"
app:tabGravity="center"
app:tabMinWidth="24dp"
app:tabIndicator="@drawable/bg_tab_indicator"
app:tabIndicatorAnimationMode="elastic"
app:tabIndicatorColor="@color/teal_200"
app:tabIndicatorHeight="40dp"
app:tabMode="auto">
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:icon="@drawable/ic_java" />
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:icon="@drawable/ic_kotlin" />
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:icon="@drawable/ic_flutter" />
</com.google.android.material.tabs.TabLayout>
相当于把TabItem中的文字换成了图标，并通过设置app:tabMinWidth来缩小TabItem的间距，默认值为72dp，这样看起来其实并不一定要用来当做Tab使用，也可以当做Toggle button来使用，当然也有用作ViewPager的指示器的
内容比较简单，就不放源码了
