TabLayout with ViewPager in Android

TabLayout is one of the Material Design components available in Android Support Library. Before implementing Tabs in Android, you shall go through the guidelines of Tabs implementation.

In this tutorial we will see:

How to implement simple tabs using TabLayout and ViewPager.
How to make Tabs scrollable when there are many tabs.
How to include icons along with text in Tab title.
How to make only icons as Tab titles.

Table of Contents

1 Displaying Simple Tabs
2 Implementing Scrollable Tabs
3 Tabs with Icons and Text
4 Tabs with Only Icons
5 Tabs with Customized Colors
- 5.1 Customizing Tabs through layout XML
- 5.2 Customizing Tab colors dynamically
6 Source code and APK file

Displaying Simple Tabs

1. Create a project in Android Studio with the name Tab Layout. Choose Tabbed Activity from Add an Activity to Mobile option:

In Configure Activity, choose Action Bar Tabs (with ViewPager) from Navigation Style:

2. Add the string resources that will be used in this project to string.xml:

<resources>
    <string name="app_name">TabLayout</string>
    <string name="tab_text_1">Tab 1</string>
    <string name="tab_text_2">Tab 2</string>
    <string name="tab_text_3">Tab 3</string>
    <string name="action_settings">Settings</string>
    <string name="tab_format">Tab: %1$d</string>
    <string name="button_simple">Simple Tabs</string>
    <string name="button_scrollable">Scrollable Tabs</string>
    <string name="button_icon_text">With Icon and Text</string>
    <string name="button_icon">Only With Icons</string>
    <string name="contacts">Contacts</string>
    <string name="dialer">Dialer</string>
    <string name="messages">Messages</string>
</resources>

<string name="app_name">TabLayout</string>

<string name="action_settings">Settings</string>

<string name="button_simple">Simple Tabs</string>

<string name="button_scrollable">Scrollable Tabs</string>

<string name="button_icon">Only With Icons</string>

<string name="contacts">Contacts</string>

<string name="dialer">Dialer</string>

<string name="messages">Messages</string>

</resources>

3. Delete fragment_main.xml file and add 3 fragment layout files namely fragment_dialer.xml, fragment_contacts.xml, fragment_messages.xml. These layout files form each of the fragment in the 3 Tabs we are going to implement. You can edit these files to display appropriate content.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/constraintLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:background="#eff"
    android:orientation="vertical"
    tools:context="com.androiddeft.tablayout.MainActivity$PlaceholderFragment">


    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="@string/dialer"
        android:textSize="30sp" />
</LinearLayout>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:id="@+id/constraintLayout"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:gravity="center"

android:background="#eff"

android:orientation="vertical"

tools:context="com.androiddeft.tablayout.MainActivity$PlaceholderFragment">

<TextView

android:id="@+id/textView"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:gravity="center"

android:text="@string/dialer"

android:textSize="30sp" />

</LinearLayout>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/constraintLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    tools:context="com.androiddeft.tablayout.MainActivity$PlaceholderFragment">


    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="@string/contacts"
        android:textSize="30sp" />
</LinearLayout>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:id="@+id/constraintLayout"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:gravity="center"

android:orientation="vertical"

tools:context="com.androiddeft.tablayout.MainActivity$PlaceholderFragment">

<TextView

android:id="@+id/textView"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:gravity="center"

android:text="@string/contacts"

android:textSize="30sp" />

</LinearLayout>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/constraintLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:background="#ffe"
    android:orientation="vertical"
    tools:context="com.androiddeft.tablayout.MainActivity$PlaceholderFragment">


    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="@string/messages"
        android:textSize="30sp" />
</LinearLayout>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:id="@+id/constraintLayout"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:gravity="center"

android:background="#ffe"

android:orientation="vertical"

tools:context="com.androiddeft.tablayout.MainActivity$PlaceholderFragment">

<TextView

android:id="@+id/textView"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:gravity="center"

android:text="@string/messages"

android:textSize="30sp" />

</LinearLayout>

4. Create a POJO named TabDetails. This will be used to hold tab title and corresponding fragment:

package com.androiddeft.tablayout;

/**
 * Created by Abhi on 11 Dec 2017 011.
 */

public class TabDetails {
    private String tabName;
    private MainActivity.PlaceholderFragment fragment;

    public TabDetails(String tabName, MainActivity.PlaceholderFragment fragment) {
        this.tabName = tabName;
        this.fragment = fragment;
    }

    public String getTabName() {
        return tabName;
    }

    public void setTabName(String tabName) {
        this.tabName = tabName;
    }

    public MainActivity.PlaceholderFragment getFragment() {
        return fragment;
    }

    public void setFragment(MainActivity.PlaceholderFragment fragment) {
        this.fragment = fragment;
    }

}

package com.androiddeft.tablayout;

