TabLayout Indicator的自定义效果

简介

通常，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的指示器的

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

Material Design Tabs

Android Dot TabItem