Kotlin Android TabLayout with ViewPager: Building a Dynamic User Interface

Mobile applications often require multiple screens or sections to present different pieces of information or functionalities to users. One common way to achieve this in Android development is by using a combination of TabLayout and ViewPager. TabLayout provides a set of tabs that allow users to switch between different sections of your app, and ViewPager helps in swiping between these sections. In this tutorial, we will explore how to implement a TabLayout with ViewPager in Kotlin for your Android application.

Prerequisites

Before you begin, make sure you have the following set up:

1. Android Studio installed and configured.
2. A basic understanding of Kotlin and Android development.

Step 1: Create a New Project

Start by creating a new Android project in Android Studio. Follow the wizard's steps, and make sure to select an Empty Activity template.

Step 2: Design Your Layout

In your project, navigate to the res/layout folder and open the activity_main.xml file. This is where you will define your layout.

For a basic example, let's create a TabLayout with two tabs, each containing a simple TextView. Your layout file might look something like this:

xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

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

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@id/tabLayout" />

</androidx.constraintlayout.widget.ConstraintLayout>

This layout contains a TabLayout (tabLayout) and a ViewPager (viewPager). The ViewPager will be responsible for displaying the content associated with each tab.

Step 3: Create Fragments

To display content within the ViewPager, you'll need to create fragments for each tab. Create two new fragments in your project: FragmentOne and FragmentTwo. You can do this by right-clicking on the src folder, selecting "New," and then "Fragment (Blank)."

In each fragment's layout file (e.g., fragment_one.xml and fragment_two.xml), you can add your desired content. For simplicity, we'll add a TextView to each fragment's layout.

xml
<!-- fragment_one.xml -->
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

</FrameLayout>

xml
<!-- fragment_two.xml -->
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

</FrameLayout>

Step 4: Create Fragment Adapters

Next, create a FragmentPagerAdapter to manage the fragments within the ViewPager. You can create a new Kotlin class named TabPagerAdapter:

kotlin
import androidx.fragment.app.Fragment
import androidx.fragment.app.FragmentManager
import androidx.fragment.app.FragmentPagerAdapter

class TabPagerAdapter(fm: FragmentManager) : FragmentPagerAdapter(fm) {

    override fun getItem(position: Int): Fragment {
        return when (position) {
            0 -> FragmentOne()
            1 -> FragmentTwo()
            else -> throw IllegalArgumentException("Invalid position")
        }
    }

    override fun getCount(): Int {
        return 2 // Number of tabs
    }

    override fun getPageTitle(position: Int): CharSequence? {
        return when (position) {
            0 -> "Tab 1"
            1 -> "Tab 2"
            else -> null
        }
    }
}

This adapter is responsible for providing the appropriate fragment for each position within the ViewPager. You also specify the tab titles in getPageTitle.

Step 5: Configure MainActivity

Now, let's set up the MainActivity to display the TabLayout with ViewPager. In your MainActivity.kt file, add the following code:

kotlin
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.viewpager.widget.ViewPager
import com.google.android.material.tabs.TabLayout

class MainActivity : AppCompatActivity() {

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

        val viewPager: ViewPager = findViewById(R.id.viewPager)
        val tabLayout: TabLayout = findViewById(R.id.tabLayout)

        val adapter = TabPagerAdapter(supportFragmentManager)
        viewPager.adapter = adapter
        tabLayout.setupWithViewPager(viewPager)
    }
}

In this code, you set up the ViewPager and TabLayout and link them using setupWithViewPager.