/**

* Created by Abhi on 11 Dec 2017 011.

public class TabDetails {

private String tabName;

private MainActivity.PlaceholderFragment fragment;

public TabDetails(String tabName, MainActivity.PlaceholderFragment fragment) {

this.tabName = tabName;

this.fragment = fragment;

}

public String getTabName() {

return tabName;

}

public void setTabName(String tabName) {

this.tabName = tabName;

}

public MainActivity.PlaceholderFragment getFragment() {

return fragment;

}

public void setFragment(MainActivity.PlaceholderFragment fragment) {

this.fragment = fragment;

}

5. Edit MainActivity.java with the following code:

package com.androiddeft.tablayout;

import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.LayoutInflater;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;


import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    /**
     * The {@link android.support.v4.view.PagerAdapter} that will provide
     * fragments for each of the sections. We use a
     * {@link FragmentPagerAdapter} derivative, which will keep every
     * loaded fragment in memory. If this becomes too memory intensive, it
     * may be best to switch to a
     * {@link android.support.v4.app.FragmentStatePagerAdapter}.
     */
    private SectionsPagerAdapter mSectionsPagerAdapter;

    /**
     * The {@link ViewPager} that will host the section contents.
     */
    private ViewPager mViewPager;
    private TabLayout mTabLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);


        mTabLayout = (TabLayout) findViewById(R.id.tabs);

        // Create the adapter that will return a fragment for each of the three
        // primary sections of the activity.
        mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager());

        // Set up the ViewPager with the sections adapter.
        mViewPager = (ViewPager) findViewById(R.id.container);
        populateViewPager();


    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case android.R.id.home:
                onBackPressed();
                return true;
            default:
                return super.onOptionsItemSelected(item);

        }
    }

    /**
     * Creates the fragments and sets it to ViewPager
     */
    private void populateViewPager() {
        TabDetails tab;
        tab = new TabDetails("Dialer", PlaceholderFragment.newInstance(R.layout.fragment_dialer));
        mSectionsPagerAdapter.addFragment(tab);
        tab = new TabDetails("Contacts", PlaceholderFragment.newInstance(R.layout.fragment_contacts));
        mSectionsPagerAdapter.addFragment(tab);
        tab = new TabDetails("Messages", PlaceholderFragment.newInstance(R.layout.fragment_messages));
        mSectionsPagerAdapter.addFragment(tab);
        mViewPager.setAdapter(mSectionsPagerAdapter);
        mTabLayout.setupWithViewPager(mViewPager);
    }


    /**
     * A placeholder fragment containing a simple view.
     */
    public static class PlaceholderFragment extends Fragment {
        /**
         * The fragment argument representing the section number for this
         * fragment.
         */
        private static final String ARG_LAYOUT = "layout";

        public PlaceholderFragment() {
        }

        /**
         * Returns a new instance of this fragment for the given layout.
         */
        public static PlaceholderFragment newInstance(int layout) {
            PlaceholderFragment fragment = new PlaceholderFragment();
            Bundle args = new Bundle();
            args.putInt(ARG_LAYOUT, layout);
            fragment.setArguments(args);
            return fragment;
        }

        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                                 Bundle savedInstanceState) {
            View rootView = inflater.inflate(getArguments().getInt(ARG_LAYOUT), container, false);
            return rootView;
        }
    }

    /**
     * A {@link FragmentPagerAdapter} that returns a fragment corresponding to
     * one of the sections/tabs/pages.
     */
    public class SectionsPagerAdapter extends FragmentPagerAdapter {
        private final List<TabDetails> tabs = new ArrayList<>();

        public SectionsPagerAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            return tabs.get(position).getFragment();
        }

        @Override
        public int getCount() {
            return tabs.size();
        }

        private void addFragment(TabDetails tab) {
            tabs.add(tab);
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return tabs.get(position).getTabName();
        }
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

package com.androiddeft.tablayout;

import android.os.Bundle;

import android.support.design.widget.TabLayout;

import android.support.v4.app.Fragment;

import android.support.v4.app.FragmentManager;

import android.support.v4.app.FragmentPagerAdapter;

import android.support.v4.view.ViewPager;

import android.support.v7.app.AppCompatActivity;

import android.support.v7.widget.Toolbar;

import android.view.LayoutInflater;

import android.view.MenuItem;

import android.view.View;

import android.view.ViewGroup;

import java.util.ArrayList;

import java.util.List;

