Kotlin Android TabLayout with ViewPager

Android TabLayout is a Layout which is used to build horizontal tabs. The tabs for the TabLayout is created using the newTab() method. To display this tab over the layout, we need to add this tab using addTab(Tab) method.
Using the methods setText(int) and setIcon(int) we set the title and icon of TabLayout respectively.
We can also integrate the ViewPager with TabLayout. ViewPager provides smooth sliding of tabs over layout.

Kotlin Android TabLayout with ViewPager Example

In this example, we will create a TabLayout with ViewPager.

build.gradel

Add the following dependency in the build.gradle file.

implementation 'com.android.support:design:26.1.0'  
implementation 'com.android.support:support-v4:26.1.0'

activity_main.xml

Add the TabLayout and ViewPager in the activity_main.xml file.

< ?xml version="1.0" encoding="utf-8"?>  
< android.support.constraint.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="example.javatpoint.com.kotlintablayoutexample.MainActivity">  
  
    < android.support.design.widget.TabLayout  
        android:id="@+id/tabLayout"  
        android:layout_width="match_parent"  
        android:layout_height="wrap_content"  
        android:background="#00a294"  
        app:tabTextColor="@android:color/background_light">  
  
    < /android.support.design.widget.TabLayout>  
  
    < android.support.v4.view.ViewPager  
        android:id="@+id/viewPager"  
        android:layout_width="match_parent"  
        android:layout_height="wrap_content"  
        app:layout_constraintTop_toBottomOf="@+id/tabLayout">  
 
   < /android.support.v4.view.ViewPager>  
< /android.support.constraint.ConstraintLayout>

strings.xml

< resources>  
    < string name="app_name">Kotlin TabLayout Example< /string>  
    < !-- TODO: Remove or change this placeholder text -->  
    < string name="home_fragment">Home Fragment< /string>  
    < string name="sport_fragment">Sport Fragment< /string>  
    < string name="movie_fragment">Movie Fragment< /string>  
< /resources>

colors.xml

< ?xml version="1.0" encoding="utf-8"?>  
< resources>  
    < color name="colorPrimary">#03DAC6< /color>  
    < color name="colorPrimaryDark">#aeded9< /color>  
    < color name="colorAccent">#00a294< /color>  
< /resources>

MainActivity.kt

Add the following code in MainActivity.kt class. In this class, the new tab is created using tabLayout!!.newTab() method and this tab is added over TabLayout using tabLayout!!.addTab(Tab).
Call the addOnPageChangeListener() listener of ViewPager to load the tabs on page change.

package example.javatpoint.com.kotlintablayoutexample  
  
import android.support.v7.app.AppCompatActivity  
import android.os.Bundle  
import android.support.design.widget.TabLayout  
import android.support.v4.view.ViewPager  
  
class MainActivity : AppCompatActivity() {  
  
    var tabLayout: TabLayout? = null  
    var viewPager: ViewPager? = null  
    override fun onCreate(savedInstanceState: Bundle?) {  
        super.onCreate(savedInstanceState)  
        setContentView(R.layout.activity_main)  
  
        tabLayout = findViewById< TabLayout>(R.id.tabLayout)  
        viewPager = findViewById< ViewPager>(R.id.viewPager)  
  
        tabLayout!!.addTab(tabLayout!!.newTab().setText("Home"))  
        tabLayout!!.addTab(tabLayout!!.newTab().setText("Sport"))  
        tabLayout!!.addTab(tabLayout!!.newTab().setText("Movie"))  
        tabLayout!!.tabGravity = TabLayout.GRAVITY_FILL  
  
        val adapter = MyAdapter(this, supportFragmentManager, tabLayout!!.tabCount)  
        viewPager!!.adapter = adapter  
  
        viewPager!!.addOnPageChangeListener(TabLayout.TabLayoutOnPageChangeListener(tabLayout))  
  
        tabLayout!!.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener {  
            override fun onTabSelected(tab: TabLayout.Tab) {  
                viewPager!!.currentItem = tab.position  
            }  
            override fun onTabUnselected(tab: TabLayout.Tab) {  
  
            }  
            override fun onTabReselected(tab: TabLayout.Tab) {  
  
            }  
        })  
  
    }  
}

