TabLayoutのIndicatorをカスタマイズする

今開発しているアプリで、TabLayoutのIndicatorをちょっとカスタマイズしたくなりました。

出来上がりこんな感じ

選択中のタブに楕円形の背景をつけます。

DrawableでIndicatorを定義する

tab_selector.xmlを定義します。（ファイル名は任意です。）

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
            android:bottom="10dp"
            android:left="45dp"
            android:right="45dp"
            android:top="10dp">
        <shape android:shape="rectangle">
            <stroke android:color="@color/colorPrimary"/>
            <corners
                    android:bottomLeftRadius="45dp"
                    android:bottomRightRadius="45dp"
                    android:topLeftRadius="45dp"
                    android:topRightRadius="45dp"/>
        </shape>
    </item>
</layer-list>

TabLayoutに設定する

<com.google.android.material.tabs.TabLayout
                android:id="@+id/tabs"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:minHeight="?attr/actionBarSize"
                app:tabMode="fixed"
                app:tabGravity="fill"
                app:tabIndicator="@drawable/tab_selector"
                app:tabIndicatorGravity="stretch"
                app:tabRippleColor="@null"
                app:tabTextColor="@android:color/white" />

これだけでIndicatorが楕円形の背景になります。