public class MainActivity extends AppCompatActivity {

/**

* The {@link android.support.v4.view.PagerAdapter} that will provide

* fragments for each of the sections. We use a

* {@link FragmentPagerAdapter} derivative, which will keep every

* loaded fragment in memory. If this becomes too memory intensive, it

* may be best to switch to a

* {@link android.support.v4.app.FragmentStatePagerAdapter}.

private SectionsPagerAdapter mSectionsPagerAdapter;

/**

* The {@link ViewPager} that will host the section contents.

private ViewPager mViewPager;

private TabLayout mTabLayout;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

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

setSupportActionBar(toolbar);

getSupportActionBar().setDisplayHomeAsUpEnabled(true);

mTabLayout = (TabLayout) findViewById(R.id.tabs);

// Create the adapter that will return a fragment for each of the three

// primary sections of the activity.

mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager());

// Set up the ViewPager with the sections adapter.

mViewPager = (ViewPager) findViewById(R.id.container);

populateViewPager();

}

@Override

public boolean onOptionsItemSelected(MenuItem item) {

switch (item.getItemId()) {

case android.R.id.home:

onBackPressed();

return true;

default:

return super.onOptionsItemSelected(item);

}

/**

* Creates the fragments and sets it to ViewPager

private void populateViewPager() {

TabDetails tab;

tab = new TabDetails("Dialer", PlaceholderFragment.newInstance(R.layout.fragment_dialer));

mSectionsPagerAdapter.addFragment(tab);

tab = new TabDetails("Contacts", PlaceholderFragment.newInstance(R.layout.fragment_contacts));

mSectionsPagerAdapter.addFragment(tab);

tab = new TabDetails("Messages", PlaceholderFragment.newInstance(R.layout.fragment_messages));

mSectionsPagerAdapter.addFragment(tab);

mViewPager.setAdapter(mSectionsPagerAdapter);

mTabLayout.setupWithViewPager(mViewPager);

}

/**

* A placeholder fragment containing a simple view.

public static class PlaceholderFragment extends Fragment {

/**

* The fragment argument representing the section number for this

* fragment.

private static final String ARG_LAYOUT = "layout";

public PlaceholderFragment() {

}

/**

* Returns a new instance of this fragment for the given layout.

public static PlaceholderFragment newInstance(int layout) {

PlaceholderFragment fragment = new PlaceholderFragment();

Bundle args = new Bundle();

args.putInt(ARG_LAYOUT, layout);

fragment.setArguments(args);

return fragment;

}

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup container,

Bundle savedInstanceState) {

View rootView = inflater.inflate(getArguments().getInt(ARG_LAYOUT), container, false);

return rootView;

}

/**

* A {@link FragmentPagerAdapter} that returns a fragment corresponding to

* one of the sections/tabs/pages.

public class SectionsPagerAdapter extends FragmentPagerAdapter {

private final List<TabDetails> tabs = new ArrayList<>();

public SectionsPagerAdapter(FragmentManager fm) {

super(fm);

}

@Override

public Fragment getItem(int position) {

return tabs.get(position).getFragment();

}

@Override

public int getCount() {

return tabs.size();

}

private void addFragment(TabDetails tab) {

tabs.add(tab);

}

@Override

public CharSequence getPageTitle(int position) {

return tabs.get(position).getTabName();

}

6. Update activity_main.xml as shown below:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="com.androiddeft.tablayout.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="@dimen/appbar_padding_top"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:layout_weight="1"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/AppTheme.PopupOverlay"
            app:title="@string/app_name">

        </android.support.v7.widget.Toolbar>

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabGravity="fill"
            app:tabMode="fixed">


        </android.support.design.widget.TabLayout>
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />


</android.support.design.widget.CoordinatorLayout>

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

<android.support.design.widget.CoordinatorLayout 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:id="@+id/main_content"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:fitsSystemWindows="true"

tools:context="com.androiddeft.tablayout.MainActivity">

<android.support.design.widget.AppBarLayout

android:id="@+id/appbar"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:paddingTop="@dimen/appbar_padding_top"

android:theme="@style/AppTheme.AppBarOverlay">

<android.support.v7.widget.Toolbar

android:id="@+id/toolbar"

android:layout_width="match_parent"

android:layout_height="?attr/actionBarSize"

android:layout_weight="1"

android:background="?attr/colorPrimary"

app:layout_scrollFlags="scroll|enterAlways"

app:popupTheme="@style/AppTheme.PopupOverlay"

app:title="@string/app_name">

</android.support.v7.widget.Toolbar>

<android.support.design.widget.TabLayout

android:id="@+id/tabs"

android:layout_width="match_parent"

android:layout_height="wrap_content"

app:tabGravity="fill"

app:tabMode="fixed">

</android.support.design.widget.TabLayout>

</android.support.design.widget.AppBarLayout>

<android.support.v4.view.ViewPager

android:id="@+id/container"

android:layout_width="match_parent"

android:layout_height="match_parent"

app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</android.support.design.widget.CoordinatorLayout>

Now run the application, you should be able to see the app as shown below:

Implementing Scrollable Tabs

In order to demonstrate scrollable tabs, we will dynamically add 10 tabs. To do so, follow the below steps:

1. Add a layout file which can be reused for all the 10 tabs:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/constraintLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    tools:context="com.androiddeft.tablayout.MainActivity$PlaceholderFragment">


    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:textSize="30sp" />
</LinearLayout>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:id="@+id/constraintLayout"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:gravity="center"

android:orientation="vertical"

tools:context="com.androiddeft.tablayout.MainActivity$PlaceholderFragment">

<TextView

android:id="@+id/textView"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:gravity="center"

android:textSize="30sp" />

</LinearLayout>

2. Do the below changes in MainActivty:

package com.androiddeft.tablayout;

import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.LayoutInflater;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    /**
     * The {@link android.support.v4.view.PagerAdapter} that will provide
     * fragments for each of the sections. We use a
     * {@link FragmentPagerAdapter} derivative, which will keep every
     * loaded fragment in memory. If this becomes too memory intensive, it
     * may be best to switch to a
     * {@link android.support.v4.app.FragmentStatePagerAdapter}.
     */
    private SectionsPagerAdapter mSectionsPagerAdapter;

    /**
     * The {@link ViewPager} that will host the section contents.
     */
    private ViewPager mViewPager;
    private TabLayout mTabLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

