If you are using the latest android application then you have noticed that now days android is following a design pattern. This is material design and it came with Android Lollipop (5.0). Though we can still use this design pattern for the older versions (>4.0) by using the support libraries. One of the component of material design is TabLayout. So in this TablLayout Example we will see how we can implement it in our android application.

What is TabLayout ?

Android TabLayout provides horizontal layout to display tabs. We can display more screens in a single screen using tabs. User can swipe the tabs quickly as you can see in the image below.

Creating a new project and add necessary libraries

Open Android Studio and create a new project. I have created DemoTabLayout.

After create a new project, First of all we have to need include design libraries in the dependencies section of our build.gradle file so include this libraries in your build.gradle file by below line.

implementation 'com.android.support:design:28.0.0'

Remove action bar from style

Now since we will be using Android Toolbar and TabLayout classes to show tabs, lets remove the action bar from layout by using styles,

Go to style.xml file and change the parent of theme which you are using in your app.Change parent with “Theme.AppCompat.Light.NoActionBar”. So now your style file will look like below code

<resources>
  <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
     <item name="colorPrimary">#3F51B5</item>
     <item name="colorPrimaryDark">#303F9F</item>
     <item name="colorAccent">#FF4081</item>
  </style>

</resources>

Creating fragments

We are creating an application which will have three tabs, So let’s define three fragment and their layouts.

First Fragment

package com.vikas.demotablayout;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
class tab1 extends Fragment {
   @Override
   public View onCreateView(LayoutInflater inflater, ViewGroup container,
               Bundle savedInstanceState) {
           return inflater.inflate(R.layout.fragment_tab1, container, false);
         }
   }

It’s layout

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
     
    <TextView
      android:id="@+id/textView"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_centerInParent="true"
      android:text="Tab 1"
      android:textAppearance="?android:attr/textAppearanceLarge"/>

 </RelativeLayout>

Second Fragment

package com.vikas.demotablayout;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;


public class Tab2 extends Fragment {
   
   @Override
   public View onCreateView(LayoutInflater inflater, ViewGroup container,
               Bundle savedInstanceState) {
          return inflater.inflate(R.layout.fragment_tab2, container, false);
	}
   }

it’s layout

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
	<TextView
          android:id="@+id/textView"
	  android:layout_width="wrap_content"
 	  android:layout_height="wrap_content"
          android:layout_centerInParent="true"
	  android:text="Tab 2"
          android:textAppearance="?android:attr/textAppearanceLarge"/>
</RelativeLayout>

Third Fragment

package com.vikas.demotablayout;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class Tab2 extends Fragment {


@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {

	 return inflater.inflate(R.layout.fragment_tab3, container, false);
      }

}

its layout

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:orientation="vertical">
     <TextView
        android:id="@+id/textView"
	android:layout_width="wrap_content"
        android:layout_height="wrap_content"
	android:layout_centerInParent="true"
        android:text="Tab 2"
	android:textAppearance="?android:attr/textAppearanceLarge"/>
</RelativeLayout>

Now we will define a view pager adapter to create tab swipe functionality.

package com.vikas.demotablayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;

public class PagerAdapter extends FragmentStatePagerAdapter {

    int mNumOfTabs;
    public PagerAdapter(FragmentManager fm, int NumOfTabs) {
     	super(fm);
	this.mNumOfTabs = NumOfTabs;
    }
    @Override
    public Fragment getItem(int position) {
       switch (position) {
	  case 0:
            tab1 tab1 = new tab1();
            return tab1;
          case 1:
            Tab2 tab2 = new Tab2();
            return tab2;
          case 2:
            Tab3 tab3 = new Tab3();
            return tab3;
          default:
            return null;
        }
    }
    @Override
    public int getCount() {
        return mNumOfTabs;
    }
}

Now we will create an Activity named MainActivity which will hold the tabs . This Activity will have two part first is code file and second is layout file. layout file code given below

<RelativeLayout
        android:id="@+id/main_layout"
        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=".MainActivity">
	<android.support.v7.widget.Toolbar
	    android:id="@+id/toolbar"
	    android:layout_width="match_parent"
	    android:layout_height="wrap_content"
	    android:layout_alignParentTop="true"
	    android:background="?attr/colorPrimary"
	    android:elevation="6dp"
	    android:minHeight="?attr/actionBarSize"
	    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
	    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
	<android.support.design.widget.TabLayout
	    android:id="@+id/tab_layout"
	    android:layout_width="match_parent"
	    android:layout_height="wrap_content"
	    android:layout_below="@+id/toolbar"
	    android:background="?attr/colorPrimary"
	    android:elevation="6dp"
	    android:minHeight="?attr/actionBarSize"
	    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
	<android.support.v4.view.ViewPager
	    android:id="@+id/pager"
	    android:layout_width="match_parent"
	    android:layout_height="fill_parent"
	    android:layout_below="@id/tab_layout"/>
</RelativeLayout>

We can see above that here we add a Toolbar, second is Tablayout and third thing is Viewpager. Toolbar is for showing application name and menu icon. TabLayout is for showing Tabs and viewpager is for holding fragments. Now we write code for attach this layout with fragments in MainActivity code file. Code is given below:

package com.vikas.demotablayout;
import android.support.design.widget.TabLayout;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.Menu;

public class MainActivity extends AppCompatActivity {

   @Override
   protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
	TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);
	tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));
        tabLayout.addTab(tabLayout.newTab().setText("Tab 2"));
        tabLayout.addTab(tabLayout.newTab().setText("Tab 3"));
        tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
        final ViewPager viewPager = (ViewPager) findViewById(R.id.pager);
        final PagerAdapter adapter = new PagerAdapter
                (getSupportFragmentManager(), tabLayout.getTabCount());
        viewPager.setAdapter(adapter);
        viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));

        tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
          @Override
          public void onTabSelected(TabLayout.Tab tab) {
	          viewPager.setCurrentItem(tab.getPosition());
	  }
          @Override
          public void onTabUnselected(TabLayout.Tab tab) {
	  }
          @Override
          public void onTabReselected(TabLayout.Tab tab) {
          }
        });
     }

     @Override
     public boolean onCreateOptionsMenu(Menu menu) {
	    getMenuInflater().inflate(R.menu.menu_main, menu);
	    return true;
     }

}

That’s all, Now you can run your project.

Happy coding…