Android Tablayout Example With Viewpager

1) MainActivity.XML

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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.design.widget.TabLayout
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:id="@+id/tablayout_id"
        android:background="@color/colorPrimary"
        app:tabMode="fixed"
        app:tabGravity="fill"/>

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

</RelativeLayout>

2) MainActivity.java

public class MainActivity extends AppCompatActivity {

    TabLayout tableLayout;
    ViewPager viewPager;

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

        viewPager = (ViewPager) findViewById(R.id.viewpager_id);
        tableLayout = (TabLayout) findViewById(R.id.tablayout_id);

        ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());

        adapter.addFragment(new OneFragment(), "One"); // Add Fragments as per your Need
        adapter.addFragment(new TwoFragment(), "Two");
        adapter.addFragment(new ThreeFragment(), "Three");

        viewPager.setAdapter(adapter);

        tableLayout.setupWithViewPager(viewPager);
    }
}

3) ViewPagerAdapter.java

On Above Video I Used FragmentPagerAdapter for ViewPagerAdapter  
but i strongly recommended you to used FragmentStatePagerAdapter it will help to load your fragment batter tahn FragmentPagerAdapter 

public class ViewPagerAdapter  extends FragmentStatePagerAdapter{

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

    private final List<String> fragmentTitleList = new ArrayList<>();

    public ViewPagerAdapter(FragmentManager fm) {

        super(fm);

    }

    @Override

    public Fragment getItem(int i) {

        return fragmentList.get(i);

    }

    @Override

    public int getCount() {

        return fragmentTitleList.size();

    }

    @Nullable

    @Override

    public CharSequence getPageTitle(int position) {

        return fragmentTitleList.get(position);

    }

    public void addFragment(Fragment fragment, String title){

        fragmentList.add(fragment);

        fragmentTitleList.add(title);

    }

}

4) Now Add Your Fragment As Per Your Need

i) OneFragment

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

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

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

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:background="@drawable/btn_bg1"

    android:layout_marginLeft="10dp"

    android:layout_marginBottom="10dp"

    android:layout_marginTop="10dp"

    android:layout_marginRight="10dp"

    tools:context=".OneFragment">

    <!-- TODO: Update blank fragment layout -->

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="One"

        android:layout_gravity="center"

        android:textColor="#000000"

        android:textStyle="bold"

        android:textSize="50sp"/>

</FrameLayout>

i) TwoFragment

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

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

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

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:background="@drawable/btn_bg1"

    android:layout_marginLeft="10dp"

    android:layout_marginBottom="10dp"

    android:layout_marginTop="10dp"

    android:layout_marginRight="10dp"

    tools:context=".TwoFragment">

    <!-- TODO: Update blank fragment layout -->

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="One"

        android:layout_gravity="center"

        android:textColor="#000000"

        android:textStyle="bold"

        android:textSize="50sp"/>

</FrameLayout>

iii) ThreeFragment

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

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

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

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:background="@drawable/btn_bg1"

    android:layout_marginLeft="10dp"

    android:layout_marginBottom="10dp"

    android:layout_marginTop="10dp"

    android:layout_marginRight="10dp"

    tools:context=".ThreeFragment">

    <!-- TODO: Update blank fragment layout -->

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="One"

        android:layout_gravity="center"

        android:textColor="#000000"

        android:textStyle="bold"

        android:textSize="50sp"/>

</FrameLayout>