        mTabLayout = (TabLayout) findViewById(R.id.tabs);

        // Create the adapter that will return a fragment for each of the three
        // primary sections of the activity.
        mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager());

        // Set up the ViewPager with the sections adapter.
        mViewPager = (ViewPager) findViewById(R.id.container);
        populateViewPager();
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case android.R.id.home:
                onBackPressed();
                return true;
            default:
                return super.onOptionsItemSelected(item);

        }
    }

    private void populateViewPager() {
        TabDetails tab;

        for (int i = 1; i <= 10; i++) {
            tab = new TabDetails("Tab " + i, PlaceholderFragment.newInstance(R.layout.fragment_counter, i));
            mSectionsPagerAdapter.addFragment(tab);
        }
        mViewPager.setAdapter(mSectionsPagerAdapter);
		
		//Make tabs scrollable
        mTabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
        mTabLayout.setupWithViewPager(mViewPager);
    }


    /**
     * A placeholder fragment containing a simple view.
     */
    public static class PlaceholderFragment extends Fragment {
        /**
         * The fragment argument representing the section number for this
         * fragment.
         */
        private static final String ARG_LAYOUT = "layout";
        private static final String ARG_COUNTER = "counter";

        public PlaceholderFragment() {
        }

        /**
         * Returns a new instance of this fragment for the given section
         * number.
         */
        public static PlaceholderFragment newInstance(int layout, Integer counter) {
            PlaceholderFragment fragment = new PlaceholderFragment();
            Bundle args = new Bundle();
            args.putInt(ARG_LAYOUT, layout);
            args.putInt(ARG_COUNTER, counter);
            fragment.setArguments(args);
            return fragment;
        }

        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                                 Bundle savedInstanceState) {
            View rootView = inflater.inflate(getArguments().getInt(ARG_LAYOUT), container, false);
            Integer counter = getArguments().getInt(ARG_COUNTER);
            if (counter != 0) {
                TextView textView = (TextView) rootView.findViewById(R.id.textView);
                textView.setText(getString(R.string.tab_format, counter));

            }
            return rootView;
        }
    }

    /**
     * A {@link FragmentPagerAdapter} that returns a fragment corresponding to
     * one of the sections/tabs/pages.
     */
    public class SectionsPagerAdapter extends FragmentPagerAdapter {
        private final List<TabDetails> tabs = new ArrayList<>();

        public SectionsPagerAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            return tabs.get(position).getFragment();
        }

        @Override
        public int getCount() {
            return tabs.size();
        }

        private void addFragment(TabDetails tab) {
            tabs.add(tab);
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return tabs.get(position).getTabName();
        }
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

package com.androiddeft.tablayout;

import android.os.Bundle;

import android.support.design.widget.TabLayout;

import android.support.v4.app.Fragment;

import android.support.v4.app.FragmentManager;

import android.support.v4.app.FragmentPagerAdapter;

import android.support.v4.view.ViewPager;

import android.support.v7.app.AppCompatActivity;

import android.support.v7.widget.Toolbar;

import android.view.LayoutInflater;

import android.view.MenuItem;

import android.view.View;

import android.view.ViewGroup;

import android.widget.TextView;

import java.util.ArrayList;

import java.util.List;

