TabLayout Onboarding Screens with ViewPager2 and Fragment

In this post we will create Android TabLayout  OnBoarding UI with ViewPager2.  This OnBoarding UI library contains viewpager2 with fragment. This OnBoarding screens UI involved the Android Navigation Component, Android ViewPager2 and Fragment

ViewPager2 is packed inside the latest AndroidX library of JetPack instead of Material Component library. 

Let us create 3 fragments like Fragment1, Fragment2 and Fragment3.

Here the sample code to create fragment with return respective fragment..

class Fragment1 : Fragment() {
    private var _binding: Fragment1Binding? = null

    // This property is only valid between onCreateView and
    // onDestroyView.
    private val binding get() = _binding!!


    override fun onCreateView(
            inflater: LayoutInflater,
            container: ViewGroup?,
            savedInstanceState: Bundle?
    ): View {
        _binding = Fragment1Binding.inflate(inflater, container, false)
        return binding.root
    }

    companion object {
        fun create(): Fragment1 {
            return Fragment1()
        }
    }

    override fun onDestroyView() {
        super.onDestroyView()
        _binding = null
    }
}

..

In the fragment: add the functionality 

class TabLayoutDemo : Fragment() {

    private var _binding: TabLayoutBinding? = null

    // This property is only valid between onCreateView and
    // onDestroyView.
    private val binding get() = _binding!!


    override fun onCreateView(
            inflater: LayoutInflater,
            container: ViewGroup?,
            savedInstanceState: Bundle?
    ): View {

        _binding = TabLayoutBinding.inflate(inflater, container, false)
        return binding.root
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)

        //renderViewPager
        binding.viewpager.adapter = object : FragmentStateAdapter(this) {

            override fun createFragment(position: Int): Fragment {
                return ResourceStore.pagerFragments[position]
            }

            override fun getItemCount(): Int {
                return ResourceStore.tabList.size
            }
        }

        //renderTabLayer
        TabLayoutMediator(binding.tabs, binding.viewpager) { tab, position ->
            tab.text = getString(ResourceStore.tabList[position])
        }.attach()

    }

}

interface ResourceStore {
    companion object {
        val tabList = listOf(
            R.string.tab1, R.string.tab2, R.string.tab3
        )
        val pagerFragments = listOf(
            Fragment1.create(),
            Fragment2.create(),
            Fragment3.create())
    }
}

..

And design for the first onboarding screen

<LinearLayout 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"
    android:background="@android:color/white"
    android:orientation="vertical">

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        app:tabGravity="fill"
        app:tabMode="fixed"
        app:tabMaxWidth="0dp"
        app:tabIndicatorColor="@android:color/black"
        app:tabIndicatorHeight="5dp"
        app:tabSelectedTextColor="@android:color/holo_red_light"
        app:tabTextAppearance="@style/CustomTabText"
        android:layout_height="60dp" />
    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</LinearLayout>

..

Swipe Tabs Example with TabLayout & ViewPager2

We need to create a TabLayoutMediator to connect the TabLayout to ViewPager2.

TabLayoutMediator(binding.tabLayout, binding.viewPager2) { tab, position ->
        }.attach()

Run the app. Appreciate navigating with your new tab labels and swiping between fragments.

..

GET source code on Github:

..

..