Skip to main content

How to implement fragment navigation using tabs in Kotlin Android

How to implement fragment navigation using tabs in Kotlin Android.

Here's a step-by-step tutorial on how to implement fragment navigation using tabs in Kotlin Android:

Step 1: Create a new Android project​

Start by creating a new Android project in Android Studio. Choose an appropriate name, package, and minimum SDK version for your project.

Step 2: Add the necessary dependencies​

Open the app-level build.gradle file and add the following dependencies:

implementation 'com.google.android.material:material:1.5.0'
implementation 'androidx.viewpager2:viewpager2:1.0.0'

Sync the project to download the required dependencies.

Step 3: Create the tab layout​

In your main activity layout file (activity_main.xml), add a TabLayout and a ViewPager2 widget. The TabLayout will be used to display the tabs, and the ViewPager2 will handle the fragment navigation.

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

<androidx.viewpager2.widget.ViewPager2
    android:id="@+id/viewPager"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1" />

Step 4: Create the fragment classes​

Create the necessary fragment classes that will be displayed in the tabs. For example, you can create three fragments: Fragment1, Fragment2, and Fragment3.

Step 5: Create a FragmentPagerAdapter​

Create a new Kotlin class called TabPagerAdapter. This class will extend FragmentStateAdapter and will be responsible for handling the fragment navigation.

class TabPagerAdapter(fragmentActivity: FragmentActivity) : FragmentStateAdapter(fragmentActivity) {
    private val fragments = listOf(Fragment1(), Fragment2(), Fragment3())

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

    override fun createFragment(position: Int): Fragment {
        return fragments[position]
    }
}

Step 6: Set up the tab navigation​

In your MainActivity.kt file, initialize the TabLayout and ViewPager2, and set up the tab navigation.

class MainActivity : AppCompatActivity() {
    private lateinit var tabLayout: TabLayout
    private lateinit var viewPager: ViewPager2

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        tabLayout = findViewById(R.id.tabLayout)
        viewPager = findViewById(R.id.viewPager)

        val tabPagerAdapter = TabPagerAdapter(this)
        viewPager.adapter = tabPagerAdapter

        TabLayoutMediator(tabLayout, viewPager) { tab, position ->
            tab.text = "Tab ${position + 1}"
        }.attach()
    }
}

Step 7: Run the app​

Build and run your app on an emulator or a physical device. You should now see the tab layout with the corresponding fragments displayed when you swipe between tabs.

Congratulations! You have successfully implemented fragment navigation using tabs in Kotlin Android. You can now customize the tabs and fragments according to your needs.

Note: Make sure to import the necessary classes and packages as needed throughout the tutorial.