How To Create Tab Layout With Rounded Corners In Android

Android

The Tab Layout is used to display tabs in a horizontal layout and it can be implemented with or without a ViewPager. Also, The layout handles interactions for a group of tabs such as scrolling behaviour, swipe gestures, tab selection, animations and alignment.

In this example, the Tab Layout is going to be styled to have rounded corners and attached to a ViewPager.

Let’s dive right in.

Adding the design support library

Add the google material design library to your application build.gradle to use the TabLayout library 

dependencies {
    // ...
    implementation 'com.google.android.material:material:<version>'
    // ...
  }

Working on the Activity Layout file support

Start by including the Tab Layout library in the required xml layout file:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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/tab_layout"
                android:layout_width="match_parent"
                android:layout_height="27dp"
                app:tabGravity="fill"
                app:tabIndicatorColor="?attr/colorAccent"
                app:tabIndicatorGravity="stretch"
                app:tabMaxWidth="0dp"
                app:tabMode="fixed"
                app:tabSelectedTextColor="@android:color/white"
                app:tabTextAppearance="@android:style/TextAppearance.Widget.TabWidget"
                app:tabTextColor="?attr/colorPrimary">
            </com.google.android.material.tabs.TabLayout>
                                    
<androidx.constraintlayout.widget.ConstraintLayout>

But this doesn’t make the corners rounded yet. Let’s make it so by wrapping into a CardView in the activity_main.xml file and specifying the cardCornerRadius for rounded corners 

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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">

                                    
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>
                                    
        <com.google.android.material.card.MaterialCardView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="12dp"
            app:cardCornerRadius="12dp"
            app:strokeColor="?attr/colorAccent"
            app:strokeWidth="1dp">
                                    
            <com.google.android.material.tabs.TabLayout
                android:id="@+id/tab_layout"
                android:layout_width="match_parent"
                android:layout_height="27dp"
                app:tabGravity="fill"
                app:tabIndicatorColor="?attr/colorAccent"
                app:tabIndicatorGravity="stretch"
                app:tabMaxWidth="0dp"
                app:tabMode="fixed"
                app:tabSelectedTextColor="@android:color/white"
                app:tabTextAppearance="@android:style/TextAppearance.Widget.TabWidget"
                app:tabTextColor="?attr/colorPrimary">

                                    
            </com.google.android.material.tabs.TabLayout>
                                    
        </com.google.android.material.card.MaterialCardView>
                                    
    </LinearLayout>
                                    
<androidx.constraintlayout.widget.ConstraintLayout>

Great, we have rounded corners now.

Adding the ViewPager to our layout file

As said above, this example would be implementing the ViewPager in the tab layout here, and this allows swipe gestures between fragments in the tab layout.

<androidx.viewpager.widget.ViewPager
           android:id="@+id/pager"
           android:layout_width="match_parent"
           android:layout_height="match_parent"
           app:layout_behavior="@string/appbar_scrolling_view_behavior">
           />

The ViewPager is all set up now.

Working on the Fragments required

We are going to add two fragments to the tab layout:

<?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=".fragments.Fragment1">

                                    
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="Fragment1"
        android:gravity="center"/>
                                    
</RelativeLayout>
                                
import android.os.Bundle 
import androidx.fragment.app.Fragment 
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import com.example.roundedtablayout.R
                                
class Fragment1 : Fragment() {
    private val fragmentList =  ArrayList<Fragment>()
    private val fragmentTitleList =  ArrayList<String>()
                                
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        return inflater.inflate(R.layout.fragment_1, container, false)
    }
}

Note: The second fragment is implemented the same way the first fragment is displayed in this example

Adding the ViewPager Adapter

The ViewPager Adapter is setup to dynamically add fragments in the tab layout:

import androidx.fragment.app.Fragment 
import androidx.fragment.app.FragmentManager 
import androidx.fragment.app.FragmentStatePagerAdapter
                                
class ViewPagerAdapter (supportFragmentManager: FragmentManager):
        FragmentStatePagerAdapter(supportFragmentManager){
    private val fragmentList =  ArrayList<Fragment>()
    private val fragmentTitleList =  ArrayList<String>()
                                
    override fun getItem(position: Int): Fragment { 
        return fragmentList[position]
    }
                                
    override fun getCount(): Int { 
        return fragmentList.size
    }
                                
    override fun getPageTitle(position: Int): CharSequence? { 
        return fragmentTitleList[position]
    }
                                
    fun addFragment(fragment: Fragment, title: String) {
        fragmentList.add(fragment)
        fragmentTitleList.add(title)
    }
                                
}

Connecting it all together

Lastly, we need to link everything together in our MainActivity:

import androidx.appcompat.app.AppCompatActivity 
import android.os.Bundle 
import androidx.viewpager.widget.ViewPager 
import com.example.roundedtablayout.adapter.ViewPagerAdapter 
import com.example.roundedtablayout.fragments.Fragment1 
import com.example.roundedtablayout.fragments.Fragment2 
import com.google.android.material.tabs.TabLayout 
import kotlinx.android.synthetic.main.activity_main.*
                                
class MainActivity : AppCompatActivity() {
    lateinit var viewPager: ViewPager
    lateinit var tabLayout: TabLayout
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
                                
        viewPager = findViewById(R.id.pager)
        tabLayout = findViewById(R.id.tab_layout)
        setAdapters()
                                
    }
                                
    private fun setAdapters() {
        val adapter = ViewPagerAdapter(supportFragmentManager)
        adapter.addFragment(Fragment1(), "Tab 1")
        adapter.addFragment(Fragment2(), "Tab 2")
        viewPager.adapter = adapter
        tabLayout.setupWithViewPager(pager)
    }
}

When we run the app, this is what we are definitely going to have:

This is not all to it, as you can check out the official documentation to see what more, and also checkout the full code on github

Feel free to reach out to me on twitter to ask questions or give a feedback Thank you!