public class MainActivity extends AppCompatActivity {

/**

* The {@link android.support.v4.view.PagerAdapter} that will provide

* fragments for each of the sections. We use a

* {@link FragmentPagerAdapter} derivative, which will keep every

* loaded fragment in memory. If this becomes too memory intensive, it

* may be best to switch to a

* {@link android.support.v4.app.FragmentStatePagerAdapter}.

private SectionsPagerAdapter mSectionsPagerAdapter;

/**

* The {@link ViewPager} that will host the section contents.

private ViewPager mViewPager;

private TabLayout mTabLayout;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

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

setSupportActionBar(toolbar);

getSupportActionBar().setDisplayHomeAsUpEnabled(true);

mTabLayout = (TabLayout) findViewById(R.id.tabs);

// Create the adapter that will return a fragment for each of the three

// primary sections of the activity.

mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager());

// Set up the ViewPager with the sections adapter.

mViewPager = (ViewPager) findViewById(R.id.container);

populateViewPager();

}

@Override

public boolean onOptionsItemSelected(MenuItem item) {

switch (item.getItemId()) {

case android.R.id.home:

onBackPressed();

return true;

default:

return super.onOptionsItemSelected(item);

}

private void populateViewPager() {

TabDetails tab;

for (int i = 1; i <= 10; i++) {

tab = new TabDetails("Tab " + i, PlaceholderFragment.newInstance(R.layout.fragment_counter, i));

mSectionsPagerAdapter.addFragment(tab);

}

mViewPager.setAdapter(mSectionsPagerAdapter);

//Make tabs scrollable

mTabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);

mTabLayout.setupWithViewPager(mViewPager);

}

/**

* A placeholder fragment containing a simple view.

public static class PlaceholderFragment extends Fragment {

/**

* The fragment argument representing the section number for this

* fragment.

private static final String ARG_LAYOUT = "layout";

private static final String ARG_COUNTER = "counter";

public PlaceholderFragment() {

}

/**

* Returns a new instance of this fragment for the given section

* number.

public static PlaceholderFragment newInstance(int layout, Integer counter) {

PlaceholderFragment fragment = new PlaceholderFragment();

Bundle args = new Bundle();

args.putInt(ARG_LAYOUT, layout);

args.putInt(ARG_COUNTER, counter);

fragment.setArguments(args);

return fragment;

}

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup container,

Bundle savedInstanceState) {

View rootView = inflater.inflate(getArguments().getInt(ARG_LAYOUT), container, false);

Integer counter = getArguments().getInt(ARG_COUNTER);

if (counter != 0) {

TextView textView = (TextView) rootView.findViewById(R.id.textView);

textView.setText(getString(R.string.tab_format, counter));

}

return rootView;

}

/**

* A {@link FragmentPagerAdapter} that returns a fragment corresponding to

* one of the sections/tabs/pages.

public class SectionsPagerAdapter extends FragmentPagerAdapter {

private final List<TabDetails> tabs = new ArrayList<>();

public SectionsPagerAdapter(FragmentManager fm) {

super(fm);

}

@Override

public Fragment getItem(int position) {

return tabs.get(position).getFragment();

}

@Override

public int getCount() {

return tabs.size();

}

private void addFragment(TabDetails tab) {

tabs.add(tab);

}

@Override

public CharSequence getPageTitle(int position) {

return tabs.get(position).getTabName();

}

3. Now run the application and you should see the app as shown below:

Tabs with Icons and Text

1. Download mipmap.zip and extract the downloaded files to res folder in your project. This contains necessary icons for displaying in the tabs.

2. Do the highlighted changes in MainActivty

package com.androiddeft.tablayout;

import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.LayoutInflater;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;


import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    /**
     * The {@link android.support.v4.view.PagerAdapter} that will provide
     * fragments for each of the sections. We use a
     * {@link FragmentPagerAdapter} derivative, which will keep every
     * loaded fragment in memory. If this becomes too memory intensive, it
     * may be best to switch to a
     * {@link android.support.v4.app.FragmentStatePagerAdapter}.
     */
    private SectionsPagerAdapter mSectionsPagerAdapter;

    /**
     * The {@link ViewPager} that will host the section contents.
     */
    private ViewPager mViewPager;
    private TabLayout mTabLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);


        mTabLayout = (TabLayout) findViewById(R.id.tabs);

        // Create the adapter that will return a fragment for each of the three
        // primary sections of the activity.
        mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager());

        // Set up the ViewPager with the sections adapter.
        mViewPager = (ViewPager) findViewById(R.id.container);
        populateViewPager();


    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case android.R.id.home:
                onBackPressed();
                return true;
            default:
                return super.onOptionsItemSelected(item);

        }
    }

    /**
     * Creates the fragments and sets it to ViewPager
     */
    private void populateViewPager() {
        TabDetails tab;
		tab = new TabDetails("Dialer", PlaceholderFragment.newInstance(R.layout.fragment_dialer, 0));
		mSectionsPagerAdapter.addFragment(tab);
		tab = new TabDetails("Contacts", PlaceholderFragment.newInstance(R.layout.fragment_contacts, 0));
		mSectionsPagerAdapter.addFragment(tab);
		tab = new TabDetails("Messages", PlaceholderFragment.newInstance(R.layout.fragment_messages, 0));
		mSectionsPagerAdapter.addFragment(tab);

		mViewPager.setAdapter(mSectionsPagerAdapter);
		mTabLayout.setupWithViewPager(mViewPager);

		mTabLayout.getTabAt(0).setIcon(R.mipmap.ic_phone_white);
		mTabLayout.getTabAt(1).setIcon(R.mipmap.ic_contacts_white);
		mTabLayout.getTabAt(2).setIcon(R.mipmap.ic_message_white);

    }


    /**
     * A placeholder fragment containing a simple view.
     */
    public static class PlaceholderFragment extends Fragment {
        /**
         * The fragment argument representing the section number for this
         * fragment.
         */
        private static final String ARG_LAYOUT = "layout";

        public PlaceholderFragment() {
        }

        /**
         * Returns a new instance of this fragment for the given layout.
         */
        public static PlaceholderFragment newInstance(int layout) {
            PlaceholderFragment fragment = new PlaceholderFragment();
            Bundle args = new Bundle();
            args.putInt(ARG_LAYOUT, layout);
            fragment.setArguments(args);
            return fragment;
        }

        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                                 Bundle savedInstanceState) {
            View rootView = inflater.inflate(getArguments().getInt(ARG_LAYOUT), container, false);
            return rootView;
        }
    }

    /**
     * A {@link FragmentPagerAdapter} that returns a fragment corresponding to
     * one of the sections/tabs/pages.
     */
    public class SectionsPagerAdapter extends FragmentPagerAdapter {
        private final List<TabDetails> tabs = new ArrayList<>();

        public SectionsPagerAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            return tabs.get(position).getFragment();
        }

        @Override
        public int getCount() {
            return tabs.size();
        }

        private void addFragment(TabDetails tab) {
            tabs.add(tab);
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return tabs.get(position).getTabName();
        }
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

package com.androiddeft.tablayout;

