[Kotlin]AndroidでiOSのUiPageViewControllerのdots（ドット）有を実装

 TODO

• チュートリアル等で使われる横スクロールして１ページずつ閲覧する画面をAndroidで実現する

例はiOSのホームです

実装

ViewPagerとTabLayoutで実現します。
ドット部分がTabLayoutです

このselectorがキモです
選択状態白く、非選択状態ではunselectedIndicatorで灰色にするとiOSに近いです

indicator_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true">
        <shape
            android:innerRadius="0dp"
            android:shape="ring"
            android:thickness="4dp"
            android:useLevel="false">
            <solid android:color="@android:color/white" />
        </shape>
    </item>
    <item>
        <shape
            android:innerRadius="0dp"
            android:shape="ring"
            android:thickness="4dp"
            android:useLevel="false">
            <solid android:color="@color/unselectedIndicator" />
        </shape>
    </item>
</selector>

fragment_main.xml

<FrameLayout 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">

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/sign_walk_through_view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/sign_walk_through_indicator"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|center"
        android:layout_marginBottom="8dp"
        android:background="@android:color/transparent"
        app:tabBackground="@drawable/indicator_selector"
        app:tabGravity="center"
        app:tabIndicatorHeight="0dp" />

</FrameLayout>

WalkThroughFragment.kt

class WalkThroughFragment : Fragment() {

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

    override fun onActivityCreated(savedInstanceState: Bundle?) {
        super.onActivityCreated(savedInstanceState)

        adapter = WalkThroughFragmentPagerAdapter(childFragmentManager)
        walk_through_view_pager.adapter = adapter
        walk_through_indicator.setupWithViewPager(walk_through_view_pager)
    }

    private inner class WalkThroughFragmentPagerAdapter(manager: FragmentManager) : FragmentPagerAdapter(manager) {

        override fun getItem(position: Int): Fragment? {
            when (position) {
                0 -> return WalkThroughFirstFragment()
                1 -> return WalkThroughSecondFragment()
                2 -> return WalkThroughThirdFragment()
                3 -> return WalkThroughFourthFragment()
            }
            return null
        }

        override fun getCount(): Int {
            return 4
        }
    }
}