Creating Tab Layout Using Kotlin

Dream Developers December 25, 2020

 In this tutorial, we will  go over  getting  started TabLayout in your Android Using Kotlin Language.


There are three main steps in order to start with tabs in your app:

  • Setting up the FragmentPagerAdapter

  • The fragments to be displayed in each tab

  • The ViewPager.



So Let's Begin,,
Start a new project with an empty activity.

The TabLayout, Is an Android’s Material Component, We will need to add the dependency for tabs in our build.gradle (app) Module to get access to all the material components and click on sync.

Add the following dependency(if Necessary):


implementation ‘com.android.support:design:26.1.0’


Step 1 : Let’s get started on designing the activity_main.xml file.


So In Activity_main.xml File we will Add Tab Layout and ViewPager as shown Below.

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout 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=".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>


Step 2 : Now we Will Create Object of ViewPager and TabLayout in Our MainActivity.kt File.

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)

      //tablayout Object.

      tabLayout = findViewById(R.id.tabLayout)

      //viewPager object

      viewPager = findViewById(R.id.viewPager)

            //add tabs as you want

      tabLayout.addTab(tabLayout.newTab().setText("Home"))

      tabLayout.addTab(tabLayout.newTab().setText("Chats"))

      tabLayout.addTab(tabLayout.newTab().setText("Status"))

      tabLayout.tabGravity = TabLayout.GRAVITY_FILL

      val adapter = MyAdapter(this, supportFragmentManager,

      tabLayout.tabCount)

       //set the viewpager adapter

      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) {}

      })

   }}

In Above Code We have created Object of Viewpager And Tablayout .

tabLayout = findViewById(R.id.tabLayout)

viewPager = findViewById(R.id.viewPager)

using addTab() method we will add the Tabs.

tabLayout.addTab(tabLayout.newTab().setText("Home"))

After that we have add viewpager Adapter and Listener event of View Pager.

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) {}

      })

   }}

As Of Now Adapter is Shown error Because we have not created Adapter. So Let's Create Viewpager Adapter.

Step 3 : Now Let's Create Adapter Class.

Right Click on Package Name -> New -> Kotlin File/class ->
Select Class and Write the Name of the Class as MyAdapter.

The MyAdapter class will take in a FragmentManager as a parameter. Extend the FragmentPagerAdapter class and pass in the FragmentManager argument.

Override the two necessary functions for the FragmentPagerAdapter class: getCount() and getItem().

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 -> {

            Home()

         }

         1 -> {

            Chats()

         }

         2 -> {

            Status()

         }

         else -> getItem(position)

      }

   }

   override fun getCount(): Int {

      return totalTabs

   }

}

Step 4 : Now We have to create Fragment.

We have to create 3 Fragment because we want 3 tabs.

Right Click on Package Name -> New -> Fragment ->Fragment(Blank)
Give the Fragment Name and Fragment Layout Name and Select Source Language to Kotlin.
Click on Finish Button.

Create 3 Fragments as every tabs (Home.kt, Chats.kt, Status.kt)

Home.kt

import android.os.Bundle

import android.view.LayoutInflater

import android.view.View

import android.view.ViewGroup

import androidx.fragment.app.Fragment

class Home : 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)

   }

}

fragment_home.xml

<?xml version="1.0" encoding="utf-8"?>

<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=".Home">

<!-- TODO: Update blank fragment layout -->

<TextView

   android:layout_width="match_parent"

   android:layout_height="match_parent"

   android:text="Home Fragment"

   android:textAlignment="center"

   android:textSize="16sp"

   android:textStyle="bold" />

</FrameLayout>

Chats.kt

import android.os.Bundle

import android.view.LayoutInflater

import android.view.View

import android.view.ViewGroup

import androidx.fragment.app.Fragment

class Chats : Fragment() {

   override fun onCreateView(

   inflater: LayoutInflater, container: ViewGroup?,

   savedInstanceState: Bundle?

   ): View? {

      // Inflate the layout for this fragment

      return inflater.inflate(R.layout.fragment_chats, container, false)

   }

}

fragment_chats.xml

<?xml version="1.0" encoding="utf-8"?>

<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=".Chats">

<!-- TODO: Update blank fragment layout -->

<TextView

   android:layout_width="match_parent"

   android:layout_height="match_parent"

   android:text="Chats Fragment"

   android:textAlignment="center"

   android:textSize="16sp"

   android:textStyle="bold" />

</FrameLayout>

Status.kt

import android.os.Bundle

import androidx.fragment.app.Fragment

import android.view.LayoutInflater

import android.view.View

import android.view.ViewGroup

class Status : Fragment() {

   override fun onCreateView(

   inflater: LayoutInflater, container: ViewGroup?,

   savedInstanceState: Bundle?

   ): View? {

      // Inflate the layout for this fragment

      return inflater.inflate(R.layout.fragment_status, container, false)

   }

}

fragment_status.xml

<?xml version="1.0" encoding="utf-8"?>

<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=".Status">

<!-- TODO: Update blank fragment layout -->

<TextView

   android:layout_width="match_parent"

   android:layout_height="match_parent"

   android:text="Status Fragment"

   android:textAlignment="center"

   android:textSize="16sp"

   android:textStyle="bold" />

</FrameLayout>


That’s done! Now after adding all this file properly run the project.

Thank You Guys For Reading this Blog.

If You Like this Blog Don't Forget to Follow as on YouTube, Instagram.

Post a Comment

0 Comments