This article will help you learn the following:

  1. TabLayout
  2. ViewPager
  3. FragmentPagerAdapter
  4. Swipe Fragments

Example 1: Kotlin Android TabLayout, PageAdapter and Fragments

Create an app with swipe tabs. Swipe is enabled by PageAdapter. The pages are built by fragments. The tablayout provides the tabs.

Step 1: Create Project

Start by creating an empty Android Studio project.

Step 2: Dependencies

No third party dependency is needed for this project.

Step 3: Design Layout

Design your User Interface for the app using XML as shown.

(a). fragment_1.xml

The layout for the first fragment:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    tools:context=".Fragments.Fragment_1">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Fragment 1"
        android:textSize="30sp"
        android:textColor="@android:color/black"/>

</LinearLayout>

(b). fragment_2.xml

The layout for the second fragment:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    tools:context=".Fragments.Fragment_2">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Fragment 2"
        android:textSize="30sp"
        android:textColor="@android:color/black"/>

</LinearLayout>

(c). fragment_3.xml

The layout for the third fragment

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    tools:context=".Fragments.Fragment_3">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Fragment 3"
        android:textSize="30sp"
        android:textColor="@android:color/black"/>

</LinearLayout>

(d). activity_main.xml

Add both TabLayout and ViewPager inside this layout. Add TabLayout on top. Make ViewPager occupy the whole width and height of the layout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
    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="@color/colorAccent"/>

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</LinearLayout>

Step 4: Write Code

The app will have three tabs. Each tab will represent a single Fragment so we also have three fragments. These fragments will be swipeable. This will be facilitated by ViewPager and PagerAdapter.

(a). Fragment_1.kt

The code for the first fragment:

import android.os.Bundle
import androidx.fragment.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import com.example.tabviewusingkotlin.R

/**
 * A simple [Fragment] subclass.
 */
class Fragment_1 : Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_1, container, false)
    }

}

(b). Fragment_2.kt

Code for the second fragment:

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

import com.example.tabviewusingkotlin.R
/**
 * A simple [Fragment] subclass.
 */
class Fragment_2 : Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_2, container, false)
    }

}

(c). Fragment_3.kt

Code for the third fragment:

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

import com.example.tabviewusingkotlin.R

/**
 * A simple [Fragment] subclass.
 */
class Fragment_3 : Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_3, container, false)
    }

}

(d). PagerAdapter.kt

This PagerAdapter will extend the FragmentPagerAdapter and receive a FragmentManager via the constructor:


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

Here is the full code:

import androidx.fragment.app.Fragment
import androidx.fragment.app.FragmentManager
import androidx.fragment.app.FragmentPagerAdapter
import com.example.tabviewusingkotlin.Fragments.Fragment_1
import com.example.tabviewusingkotlin.Fragments.Fragment_2
import com.example.tabviewusingkotlin.Fragments.Fragment_3

class PageAdapter(fm: FragmentManager) : FragmentPagerAdapter(fm) {
    override fun getItem(position: Int): Fragment {
        when (position) {
            0 -> {
                return Fragment_1()
            }
            1 -> {
                return Fragment_2()
            }
            2 -> {
                return Fragment_3()
            }
            else -> {
                return Fragment_1()
            }
        }
    }

    override fun getPageTitle(position: Int): CharSequence? {

        when (position) {
            0 -> {
                return "One"
            }
            1 -> {
                return "Two"
            }
            2 -> {
                return "Three"
            }

        }
        return super.getPageTitle(position)
    }

    override fun getCount(): Int {
        return 3
    }

}

(e). MainActivity.kt

Start by assigning the PagerAdapter to the ViewPager then invoke the setupWithViewPager() method which will connect our ViewPager to the TabLayout:

        viewPager.adapter = PageAdapter(supportFragmentManager)
        tabLayout.setupWithViewPager(viewPager)

Here is the full code:

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import com.example.tabviewusingkotlin.Adapter.PageAdapter
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

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

        viewPager.adapter = PageAdapter(supportFragmentManager)
        tabLayout.setupWithViewPager(viewPager)

    }
}

Run

Copy the code or download it in the link below, build and run.

Reference

Here are the reference links:

Number Link
1. Download Example
2. Follow code author