How to use TabLayout and ViewPager in Android Kotlin


TabLayout and ViewPager is a great feature in Android Kotlin. With this, you can create a collection of sliding fragments. So let's start.

Here you can see that what will be the output


In your main_activity.xml or any other XML file where you want to use this TabLayout and ViewPager, copy the code given below.

<android.support.design.widget.AppBarLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" android:id="@+id/appBarLayout"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toStartOf="parent">

        <android.support.design.widget.TabLayout
                android:id="@+id/tabs"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:tabTextColor="#f9f8f8"
                app:tabSelectedTextColor="#fff"
                app:tabGravity="fill"
                app:tabMode="fixed"/>

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
            android:id="@+id/viewPager"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_gravity="left"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"
            app:layout_constraintTop_toBottomOf="@+id/appBarLayout" app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintBottom_toBottomOf="parent">


    </android.support.v4.view.ViewPager>

Create a class ViewPagerAdapter.kt that will manage the ViewPager.

class ViewPagerAdapter internal constructor(fm: FragmentManager) : FragmentPagerAdapter(fm) {

    private val COUNT = 3

    override fun getItem(position: Int): Fragment? {
        var fragment: Fragment? = null
        when (position) {
            0 -> fragment = FragmentA()
            1 -> fragment = FragmentB()
            2 -> fragment = FragmentC()
        }

        return fragment
    }

    override fun getCount(): Int {
        return COUNT
    }

    override fun getPageTitle(position: Int): CharSequence? {
        return "Tab " + (position + 1)
    }
}

Now create Three classes for FragmentA, FragmentB, and FragmentC. And do the code whatever you want to show. 

After that, you just need to set up the TabLayout and ViewPager

in your MainActivity.kt or any other page where you are using this. Do the given code.

val viewPager = findViewById(R.id.viewPager) as ViewPager

        val tabLayout = findViewById(R.id.tabs) as TabLayout


        if (viewPager != null) {
            val adapter = ViewPagerAdapter((activity as AppCompatActivity).supportFragmentManager)
            viewPager.adapter = adapter
        }

That's it. Now it will work properly. Make sure don't forget to create that three Fragment which you are going to call in the ViewPager.

 

Here is the working example of this code - https://play.google.com/store/apps/details?id=com.dream11tipsbaba.cricbaba


Santosh Devnath
PHP Developer
29371