Kotlin TabLayout with ViewPager

TabLayout with ViewPager is a common design pattern for Android apps that allows users to easily navigate between different screens or sections. In this tutorial, we'll discuss how to implement TabLayout with ViewPager in Kotlin.

Syntax

To implement TabLayout with ViewPager in Kotlin, follow the steps below:

1. Add the TabLayout and ViewPager widgets to your layout file.
2. Create separate fragments for each screen or section you want to display.
3. Create an Adapter class that extends FragmentPagerAdapter and implements the necessary methods.
4. Set the Adapter class to the ViewPager and connect it with the TabLayout.

Example

Let's say you want to implement TabLayout with ViewPager to display two fragments: Fragment1 and Fragment2. Here's how you can do it in Kotlin:

1. In your layout file, add the TabLayout and ViewPager widgets:

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tab_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabMode="fixed">

    <com.google.android.material.tabs.TabItem
        android:id="@+id/tab1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Tab 1"/>

    <com.google.android.material.tabs.TabItem
        android:id="@+id/tab2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Tab 2"/>

</com.google.android.material.tabs.TabLayout>

<androidx.viewpager.widget.ViewPager
    android:id="@+id/view_pager"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"/>

2. Create separate fragments for Fragment1 and Fragment2:

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

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

3. Create an Adapter class that extends FragmentPagerAdapter and overrides the necessary methods:

class ViewPagerAdapter(fragmentManager: FragmentManager) : FragmentPagerAdapter(fragmentManager) {

    private val fragmentList = arrayListOf<Fragment>()
    private val fragmentTitleList = arrayListOf<String>()

    override fun getItem(position: Int): Fragment {
        return fragmentList[position]
    }

    override fun getCount(): Int {
        return fragmentList.size
    }

    override fun getPageTitle(position: Int): CharSequence {
        return fragmentTitleList[position]
    }

    fun addFragment(fragment: Fragment, title: String) {
        fragmentList.add(fragment)
        fragmentTitleList.add(title)
    }
}

4. Set the Adapter class to the ViewPager and connect it with the TabLayout:

val viewPager = findViewById<ViewPager>(R.id.view_pager)
val adapter = ViewPagerAdapter(supportFragmentManager)
adapter.addFragment(Fragment1(), "Fragment 1")
adapter.addFragment(Fragment2(), "Fragment 2")
viewPager.adapter = adapter

val tabLayout = findViewById<TabLayout>(R.id.tab_layout)
tabLayout.setupWithViewPager(viewPager)

Output

When you run the app, you should see a TabLayout with two tabs labeled "Tab 1" and "Tab 2". Swiping between the tabs should display Fragment1 and Fragment2, respectively.

Explanation

TabLayout with ViewPager is a common design pattern for Android apps that allows users to easily navigate between different screens or sections. TabLayout is used to display tabs, while ViewPager is used to swipe between different fragments. To implement TabLayout with ViewPager in Kotlin, we created separate fragments for each screen or section, created an Adapter class that extends FragmentPagerAdapter, and set the Adapter class to the ViewPager and connect it with the TabLayout.

Use

TabLayout with ViewPager can be used to display different screens or sections in your Android app. This design pattern is particularly useful for displaying content that is related but separate, such as different categories in a news app or different steps in a form.

Important Points

• Make sure to include the necessary dependencies in your app's build.gradle file:

  implementation 'com.google.android.material:material:1.2.0'
  

• When creating an Adapter class, make sure to override the necessary methods: getItem(), getCount(), and getPageTitle().

• When setting up the TabLayout with the ViewPager, make sure to call the setupWithViewPager() method.

Summary

In this tutorial, we discussed how to implement TabLayout with ViewPager in Kotlin. We covered the syntax, example, output, explanation, use, important points, and summary of implementing TabLayout with ViewPager in Kotlin. With this knowledge, you can now create a TabLayout with ViewPager for your Android app and allow users to easily navigate between different screens or sections.