Setup Android ViewPager2 With TabLayout and Fragment (Kotlin)

Depedencies

dependencies {
    // https://mvnrepository.com/artifact/androidx.viewpager2/viewpager2
    implementation 'androidx.viewpager2:viewpager2:1.0.0-alpha06'
}

Layout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:app="http://schemas.android.com/apk/res-auto"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent">

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="scrollable"
        />
    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

</LinearLayout>

Activity

class TestViewPagerActivity : AppCompatActivity() {    override fun onCreate(savedInstanceState: Bundle?) {        super.onCreate(savedInstanceState)        setContentView(R.layout.testviewpager)        setSupportActionBar(toolbar)        init()    }    private fun init() {        viewPager.adapter = object : FragmentStateAdapter(this) {            override fun createFragment(position: Int): Fragment {                return when(position) {                    0 -> {                        SizeFragment.newInstance()                    }                    else -> {                        TemplateFragment.newInstance()                    }                }            }            override fun getItemCount(): Int {                return 2            }        }        TabLayoutMediator(tabs, viewPager) { tab, position ->            tab.text = when(position) {                0 -> "Size"                else -> "Template"            }        }.attach()    }}

Fragments

class SizeFragment : Fragment() {    companion object {        fun newInstance() = SizeFragment()    }    override fun onCreateView(        inflater: LayoutInflater, container: ViewGroup?,        savedInstanceState: Bundle?    ): View? {        // Inflate the layout for this fragment        return inflater.inflate(R.layout.size, container, false)    }}
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
             xmlns:tools="http://schemas.android.com/tools"
             android:layout_width="match_parent"
             android:layout_height="match_parent">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="Size Fragment"/>

</FrameLayout>

References:

❤️ Is this article helpful?

Buy me a coffee ☕ or support my work via PayPal to keep this space 🖖 and ad-free.

Do send some 💖 to @d_luaz or share this article.

✨ By Desmond Lua

A dream boy who enjoys making apps, travelling and making youtube videos. Follow me on @d_luaz

👶 Apps I built

Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.