TabLayout in Android

TabLayout is a user interface component in Android that allows developers to create tabs for their applications. It is used to organize content and make it easier for users to navigate between different sections of an app. In this article, we will cover how to use TabLayout in Android and provide some code examples.

Step 1: Adding TabLayout to your project

To use TabLayout in your Android project, you must first add the TabLayout library to your app's build.gradle file. You can do this by adding the following line to your dependencies:

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

This will add the Material Design library to your app, which includes the TabLayout component.

Step 2: Creating a TabLayout

To create a TabLayout in your activity, you can add the following code to your layout file:

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tab_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabMode="fixed"
    app:tabGravity="fill"
    app:tabTextColor="@color/tab_text_color"
    app:tabSelectedTextColor="@color/tab_selected_text_color"/>

This creates a TabLayout with a fixed tab mode and fills the width of the screen. You can customize the appearance of the TabLayout by changing the tabTextColor, tabSelectedTextColor, and other properties.

Step 3: Adding tabs to the TabLayout

To add tabs to the TabLayout, you can use the addTab() method. Here's an example:

val tabLayout = findViewById<TabLayout>(R.id.tab_layout)
tabLayout.addTab(tabLayout.newTab().setText("Tab 1"))
tabLayout.addTab(tabLayout.newTab().setText("Tab 2"))
tabLayout.addTab(tabLayout.newTab().setText("Tab 3"))

This will add three tabs to the TabLayout, each with a label of "Tab 1", "Tab 2", and "Tab 3".

Step 4: Handling tab selection

To handle tab selection, you can add a TabLayout.OnTabSelectedListener to your TabLayout. Here's an example:

tabLayout.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener {
    override fun onTabSelected(tab: TabLayout.Tab) {
        // Handle tab selection
    }

    override fun onTabUnselected(tab: TabLayout.Tab) {
        // Handle tab unselection
    }

    override fun onTabReselected(tab: TabLayout.Tab) {
        // Handle tab reselection
    }
})

This will allow you to handle tab selection, unselection, and reselection events.

Step 5: Using TabLayout with ViewPager

TabLayout is often used in conjunction with ViewPager to create swipeable tabs. Here's an example of how to use TabLayout with ViewPager:

val viewPager = findViewById<ViewPager>(R.id.view_pager)
viewPager.adapter = MyPagerAdapter(supportFragmentManager)

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

This will create a ViewPager with a custom PagerAdapter and link it to the TabLayout.

Conclusion

TabLayout is a powerful tool for organizing content in Android apps. By following these steps, you can add TabLayout to your project and customize it to fit your needs. With TabLayout, you can create intuitive, user-friendly interfaces that make it easy for users to navigate your app.