import android.os.Bundle;

import android.support.design.widget.TabLayout;

import android.support.v4.app.Fragment;

import android.support.v4.app.FragmentManager;

import android.support.v4.app.FragmentPagerAdapter;

import android.support.v4.view.ViewPager;

import android.support.v7.app.AppCompatActivity;

import android.support.v7.widget.Toolbar;

import android.view.LayoutInflater;

import android.view.MenuItem;

import android.view.View;

import android.view.ViewGroup;

import java.util.ArrayList;

import java.util.List;

public class MainActivity extends AppCompatActivity {

/**

* The {@link android.support.v4.view.PagerAdapter} that will provide

* fragments for each of the sections. We use a

* {@link FragmentPagerAdapter} derivative, which will keep every

* loaded fragment in memory. If this becomes too memory intensive, it

* may be best to switch to a

* {@link android.support.v4.app.FragmentStatePagerAdapter}.

private SectionsPagerAdapter mSectionsPagerAdapter;

/**

* The {@link ViewPager} that will host the section contents.

private ViewPager mViewPager;

private TabLayout mTabLayout;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

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

setSupportActionBar(toolbar);

getSupportActionBar().setDisplayHomeAsUpEnabled(true);

mTabLayout = (TabLayout) findViewById(R.id.tabs);

// Create the adapter that will return a fragment for each of the three

// primary sections of the activity.

mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager());

// Set up the ViewPager with the sections adapter.

mViewPager = (ViewPager) findViewById(R.id.container);

populateViewPager();

}

@Override

public boolean onOptionsItemSelected(MenuItem item) {

switch (item.getItemId()) {

case android.R.id.home:

onBackPressed();

return true;

default:

return super.onOptionsItemSelected(item);

}

/**

* Creates the fragments and sets it to ViewPager

private void populateViewPager() {

TabDetails tab;

tab = new TabDetails("Dialer", PlaceholderFragment.newInstance(R.layout.fragment_dialer, 0));

mSectionsPagerAdapter.addFragment(tab);

tab = new TabDetails("Contacts", PlaceholderFragment.newInstance(R.layout.fragment_contacts, 0));

mSectionsPagerAdapter.addFragment(tab);

tab = new TabDetails("Messages", PlaceholderFragment.newInstance(R.layout.fragment_messages, 0));

mSectionsPagerAdapter.addFragment(tab);

mViewPager.setAdapter(mSectionsPagerAdapter);

mTabLayout.setupWithViewPager(mViewPager);

mTabLayout.getTabAt(0).setIcon(R.mipmap.ic_phone_white);

mTabLayout.getTabAt(1).setIcon(R.mipmap.ic_contacts_white);

mTabLayout.getTabAt(2).setIcon(R.mipmap.ic_message_white);

}

/**

* A placeholder fragment containing a simple view.

public static class PlaceholderFragment extends Fragment {

/**

* The fragment argument representing the section number for this

* fragment.

private static final String ARG_LAYOUT = "layout";

public PlaceholderFragment() {

}

/**

* Returns a new instance of this fragment for the given layout.

public static PlaceholderFragment newInstance(int layout) {

PlaceholderFragment fragment = new PlaceholderFragment();

Bundle args = new Bundle();

args.putInt(ARG_LAYOUT, layout);

fragment.setArguments(args);

return fragment;

}

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup container,

Bundle savedInstanceState) {

View rootView = inflater.inflate(getArguments().getInt(ARG_LAYOUT), container, false);

return rootView;

}

/**

* A {@link FragmentPagerAdapter} that returns a fragment corresponding to

* one of the sections/tabs/pages.

public class SectionsPagerAdapter extends FragmentPagerAdapter {

private final List<TabDetails> tabs = new ArrayList<>();

public SectionsPagerAdapter(FragmentManager fm) {

super(fm);

}

@Override

public Fragment getItem(int position) {

return tabs.get(position).getFragment();

}

@Override

public int getCount() {

return tabs.size();

}

private void addFragment(TabDetails tab) {

tabs.add(tab);

}

@Override

public CharSequence getPageTitle(int position) {

return tabs.get(position).getTabName();

}

3. Now run the application:

Tabs with Only Icons

To have only icons as the tab title, you need to pass tabName as null while instantiating TabDetails in populateViewPager() method:

package com.androiddeft.tablayout;

import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.LayoutInflater;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;


import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    /**
     * The {@link android.support.v4.view.PagerAdapter} that will provide
     * fragments for each of the sections. We use a
     * {@link FragmentPagerAdapter} derivative, which will keep every
     * loaded fragment in memory. If this becomes too memory intensive, it
     * may be best to switch to a
     * {@link android.support.v4.app.FragmentStatePagerAdapter}.
     */
    private SectionsPagerAdapter mSectionsPagerAdapter;

