Tạo Tab Layout với ViewPager trong Android bằng Kotlin

Giới thiệu

Ví dụ này minh họa cách tạo giao diện Tab Layout kết hợp ViewPager (hoặc ViewPager2) để hiển thị các Fragment cho các tab Football, Cricket, NBA trong Android Kotlin.

Các bước thực hiện

Bước 1: Tạo dự án mới

Mở Android Studio, chọn File → New Project, chọn template "Tabbed Activity" hoặc Empty Activity rồi thêm dependency.

Bước 2: Thêm dependency Material Design

Trong build.gradle (Module: app):

dependencies {
    implementation "com.google.android.material:material:1.11.0"
    implementation "androidx.viewpager2:viewpager2:1.0.0"
}

Bước 3: Giao diện chính (res/layout/activity_main.xml)

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

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

    </com.google.android.material.appbar.AppBarLayout>

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Bước 4: Fragment mẫu (Football, Cricket, NBA)

Tạo 3 Fragment cùng layout đơn giản:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="https://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:gravity="center"
        android:text="Football Fragment"
        android:textSize="24sp"
        android:textStyle="bold" />

</FrameLayout>

Tương tự cho CricketFragment và NBAFragment (thay text tương ứng).

Bước 5: Adapter cho ViewPager2 (MyAdapter.kt)

import androidx.fragment.app.Fragment
import androidx.fragment.app.FragmentActivity
import androidx.viewpager2.adapter.FragmentStateAdapter

class MyAdapter(activity: FragmentActivity, private val totalTabs: Int) :
    FragmentStateAdapter(activity) {

    override fun getItemCount(): Int = totalTabs

    override fun createFragment(position: Int): Fragment = when (position) {
        0 -> FootballFragment()
        1 -> CricketFragment()
        2 -> NBAFragment()
        else -> FootballFragment()
    }
}

Bước 6: MainActivity.kt

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.viewpager2.widget.ViewPager2
import com.google.android.material.tabs.TabLayout
import com.google.android.material.tabs.TabLayoutMediator

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)
        title = "KotlinApp"

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

        val adapter = MyAdapter(this, 3)
        viewPager.adapter = adapter

        TabLayoutMediator(tabLayout, viewPager) { tab, position ->
            tab.text = when (position) {
                0 -> "Football"
                1 -> "Cricket"
                2 -> "NBA"
                else -> ""
            }
        }.attach()
    }
}

Bước 7: AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android"
    package="com.example.q11">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.MaterialComponents.DayNight.NoActionBar">

        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

    </application>
</manifest>

Chạy ứng dụng

Kết nối thiết bị, nhấn Run. Vuốt ngang hoặc nhấn tab để chuyển đổi giữa các Fragment.

Lưu ý: Nên dùng ViewPager2 + FragmentStateAdapter + TabLayoutMediator (thư viện Material) thay cho ViewPager cũ và FragmentPagerAdapter đã deprecated.