KotlinでAndroidアプリにタブレイアウト（TabLayout）を実装する方法を徹底解説

この記事では、Kotlinを使用してAndroidアプリにタブレイアウト（TabLayout）を作成する方法を、実際のコード例とともにステップごとに解説します。タブとViewPagerを連携させることで、スワイプ操作でも画面を切り替えられる実用的なUIを実現できます。

完成イメージ

本チュートリアルでは、「Football（サッカー）」「Cricket（クリケット）」「NBA」の3つのタブを持つアプリを作成します。各タブをタップすると対応するフラグメントが表示され、ViewPagerとの連動により横スワイプでもページ遷移が可能です。

Step 1：新規プロジェクトの作成

Android Studioを起動し、メニューから「File」→「New Project」を選択して、必要な情報を入力して新しいプロジェクトを作成します。

Step 2：activity_main.xml にコードを追加

res/layout/activity_main.xml に以下のコードを記述します。TabLayoutとViewPagerを配置しています。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://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"
        android:background="#1db995">
    </com.google.android.material.tabs.TabLayout>

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/tabLayout"
        android:layout_centerInParent="true"
        android:layout_marginTop="100dp"
        tools:layout_editor_absoluteX="8dp" />

</RelativeLayout>

ポイントとして、TabLayoutには背景色（#1db995）を指定しており、ViewPagerはTabLayoutの下に配置されています。

Step 3：MainActivity.kt にコードを追加

src/MainActivity.kt に以下のコードを記述します。ここでタブの追加、アダプターの設定、タブ選択とページ遷移の連携処理を行います。

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

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

    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)

        tabLayout.addTab(tabLayout.newTab().setText("Football"))
        tabLayout.addTab(tabLayout.newTab().setText("Cricket"))
        tabLayout.addTab(tabLayout.newTab().setText("NBA"))
        tabLayout.tabGravity = TabLayout.GRAVITY_FILL

        val adapter = MyAdapter(this, supportFragmentManager,
            tabLayout.tabCount)
        viewPager.adapter = adapter

        viewPager.addOnPageChangeListener(TabLayoutOnPageChangeListener(tabLayout))

        tabLayout.addOnTabSelectedListener(object : OnTabSelectedListener {
            override fun onTabSelected(tab: TabLayout.Tab) {
                viewPager.currentItem = tab.position
            }
            override fun onTabUnselected(tab: TabLayout.Tab) {}
            override fun onTabReselected(tab: TabLayout.Tab) {}
        })
    }
}

このコードでは、addOnPageChangeListenerでViewPagerのページ変更をTabLayoutに反映し、onTabSelectedでタブ選択時にViewPagerの表示ページを切り替えています。これにより双方向の同期が実現されます。

Step 4：アダプタークラス（MyAdapter.kt）の作成

新しいKotlinクラス「MyAdapter.kt」を作成し、以下のコードを追加します。

import android.content.Context
import androidx.fragment.app.Fragment
import androidx.fragment.app.FragmentManager
import androidx.fragment.app.FragmentPagerAdapter

@Suppress("DEPRECATION")
internal class MyAdapter(
    var context: Context,
    fm: FragmentManager,
    var totalTabs: Int
) :
    FragmentPagerAdapter(fm) {
    override fun getItem(position: Int): Fragment {
        return when (position) {
            0 -> {
                Football()
            }
            1 -> {
                Cricket()
            }
            2 -> {
                NBA()
            }
            else -> getItem(position)
        }
    }

    override fun getCount(): Int {
        return totalTabs
    }
}

アダプターはタブの位置（position）に応じて、表示するフラグメントを返す役割を担います。

Step 5：3つのFragmentクラスとレイアウトの作成

次に、3つのFragmentアクティビティ（Cricket、Football、NBA ※名前は自由に変更可能）を作成し、以下のコードを追加します。

Cricket.kt

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.fragment.app.Fragment

class Cricket : Fragment() {
    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        // フラグメント用のレイアウトをインフレート
        return inflater.inflate(R.layout.fragment_cricket, container, false)
    }
}

fragment_cricket.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".Cricket">

    <!-- TODO: 空白フラグメントのレイアウトを更新 -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="Cricket Fragment"
        android:textAlignment="center"
        android:textSize="16sp"
        android:textStyle="bold" />

</FrameLayout>

Football.kt

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.fragment.app.Fragment

class Football : Fragment() {
    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        // フラグメント用のレイアウトをインフレート
        return inflater.inflate(R.layout.fragment_football, container, false)
    }
}

fragment_football.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".Football">

    <!-- TODO: 空白フラグメントのレイアウトを更新 -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="Football Fragment"
        android:textAlignment="center"
        android:textSize="16sp"
        android:textStyle="bold" />

</FrameLayout>

NBA.kt

import android.os.Bundle
import androidx.fragment.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup

class NBA : Fragment() {
    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        // フラグメント用のレイアウトをインフレート
        return inflater.inflate(R.layout.fragment_n_b_a, container, false)
    }
}

fragment_n_b_a.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".NBA">

    <!-- TODO: 空白フラグメントのレイアウトを更新 -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="NBA Fragment"
        android:textAlignment="center"
        android:textSize="16sp"
        android:textStyle="bold" />

</FrameLayout>

Step 6：AndroidManifest.xml の確認・編集

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/AppTheme">
        <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>

アプリの実行方法

それでは、アプリケーションを実行してみましょう。Android端末をパソコンに接続していることを前提としています。Android Studioからアプリを実行するには、プロジェクト内のアクティビティファイルを開き、ツールバーのRun（実行）アイコンをクリックします。表示された選択肢から接続中のモバイルデバイスを選択すると、実機の画面にアプリが起動します。

以下のように、タブをタップまたはスワイプすることで、それぞれのフラグメント画面が切り替わることを確認できます。