Android Tab Layout

Android TabLayout is used to display tabs on a single screen. It provides a horizontal layout to display tabs. In this article we are going to implement tabs in an application.
1. Create a new android project with a basic activity. (I named the activity as TabActivity)
2. Open build.gradle(app) and add the following dependency to use TabLayout.

compile 'com.android.support:design:25.1.0'

3. Open acivity_tab.xml and add a TabLayout and a ViewPager. ViewPager allows the user to swipe left or right on a screen.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    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:orientation="vertical">

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

    <android.support.v4.view.ViewPager
        android:layout_width="match_parent"
        android:layout_height="0px"
        android:layout_weight="1"
        android:id="@+id/pager"></android.support.v4.view.ViewPager>
</LinearLayout>

4. In this example, we are gonna create one fragment for all the tabs. We could make different fragments for different tabs according to the application requirement.
Create a new layout tab_fragment.xml in layout folder. Add a TextView in it. 

<?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"
    >
<TextView
    android:id="@+id/tv_tab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="30sp"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
   />
</RelativeLayout>

5.Create a new  class TabFragment.java which inherits Fragment class. Add the following code in it.

package com.gunjan.andriodcodesnippets;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
/**
 * Created by gunjan on 10/25/2017.
 */
public class TabFragment extends Fragment {
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

        View view = inflater.inflate(R.layout.tab_fragment, container, false);
        TextView tv_tab=(TextView)view.findViewById(R.id.tv_tab);
        //Set text to TextView to show which tab is currently displayed
        tv_tab.setText(getArguments().getString("text"));
        return view;
    }
}

6. Create a new class TabsAdapter.java. This is the adapter class which inherits FragmentPagerAdapter for using fragments with ViewPager.

package com.gunjan.andriodcodesnippets;
/**
 * Created by gunjan on 10/25/2017.
 */
import android.content.Context;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
public class TabsAdapter extends FragmentPagerAdapter {

    //String array holding tabs name
    private String[] tabs={"Tab1","Tab2","Tab3"};
    private Context context;

    public TabsAdapter(FragmentManager fm, Context context){
        super(fm);
        this.context=context;
    }
    @Override
    public Fragment getItem(int position) {
        Bundle bundle=new Bundle();
        //Open fragment according to item position
        switch (position){
            case 0:
                TabFragment tab1=new TabFragment();
                //Set arguments to fragment and retreive the value in fragment class
                bundle.putString("text","Tab 1");
                tab1.setArguments(bundle);
                return tab1;
            case 1:
                TabFragment tab2=new TabFragment();
                bundle.putString("text","Tab 2");
                tab2.setArguments(bundle);
                return tab2;
            case 2:
                TabFragment tab3=new TabFragment();
                bundle.putString("text","Tab 3");
                tab3.setArguments(bundle);
                return tab3;
        }
        return null;
    }

    @Override
    public CharSequence getPageTitle(int position) {
        // Generate title based on item position
        return tabs[position];
    }
    //Return total number of tabs
    @Override
    public int getCount() {
        return 3;
    }
    @Override
    public long getItemId(int position) {
        return super.getItemId(position);
    }
}

7. Open TabActivity.java and add the following code.

package com.gunjan.andriodcodesnippets;
import android.support.design.widget.TabLayout;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
public class TabActivity extends AppCompatActivity {

    private ViewPager mviewPager;
    private TabsAdapter mTabsAdapter;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tab);

        mviewPager=(ViewPager)findViewById(R.id.pager);
        mTabsAdapter=new TabsAdapter(getSupportFragmentManager(),TabActivity.this);
        TabLayout tabLayout=(TabLayout)findViewById(R.id.tabs);

        //Set custom adapter to view pager
        mviewPager.setAdapter(mTabsAdapter);

        //Set pager to tab layout
        tabLayout.setupWithViewPager(mviewPager);
    }
}

8. Run the project.