TabLayoutカスタマイズ

＜できたこと＞
・ViewPager2でのTabLayout実装。
・タブ選択時に背景と文字色が変更。
・タブ間の区切り線（divider）の表示。

ソースコード

MainActivity.kt

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val viewPager : ViewPager2 = findViewById(R.id.viewPager)
        val tabLayout : TabLayout = findViewById(R.id.tablayout)

        val adapter = ViewPagerAdapter(supportFragmentManager, lifecycle)
        viewPager.adapter = adapter

        // これを入れるとスワイプでの画面切り替えを無効にして、tabタップのみで画面を切り替えること可能
        viewPager.isUserInputEnabled = false

        TabLayoutMediator(tabLayout, viewPager) { tab, position ->
            val relativeLayout = LayoutInflater.from(this)
                .inflate(R.layout.tab_item, tabLayout, false) as RelativeLayout
            val tabTextView : TextView = relativeLayout.findViewById(R.id.tab_title)
            tabTextView.text = adapter.getTabTitle(position)
            tab.customView = relativeLayout
        }.attach()
    }
}

ViewPagerAdapter.kt

class ViewPagerAdapter(
    fm : FragmentManager,
    lifecycle: Lifecycle
) : FragmentStateAdapter(fm, lifecycle) {

    fun getTabTitle(position: Int): CharSequence {
        return "Tab" + (position + 1)
    }

    override fun getItemCount(): Int {
        return 5
    }

    override fun createFragment(position: Int): Fragment {
        return when (position) {
            0 -> SampleFragment()
            1 -> SampleFragment()
            2 -> SampleFragment()
            3 -> SampleFragment()
            4 -> SampleFragment()
            else -> SampleFragment()
        }
    }
}

class SampleFragment : Fragment() {
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        return inflater.inflate(R.layout.fragment_sample, container, false)
    }
}

レイアウト

メイン画面

activity_main.xml

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tablayout"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_marginStart="30dp"
        android:layout_marginEnd="30dp"
        app:tabIndicatorHeight="0dp"
        app:tabPaddingStart="0dp"
        app:tabPaddingEnd="0dp"
        app:tabBackground="@drawable/tab_button"/>

    <View
        android:layout_width="2dp"
        android:layout_height="match_parent"
        android:layout_alignEnd="@id/tablayout"
        android:layout_alignTop="@id/tablayout"
        android:layout_alignBottom="@id/tablayout"
        android:background="@android:color/black" />

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewPager"
        android:layout_marginTop="50dp"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</RelativeLayout>

Fragment画面

fragment_sample.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="fragment"/>

</LinearLayout>

Tabのタイトル・テキストと区切り線

tab_item.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <TextView
        android:id="@+id/tab_title"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textColor="@drawable/tab_select"
        android:gravity="center" />

    <View
        android:layout_width="2dp"
        android:layout_height="match_parent"
        android:layout_alignParentStart="true"
        android:background="@android:color/black" />

</RelativeLayout>

Tab選択時の背景

tab_button.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true">
        <layer-list>
            <item android:bottom="5dp" android:left="5dp" android:right="5dp" android:top="5dp">
                <shape android:shape="rectangle">
                    <solid android:color="@color/button_yellow"/>
                </shape>
            </item>
        </layer-list>
    </item>
</selector>

Tab選択時のテキスト

tab_select.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" android:color="@color/white"/>
    <item android:state_selected="false" android:color="@color/black"/>
</selector>

スクリーンショット

Tab５の右側の区切り線は無理矢理なので、他にいい方法があれば教えてください！