    /**
     * The {@link ViewPager} that will host the section contents.
     */
    private ViewPager mViewPager;
    private TabLayout mTabLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);


        mTabLayout = (TabLayout) findViewById(R.id.tabs);

        // Create the adapter that will return a fragment for each of the three
        // primary sections of the activity.
        mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager());

        // Set up the ViewPager with the sections adapter.
        mViewPager = (ViewPager) findViewById(R.id.container);
        populateViewPager();


    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case android.R.id.home:
                onBackPressed();
                return true;
            default:
                return super.onOptionsItemSelected(item);

        }
    }

    /**
     * Creates the fragments and sets it to ViewPager
     */
    private void populateViewPager() {
        TabDetails tab;
		tab = new TabDetails(null, PlaceholderFragment.newInstance(R.layout.fragment_dialer, 0));
		mSectionsPagerAdapter.addFragment(tab);
		tab = new TabDetails(null, PlaceholderFragment.newInstance(R.layout.fragment_contacts, 0));
		mSectionsPagerAdapter.addFragment(tab);
		tab = new TabDetails(null, PlaceholderFragment.newInstance(R.layout.fragment_messages, 0));
		mSectionsPagerAdapter.addFragment(tab);

		mViewPager.setAdapter(mSectionsPagerAdapter);
		mTabLayout.setupWithViewPager(mViewPager);

		mTabLayout.getTabAt(0).setIcon(R.mipmap.ic_phone_white);
		mTabLayout.getTabAt(1).setIcon(R.mipmap.ic_contacts_white);
		mTabLayout.getTabAt(2).setIcon(R.mipmap.ic_message_white);


    }


    /**
     * A placeholder fragment containing a simple view.
     */
    public static class PlaceholderFragment extends Fragment {
        /**
         * The fragment argument representing the section number for this
         * fragment.
         */
        private static final String ARG_LAYOUT = "layout";

        public PlaceholderFragment() {
        }

        /**
         * Returns a new instance of this fragment for the given layout.
         */
        public static PlaceholderFragment newInstance(int layout) {
            PlaceholderFragment fragment = new PlaceholderFragment();
            Bundle args = new Bundle();
            args.putInt(ARG_LAYOUT, layout);
            fragment.setArguments(args);
            return fragment;
        }

        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                                 Bundle savedInstanceState) {
            View rootView = inflater.inflate(getArguments().getInt(ARG_LAYOUT), container, false);
            return rootView;
        }
    }

    /**
     * A {@link FragmentPagerAdapter} that returns a fragment corresponding to
     * one of the sections/tabs/pages.
     */
    public class SectionsPagerAdapter extends FragmentPagerAdapter {
        private final List<TabDetails> tabs = new ArrayList<>();

        public SectionsPagerAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            return tabs.get(position).getFragment();
        }

        @Override
        public int getCount() {
            return tabs.size();
        }

        private void addFragment(TabDetails tab) {
            tabs.add(tab);
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return tabs.get(position).getTabName();
        }
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

package com.androiddeft.tablayout;

import android.os.Bundle;

import android.support.design.widget.TabLayout;

import android.support.v4.app.Fragment;

import android.support.v4.app.FragmentManager;

import android.support.v4.app.FragmentPagerAdapter;

import android.support.v4.view.ViewPager;

import android.support.v7.app.AppCompatActivity;

import android.support.v7.widget.Toolbar;

import android.view.LayoutInflater;

import android.view.MenuItem;

import android.view.View;

import android.view.ViewGroup;

import java.util.ArrayList;

import java.util.List;