MyAdapter.kt

Create an adapter class MyAdapter.kt and extends FragmentPagerAdapter() class and returns the Fragment. Add this adapter class over ViewPager.

package example.javatpoint.com.kotlintablayoutexample  
  
import android.support.v4.app.FragmentPagerAdapter  
import android.content.Context;  
import android.support.v4.app.Fragment  
import android.support.v4.app.FragmentManager  
  
class MyAdapter(private val myContext: Context, fm: FragmentManager, internal var totalTabs: Int) : FragmentPagerAdapter(fm) {  
  
    // this is for fragment tabs  
    override fun getItem(position: Int): Fragment? {  
        when (position) {  
            0 -> {  
              //  val homeFragment: HomeFragment = HomeFragment()  
                return HomeFragment()  
            }  
            1 -> {  
                return SportFragment()  
            }  
            2 -> {  
               // val movieFragment = MovieFragment()  
                return MovieFragment()  
            }  
            else -> return null  
        }  
    }  
  
    // this counts total number of tabs  
    override fun getCount(): Int {  
        return totalTabs  
    }  
}

Create a fragment as New -> Fragment -> Fragment (Blank).

fragment_home.xml

< ?xml version="1.0" encoding="utf-8"?>  
< 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:gravity="center"  
        android:textSize="20sp"  
        android:text="@string/home_fragment" />  
< /FrameLayout>

HomeFragment.kt

package example.javatpoint.com.kotlintablayoutexample  
  
import android.os.Bundle  
import android.support.v4.app.Fragment  
import android.view.LayoutInflater  
import android.view.View  
import android.view.ViewGroup  
  
class HomeFragment : Fragment() {  
  
    override fun onCreateView(inflater: LayoutInflater?, container: ViewGroup?,  
                          savedInstanceState: Bundle?): View? {  
        // Inflate the layout for this fragment  
        return inflater!!.inflate(R.layout.fragment_home, container, false)  
    }  
}// Required empty public constructor

fragment_sport.xml

< ?xml version="1.0" encoding="utf-8"?>  
< FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    android:layout_width="match_parent"  
    android:layout_height="match_parent">  
    < !-- TODO: Update blank fragment layout -->  
    < TextView  
        android:layout_width="match_parent"  
        android:layout_height="match_parent"  
        android:gravity="center"  
        android:textSize="20sp"  
        android:text="@string/sport_fragment" />  
< /FrameLayout>

SportFragment.kt

package example.javatpoint.com.kotlintablayoutexample  
  
import android.os.Bundle  
import android.support.v4.app.Fragment  
import android.view.ViewGroup  
import android.view.LayoutInflater  
import android.view.View  
  
class SportFragment : Fragment() {  
  
    override fun onCreateView(inflater: LayoutInflater?, container: ViewGroup?,  
                              savedInstanceState: Bundle?): View? {  
        // Inflate the layout for this fragment  
        return inflater!!.inflate(R.layout.fragment_sport, container, false)  
    }  
  
}// Required empty public constructor   Required empty public constructor

fragment_movie.xml

< FrameLayout 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"  
    tools:context="example.javatpoint.com.kotlintablayoutexample.MovieFragment">  
  
    < !-- TODO: Update blank fragment layout -->  
    < TextView  
        android:layout_width="match_parent"  
        android:layout_height="match_parent"  
        android:gravity="center"  
        android:textSize="20sp"  
        android:text="@string/movie_fragment" />  
  
< /FrameLayout>

MovieFragment.kt

package example.javatpoint.com.kotlintablayoutexample  
  
import android.os.Bundle  
import android.support.v4.app.Fragment  
import android.view.LayoutInflater  
import android.view.View  
import android.view.ViewGroup  
  
class MovieFragment : Fragment() {  
  
    override fun onCreateView(inflater: LayoutInflater?, container: ViewGroup?,  
                              savedInstanceState: Bundle?): View? {  
        // Inflate the layout for this fragment  
        return inflater!!.inflate(R.layout.fragment_movie, container, false)  
    }  
  
}// Required empty public constructor

Output:

Enroll now!

Theoretical Paper

Practical Paper

Industrial Training