How to create Tabs in Android using Kotlin

In this tutorial, I’m going to show you how to implement Tabs in your Android app using Kotlin

We’re going to use the new ViewPager, ViewPager2.

This version of ViewPager has some new features, and the way to use it with Tabs is a little bit different.

Adding Dependencies

Go to your app-level build.gradle, and add the following dependencies:

dependencies { // ... implementation 'com.google.android.material:material:1.1.0' implementation 'androidx.viewpager2:viewpager2:1.0.0' // ... }
Code language: Kotlin (kotlin)

Creating the Tabs Layout

In your Activity’s layout file, add a TabLayout, for the tabs, and a ViewPager2

<?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" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <com.google.android.material.tabs.TabLayout android:id="@+id/tab_layout" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/colorPrimaryDark" app:tabMaxWidth="0dp" app:tabTextAppearance="?android:attr/textAppearanceMedium" app:textAllCaps="false" /> <androidx.viewpager2.widget.ViewPager2 android:id="@+id/tabs_viewpager" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1"/> </LinearLayout>
Code language: HTML, XML (xml)

Creating Tabs ViewPager Adapter

Create a new Kotlin class and name it TabsPagerAdapter

Next, paste the following code inside:

class TabsPagerAdapter(fm: FragmentManager, lifecycle: Lifecycle, private var numberOfTabs: Int) : FragmentStateAdapter(fm, lifecycle) { override fun createFragment(position: Int): Fragment { when (position) { 0 -> { // # Music Fragment val bundle = Bundle() bundle.putString("fragmentName", "Music Fragment") val musicFragment = DemoFragment() musicFragment.arguments = bundle return musicFragment } 1 -> { // # Movies Fragment val bundle = Bundle() bundle.putString("fragmentName", "Movies Fragment") val moviesFragment = DemoFragment() moviesFragment.arguments = bundle return moviesFragment } 2 -> { // # Books Fragment val bundle = Bundle() bundle.putString("fragmentName", "Books Fragment") val booksFragment = DemoFragment() booksFragment.arguments = bundle return booksFragment } else -> return DemoFragment() } } override fun getItemCount(): Int { return numberOfTabs } }
Code language: Kotlin (kotlin)

In the createFragment method, we return a fragment for each position.

In the getItemCount method, we use the same number of fragments with the tabs.

Adding Tabs in Activity

In the Activity’s Kotlin file, customize and set the number of tabs.

class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) // Tabs Customization tab_layout.setSelectedTabIndicatorColor(Color.WHITE) tab_layout.setBackgroundColor(ContextCompat.getColor(this, R.color.colorPrimaryDark)) tab_layout.tabTextColors = ContextCompat.getColorStateList(this, android.R.color.white) // Set different Text Color for Tabs for when are selected or not //tab_layout.setTabTextColors(R.color.normalTabTextColor, R.color.selectedTabTextColor) // Number Of Tabs val numberOfTabs = 3 // Set Tabs in the center //tab_layout.tabGravity = TabLayout.GRAVITY_CENTER // Show all Tabs in screen tab_layout.tabMode = TabLayout.MODE_FIXED // Scroll to see all Tabs //tab_layout.tabMode = TabLayout.MODE_SCROLLABLE // Set Tab icons next to the text, instead above the text tab_layout.isInlineLabel = true // ... } }
Code language: Kotlin (kotlin)

Then, create the adapter for the ViewPager2 and enable the left-n-right swipe.

class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) // ... // Set the ViewPager Adapter val adapter = TabsPagerAdapter(supportFragmentManager, lifecycle, numberOfTabs) tabs_viewpager.adapter = adapter // Enable Swipe tabs_viewpager.isUserInputEnabled = true // ... } }
Code language: Kotlin (kotlin)

Last, link the TabLayout and the ViewPager2 together, and set the tab titles and icons for each fragment.

class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) // ... // Link the TabLayout and the ViewPager2 together and Set Text & Icons TabLayoutMediator(tab_layout, tabs_viewpager) { tab, position -> when (position) { 0 -> { tab.text = "Music" tab.setIcon(R.drawable.ic_music) } 1 -> { tab.text = "Movies" tab.setIcon(R.drawable.ic_movie) } 2 -> { tab.text = "Books" tab.setIcon(R.drawable.ic_book) } } // Change color of the icons tab.icon?.colorFilter = BlendModeColorFilterCompat.createBlendModeColorFilterCompat( Color.WHITE, BlendModeCompat.SRC_ATOP ) }.attach() // ... } }
Code language: Kotlin (kotlin)

Extra: Customizing Tab’s TextView

You can change Tab’s TextView size and font by getting every child view of the TabLayout and editing the TextViews the way you want

private fun setCustomTabTitles() { val vg = tab_layout.getChildAt(0) as ViewGroup val tabsCount = vg.childCount for (j in 0 until tabsCount) { val vgTab = vg.getChildAt(j) as ViewGroup val tabChildCount = vgTab.childCount for (i in 0 until tabChildCount) { val tabViewChild = vgTab.getChildAt(i) if (tabViewChild is TextView) { // Change Font and Size tabViewChild.typeface = Typeface.DEFAULT_BOLD // val font = ResourcesCompat.getFont(this, R.font.myFont) // tabViewChild.typeface = font // tabViewChild.setTextSize(TypedValue.COMPLEX_UNIT_SP, 25f) } } } }
Code language: Kotlin (kotlin)
You can find the final project here

If you have any questionsplease feel free to leave a comment below

Subscribe
Notify of
guest
2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
john

Thank you for all your good tutorials 🌹