Android Material Design TabLayout With Icon

TabLayout provides a horizontal layout to display tabs. The Tabs inside the TabLayout is Scroll-able and  is also used to switch between different views .The design support library simplifies the process of Creating TabLayout  widget and  adding tabs to it . In this tutorial we will see how to create tab layout with icons .

Build Gradle

Add the design support library as dependencies to the build.gradle(Module:app) file.

file : build.gradle

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:23.0.1'
    compile 'com.android.support:design:23.0.1'
}

Color

Create a resource file in the res/values folder called colors.xml. Modify it as below:

file : colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="primary">#3F51B5</color>
    <color name="primary_dark">#303F9F</color>
    <color name="accent">#ffffff</color>
    <color name="fragment_bg">#e5e5e5</color>
</resources>

Style

Modify res/values/styles.xml as below:

file : styles.xml

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/primary</item>
        <item name="colorPrimaryDark">@color/primary_dark</item>
        <item name="colorAccent">@color/accent</item>
    </style>
</resources>

XML Layout

Create a XML Layout file activity_main.xml in the res/layout . which contains Coordinate layout as parent view and isnide this add AppBarLayout and ViewPager.

• AppBarLayout : The design library provides the AppBarLayout inside this view add Toolbar and TabLayout 
• ViewPager :  The ViewPager will be used to enable horizontal paging between tabs.

file : activity_main.xml

<android.support.design.widget.CoordinatorLayout
    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.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways" />

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

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

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

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

Fragment For Each Tab

Create a Fragment for each tab in tablayout .

file : people_fragment.xml

<?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:background="@color/fragment_bg">

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="148dp"
        android:src="@drawable/ic_action_person" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/imageView1"
        android:gravity="center"
        android:text="People"
        android:textSize="30sp" />

</RelativeLayout>

Create PeopleFragment and extend this class to Fragment and inflate this fragment with above defined xml layout .

file : PeopleFragment

package com.tutorialsbuzz.tablayoutdemo.TabFragments;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import com.tutorialsbuzz.tablayoutdemo.R;

public class PeopleFragment extends Fragment {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
                return inflater.inflate(R.layout.people_fragment, container, false);
    }
}

Similarly Create Two More Fragment for remaining two Tabs 

FragmentStatePagerAdapter

• Create a ViewPagerAdapter Class and extend this class to FragmentStateViewPager .
• Override the getItem ,getCount , getPageTitle methods of FragmentStateViewPager class .
• Have a method addFragment which takes fragment object and title, inside this method we will create a list of fragment with it's title for each of the tabs .

file : ViewPagerAdapter.java

package com.tutorialsbuzz.tablayoutdemo;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
import java.util.ArrayList;
import java.util.List;

public class ViewPagerAdapter extends FragmentStatePagerAdapter {

    private final List<Fragment> mFragmentList = new ArrayList<>();
    private final List<String> mFragmentTitleList = new ArrayList<>();

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

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

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

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

    public void addFragment(Fragment fragment, String title) {
        mFragmentList.add(fragment);
        mFragmentTitleList.add(title);
    }
}

MainActivity

• Create a MainActivity class which extends Activity class 
• Override the onCreate method inside this method set the content of this activity with above defined activity_main.xml layout .
• Inside the setupViewPager method make a call to addFragment method on adapter object and then call setAdapter on ViewPager reference by passing the adapter object.
• To Setting Icons for Tabs Tablayout  , get the refrence to tabs at each position and upon which call setIcon by passing the drawable resource id .

file : MainActivity.java

package com.tutorialsbuzz.tablayoutdemo;

import android.support.design.widget.TabLayout;
import android.support.v4.view.ViewPager;
import android.support.v7.app.ActionBar;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import com.tutorialsbuzz.tablayoutdemo.TabFragments.PeopleFragment;
import com.tutorialsbuzz.tablayoutdemo.TabFragments.CallFragment;
import com.tutorialsbuzz.tablayoutdemo.TabFragments.GroupFragment;

public class MainActivity extends AppCompatActivity {

    private Toolbar toolbar;
    private TabLayout tabLayout;
    private ViewPager viewPager;

    private int[] tabIcons = {
            R.drawable.ic_action_person,
            R.drawable.ic_action_group,
            R.drawable.ic_action_call
    };

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


        toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        ActionBar actionBar = getSupportActionBar();
        actionBar.setHomeAsUpIndicator(R.drawable.ic_menu);
        actionBar.setDisplayHomeAsUpEnabled(true);


        viewPager = (ViewPager) findViewById(R.id.viewpager);
        setupViewPager(viewPager);

        tabLayout = (TabLayout) findViewById(R.id.tablayout);
        tabLayout.setupWithViewPager(viewPager);
        setupTabIcons();

    }

    private void setupViewPager(ViewPager viewPager) {
        ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
        adapter.addFragment(new PeopleFragment(), "People");
        adapter.addFragment(new GroupFragment(), "Group");
        adapter.addFragment(new CallFragment(), "Calls");
        viewPager.setAdapter(adapter);
    }

    private void setupTabIcons() {
        tabLayout.getTabAt(0).setIcon(tabIcons[0]);
        tabLayout.getTabAt(1).setIcon(tabIcons[1]);
        tabLayout.getTabAt(2).setIcon(tabIcons[2]);
    }

}

DOWNLOAD CODE