public class MainActivity extends AppCompatActivity {

/**

* The {@link android.support.v4.view.PagerAdapter} that will provide

* fragments for each of the sections. We use a

* {@link FragmentPagerAdapter} derivative, which will keep every

* loaded fragment in memory. If this becomes too memory intensive, it

* may be best to switch to a

* {@link android.support.v4.app.FragmentStatePagerAdapter}.

private SectionsPagerAdapter mSectionsPagerAdapter;

/**

* The {@link ViewPager} that will host the section contents.

private ViewPager mViewPager;

private TabLayout mTabLayout;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

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

setSupportActionBar(toolbar);

getSupportActionBar().setDisplayHomeAsUpEnabled(true);

mTabLayout = (TabLayout) findViewById(R.id.tabs);

// Create the adapter that will return a fragment for each of the three

// primary sections of the activity.

mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager());

// Set up the ViewPager with the sections adapter.

mViewPager = (ViewPager) findViewById(R.id.container);

populateViewPager();

}

@Override

public boolean onOptionsItemSelected(MenuItem item) {

switch (item.getItemId()) {

case android.R.id.home:

onBackPressed();

return true;

default:

return super.onOptionsItemSelected(item);

}

/**

* Creates the fragments and sets it to ViewPager

private void populateViewPager() {

TabDetails tab;

tab = new TabDetails(null, PlaceholderFragment.newInstance(R.layout.fragment_dialer, 0));

mSectionsPagerAdapter.addFragment(tab);

tab = new TabDetails(null, PlaceholderFragment.newInstance(R.layout.fragment_contacts, 0));

mSectionsPagerAdapter.addFragment(tab);

tab = new TabDetails(null, PlaceholderFragment.newInstance(R.layout.fragment_messages, 0));

mSectionsPagerAdapter.addFragment(tab);

mViewPager.setAdapter(mSectionsPagerAdapter);

mTabLayout.setupWithViewPager(mViewPager);

mTabLayout.getTabAt(0).setIcon(R.mipmap.ic_phone_white);

mTabLayout.getTabAt(1).setIcon(R.mipmap.ic_contacts_white);

mTabLayout.getTabAt(2).setIcon(R.mipmap.ic_message_white);

}

/**

* A placeholder fragment containing a simple view.

public static class PlaceholderFragment extends Fragment {

/**

* The fragment argument representing the section number for this

* fragment.

private static final String ARG_LAYOUT = "layout";

public PlaceholderFragment() {

}

/**

* Returns a new instance of this fragment for the given layout.

public static PlaceholderFragment newInstance(int layout) {

PlaceholderFragment fragment = new PlaceholderFragment();

Bundle args = new Bundle();

args.putInt(ARG_LAYOUT, layout);

fragment.setArguments(args);

return fragment;

}

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup container,

Bundle savedInstanceState) {

View rootView = inflater.inflate(getArguments().getInt(ARG_LAYOUT), container, false);

return rootView;

}

/**

* A {@link FragmentPagerAdapter} that returns a fragment corresponding to

* one of the sections/tabs/pages.

public class SectionsPagerAdapter extends FragmentPagerAdapter {

private final List<TabDetails> tabs = new ArrayList<>();

public SectionsPagerAdapter(FragmentManager fm) {

super(fm);

}

@Override

public Fragment getItem(int position) {

return tabs.get(position).getFragment();

}

@Override

public int getCount() {

return tabs.size();

}

private void addFragment(TabDetails tab) {

tabs.add(tab);

}

@Override

public CharSequence getPageTitle(int position) {

return tabs.get(position).getTabName();

}

Tabs with Customized Colors

You can customize the tabs 2 ways:

statically through layout XML.
dynamically in MainActivity.

Before customizing add necessary colors to colors.xml file:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
    <color name="darkGrey">#333</color>
    <color name="yellow">#ffff00</color>
</resources>

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

</resources>

Customizing Tabs through layout XML

You add the attributes to TabLayout widget as highlighted below to change the Tab colors:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="com.androiddeft.tablayout.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="@dimen/appbar_padding_top"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:layout_weight="1"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/AppTheme.PopupOverlay"
            app:title="@string/app_name">

        </android.support.v7.widget.Toolbar>

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabGravity="fill"
            app:tabTextColor="@android:color/holo_blue_bright"
            app:tabBackground="@color/darkGrey"
            app:tabSelectedTextColor="@color/yellow"
            app:tabIndicatorColor="@android:color/white"
            app:tabMode="fixed">


        </android.support.design.widget.TabLayout>
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />


</android.support.design.widget.CoordinatorLayout>

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

<android.support.design.widget.CoordinatorLayout 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:id="@+id/main_content"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:fitsSystemWindows="true"

tools:context="com.androiddeft.tablayout.MainActivity">

<android.support.design.widget.AppBarLayout

android:id="@+id/appbar"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:paddingTop="@dimen/appbar_padding_top"

android:theme="@style/AppTheme.AppBarOverlay">

<android.support.v7.widget.Toolbar

android:id="@+id/toolbar"

android:layout_width="match_parent"

android:layout_height="?attr/actionBarSize"

android:layout_weight="1"

android:background="?attr/colorPrimary"

app:layout_scrollFlags="scroll|enterAlways"

app:popupTheme="@style/AppTheme.PopupOverlay"

app:title="@string/app_name">

</android.support.v7.widget.Toolbar>

<android.support.design.widget.TabLayout

android:id="@+id/tabs"

android:layout_width="match_parent"

android:layout_height="wrap_content"

app:tabGravity="fill"

app:tabTextColor="@android:color/holo_blue_bright"

app:tabBackground="@color/darkGrey"

app:tabSelectedTextColor="@color/yellow"

app:tabIndicatorColor="@android:color/white"

app:tabMode="fixed">

</android.support.design.widget.TabLayout>

</android.support.design.widget.AppBarLayout>

<android.support.v4.view.ViewPager

android:id="@+id/container"

android:layout_width="match_parent"

android:layout_height="match_parent"

app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</android.support.design.widget.CoordinatorLayout>

Customizing Tab colors dynamically

Add the following lines to populateViewPager() method to change Tab colors:

//Set Tab text color and selected tab color
mTabLayout.setTabTextColors(getResources().getColor(android.R.color.holo_blue_light),getResources().getColor(R.color.yellow));
//Set selected Tab Underline color
mTabLayout.setSelectedTabIndicatorColor(getResources().getColor(android.R.color.white));
//Set Tab background color
mTabLayout.setBackgroundColor(getResources().getColor(R.color.darkGrey));

//Set Tab text color and selected tab color

mTabLayout.setTabTextColors(getResources().getColor(android.R.color.holo_blue_light),getResources().getColor(R.color.yellow));

//Set selected Tab Underline color

mTabLayout.setSelectedTabIndicatorColor(getResources().getColor(android.R.color.white));

//Set Tab background color

mTabLayout.setBackgroundColor(getResources().getColor(R.color.darkGrey));

Now run the application:

Source code and APK file

You can download the Source code and APK files from the below links. I have combined all the features into one app.

Download Source Code Download APK

If you have any doubts, then we can discuss them in the comments section. If you have liked this tutorial, please do follow us on Twitter and Facebook.