Android TabLayout Example using ViewPager and Fragments

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 Android TablLayout Example we will see how we can implement it in our android application. You may have already seen Android TabLayout Example in the apps you use daily. For example WhatsApp the home screen is an Android TabLayout Example from where we switch to calls, chats and contacts.

So lets see in this Android TablLayout Example how we can implement the same in our android project.

What is Android 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.

android tablayout example — Android Tablayout Example

Android TabLayout Video Tutorial

Check this updated video tutorial for Android TabLayout.

Creating our Android TabLayout Example

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

Adding Design Support to our Project

We have to add design support library to the dependencies. So right click on app and to go module settings.

Now go to dependencies tab and click on the + button and select library dependency.

Select design and click on ok.

Creating Layouts for the Tab Views

We have to create the layout resource files for our tabs. As in this project I will be displaying 3 tabs so I need to create 3 layout files.

You can see in the image I have tab1.xml, tab2.xml and tab3.xml. All these files are having the same code you can see below.

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

Just change the android:text=”Tab tab_number”,for every layout file to see the tabs are switching or not.
For these 3 layout resource files we also need to create 3 java classes that will contain these resource as fragment.

Create these 3 classes in your project (Tab1, Tab2, Tab3). The code would be the same for every class. Write the following code inside these 3 classes.

package net.simplifiedcoding.androidtablayout;

import android.os.Bundle;

import android.support.v4.app.Fragment;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

/**

* Created by Belal on 2/3/2016.

//Our class extending fragment

public class Tab1 extends Fragment {

//Overriden method onCreateView

@Override

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

//Returning the layout file after inflating

//Change R.layout.tab1 in you classes

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

}

You just need to change the R.layout.tab1 for Tab1.java, R.layout.tab2 for Tab2.java and so on.

Creating a pager adapter

We need a pager adapter to swipe views. So create a new class named Pager.java. and write the following code.

package net.simplifiedcoding.androidtablayout;

import android.support.v4.app.Fragment;

import android.support.v4.app.FragmentManager;

import android.support.v4.app.FragmentStatePagerAdapter;

/**

* Created by Belal on 2/3/2016.

//Extending FragmentStatePagerAdapter

public class Pager extends FragmentStatePagerAdapter {

//integer to count number of tabs

int tabCount;

//Constructor to the class

public Pager(FragmentManager fm, int tabCount) {

super(fm);

//Initializing tab count

this.tabCount= tabCount;

}

//Overriding method getItem

@Override

public Fragment getItem(int position) {

//Returning the current tabs

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;

}

//Overriden method getCount to get the number of tabs

@Override

public int getCount() {

return tabCount;

}

Removing Actionbar

Now one thing we just forget. We have to remove the action bar and we will use the toolbar instead. So go to values -> styles.xml and change the app theme.

<item name="colorPrimary">@color/colorPrimary</item>

<item name="colorPrimaryDark">@color/colorPrimaryDark</item>

<item name="colorAccent">@color/colorAccent</item>

</style>

</resources>

Creating TabLayout and ViewPager

Now we will create our TabLayout, so come inside activity_main.xml and write the following code.

<LinearLayout

android:id="@+id/main_layout"

android:orientation="vertical"

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:background="?attr/colorPrimary"

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/tabLayout"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:background="?attr/colorPrimary"

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"/>

</LinearLayout>

Now come to MainActivity.java.

//Implementing the interface OnTabSelectedListener to our MainActivity

//This interface would help in swiping views

public class MainActivity extends AppCompatActivity implements TabLayout.OnTabSelectedListener{

//This is our tablayout

private TabLayout tabLayout;

//This is our viewPager

private ViewPager viewPager;

In the above code we have implemented the interface OnTabSelectedListener. As we implemented an interface to our class we have to override the methods of this interface. Override the following methods inside MainActivity.java.

@Override

public void onTabSelected(TabLayout.Tab tab) {

}

@Override

public void onTabUnselected(TabLayout.Tab tab) {

}

@Override

public void onTabReselected(TabLayout.Tab tab) {

}

Now come inside onCreate() and write the following code.

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

//Adding toolbar to the activity

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

setSupportActionBar(toolbar);

//Initializing the tablayout

tabLayout = (TabLayout) findViewById(R.id.tabLayout);

//Adding the tabs using addTab() method

tabLayout.addTab(tabLayout.newTab().setText("Your Tab Title"));

tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);

//Initializing viewPager

viewPager = (ViewPager) findViewById(R.id.pager);

//Creating our pager adapter

Pager adapter = new Pager(getSupportFragmentManager(), tabLayout.getTabCount());

//Adding adapter to pager

viewPager.setAdapter(adapter);

//Adding onTabSelectedListener to swipe views

tabLayout.setOnTabSelectedListener(this);

}

Now at last we only need to swipe the view when a new tab is selected. For this go to the overriden method onTabSelected() and write the following code.

@Override

public void onTabSelected(TabLayout.Tab tab) {

viewPager.setCurrentItem(tab.getPosition());

}

So the final code for MainActivity.java would be.

package net.simplifiedcoding.androidtablayout;

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;

//Implementing the interface OnTabSelectedListener to our MainActivity

//This interface would help in swiping views

public class MainActivity extends AppCompatActivity implements TabLayout.OnTabSelectedListener{

//This is our tablayout

private TabLayout tabLayout;

//This is our viewPager

private ViewPager viewPager;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

//Adding toolbar to the activity

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

setSupportActionBar(toolbar);

//Initializing the tablayout

tabLayout = (TabLayout) findViewById(R.id.tabLayout);

//Adding the tabs using addTab() method

tabLayout.addTab(tabLayout.newTab().setText("Tab1"));

tabLayout.addTab(tabLayout.newTab().setText("Tab2"));

tabLayout.addTab(tabLayout.newTab().setText("Tab3"));

tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);

//Initializing viewPager

viewPager = (ViewPager) findViewById(R.id.pager);

//Creating our pager adapter

Pager adapter = new Pager(getSupportFragmentManager(), tabLayout.getTabCount());

//Adding adapter to pager

viewPager.setAdapter(adapter);

//Adding onTabSelectedListener to swipe views

tabLayout.setOnTabSelectedListener(this);

}

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

}

Now run you application.

Bingo its working absolutely fine. You can get the source code from below.

Android TabLayout Example Download Source

So thats all for this Android TabLayout Example guys. Feel free to leave your comments if having any troubles and queries regarding this Android TabLayout Example Project. And stay tuned for more tutorials. Thank You 🙂