How to implement Material Design Tab Layout

Android Material Design Tab Layout without toolbar looks like the following.

Step 1 : Add the design dependency in the project

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

After adding the dependency, synchronize your project so that gradle downloads and add the dependency.

Step 2 : Layout Structure for the activity

Your activity structure should be like following.

--CoordinatorLayout
----AppBarLayout
------TabLayout
----ViewPager

Now let's understand why we need to follow this hierarchy to create the tab layout.

• CoordinatorLayout provides an additional layer of control over the touch events between child views. It is actually a super powered FrameLayout. So we will wrap all our layout inside the Coordinator layout.
• AppBar Layout is used to wrap the TabLayout inside it. It will wrap the Tabs text/heading and will always be a part of the app bar. This allows the tabs to be always visible at the top on vertical scrolling down. If we do not wrap the Tab Layout inside AppBarLayout then we will need to place and adjust its position manually when the pager will scroll vertically.
• TabLayout this layout is the one that will display the tab/pager header/text. If this layout is not added, then the tab headers will not be displayed but the tabs can be still switched by swiping left and right.
• ViewPager this layout is actual implementation of the pages/tabs that can be swiped left and right. It should contain fragment layouts that need to displayed on each tab.

So your main layout should look like the following

<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.ActionBar">

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

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

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

Points to note here is

• app:tabMode="fixed" - it is used when the number of tabs to be displayed can be shown in screen. (fits the screen and scroll is not needed to display all tabs)
• app:tabGravity="fill" - it is used to fill the parent width with the tabs. the tabs will be utilize the width of the parent and will be of same width.

Step 3 : Creating a ViewPagerAdapter to setup ViewPager

package com.ekiras.tab.adapter;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

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

/**
 * @author ekansh 
 */
public class ViewPagerAdapter extends FragmentPagerAdapter {

    private final List<Fragment> fragmentList = new ArrayList<Fragment>();
    private final List<String> titles = new ArrayList<String>();

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

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

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

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

    public void addFragment(Fragment fragment, String title){
        fragmentList.add(fragment);
        titles.add(title);
    }

}

Step 4 : Making Fragments to be displayed in ViewPager

For demo purpose we have create two fragments

• FragOne
• FragTwo

package com.ekiras.tab.fragment;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.ekiras.tab.R;

/**
 * @author ekansh 
 */
public class FragOne extends Fragment{

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

}

package com.ekiras.tab.fragment;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.ekiras.tab.R;

/**
 * @author ekansh 
 */
public class FragTwo extends Fragment{

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

}

And their layout is as follows

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:text="Fragment One"
        android:textSize="40dp"
        android:textStyle="bold"
        />

</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:text="Fragment Two"
        android:textSize="40dp"
        android:textStyle="bold"
        />

</LinearLayout>

Step 5 : Putting everything together in Activity

package com.ekiras.tab;

import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import com.ekiras.tab.adapter.ViewPagerAdapter;
import com.ekiras.tab.fragment.FragOne;
import com.ekiras.tab.fragment.FragTwo;

/**
 * @author ekansh 
 * 
 * */
public class MainActivity extends AppCompatActivity {

    private ViewPager viewPager;
    private TabLayout tabLayout;

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

        viewPager = (ViewPager) findViewById(R.id.viewpager);
        setupViewPager(viewPager);
        tabLayout = (TabLayout) findViewById(R.id.tabs);
        tabLayout.setupWithViewPager(viewPager);
    }


    public void setupViewPager(ViewPager viewPager){
        ViewPagerAdapter pagerAdapter = new ViewPagerAdapter(getSupportFragmentManager());
        pagerAdapter.addFragment(new FragOne(),"Frag One");
        pagerAdapter.addFragment(new FragTwo(),"Frag Two");
        viewPager.setAdapter(pagerAdapter);
    }




}

In the above activity we have done the following

• Created a ViewPager adapter to hold the fragments in view pager, these will be used as tabs.
• Created a Tab layout to set the view pager heading and controls.