Swap Tabs / ViewPagers in Android

" Jai Saraswati Maa" 
Hi ... Dear All ..Today I am uploading a superb example of  Swap Tabs using View Pagers.
This example you can add with your app to give a look like our Phone Dial App.
I am using Android Studio 1.5.1
Minimun SDK API 19
Target SDK API 23
Please Like us & put your valuable suggestions in comment box.
***** Add Dependency in build.gradle file 

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])

    testCompile 'junit:junit:4.12'

    compile 'com.android.support:appcompat-v7:23.3.0'

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

    compile 'com.android.support:support-v4:23.3.0'}

A. ***** Create your own toolbar 

 My toolbar_lay.xml is as and add this with MainActivity Layout file 

<?xml version="1.0" encoding="utf-8"?><android.support.v7.widget.Toolbar

    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="wrap_content"

    android:background="?attr/colorPrimary"

    android:minHeight="?attr/actionBarSize"

    android:fitsSystemWindows="true"

    android:id="@+id/toolBar"

    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"    >
</android.support.v7.widget.Toolbar>

B. Output screen will be like this
a.     




b.    
    




c.
    




C. MainActivity.java is as 
1. Java Code 
package com.exam.ravi.swipetabsex1;
import android.support.design.widget.TabLayout;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;

public class MainActivity extends AppCompatActivity {
    Toolbar toolbar;
    TabLayout tabLayout;
    ViewPager viewPager;
    PagerAdapter pagerAdapter;
    @Override    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        toolbar = (Toolbar) findViewById(R.id.toolBar);
        setSupportActionBar(toolbar);
        tabLayout = (TabLayout) findViewById(R.id.tabLay);
        viewPager = (ViewPager) findViewById(R.id.viewpager);
        pagerAdapter = new PagerAdapter(getSupportFragmentManager());
        pagerAdapter.addFrag(new Fragment1(), "Ravi");
        pagerAdapter.addFrag(new Fragment2(), "Kumar");
        pagerAdapter.addFrag(new Fragment3(), "Godara");
        viewPager.setAdapter(pagerAdapter);
        tabLayout.setupWithViewPager(viewPager);
    }
}

2. Its Layout file activity_main.xml is as 

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

<RelativeLayout    xmlns:app="http://schemas.android.com/apk/res-auto"

    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"

    tools:context="com.exam.ravi.swipetabsex1.MainActivity">
<android.support.design.widget.AppBarLayout

    android:layout_height="wrap_content"

    android:layout_width="match_parent"

    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" >
    <include        android:layout_height="wrap_content"

        android:layout_width="match_parent"

        layout="@layout/toolbar_lay"        ></include>
    <android.support.design.widget.TabLayout

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:id="@+id/tabLay"

        app:tabMode="fixed"        app:tabGravity="fill">
    </android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
    <android.support.v4.view.ViewPager

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:id="@+id/viewpager">

    </android.support.v4.view.ViewPager>
</RelativeLayout>

D. View Pager Adapter is as PagerAdapter.java

package com.exam.ravi.swipetabsex1;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import java.util.ArrayList;
public class PagerAdapter extends FragmentPagerAdapter {

    ArrayList<Fragment> fragments = new ArrayList<>();
    ArrayList<String> tabTitles = new ArrayList<>();
    public void addFrag(Fragment fragments,String title)
    {
        this.fragments.add(fragments);
        this.tabTitles.add(title);
    }
    public PagerAdapter(FragmentManager fm) {
        super(fm);
    }

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

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

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

E. Fragments attached with tabs are as 
1. First Fragment Fragment1.java is as 

package com.exam.ravi.swipetabsex1;


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


/** * A simple {@link Fragment} subclass. */public class Fragment1 extends Fragment {


    public Fragment1() {
        // Required empty public constructor    }


    @Override

    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment

        return inflater.inflate(R.layout.fragment_fragment1, container, false);
    }

}

2. Second Fragment is as Fragment2.java 

package com.exam.ravi.swipetabsex1;


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


/** * A simple {@link Fragment} subclass. */public class Fragment2 extends Fragment {


    public Fragment2() {
        // Required empty public constructor    }


    @Override

    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment

        return inflater.inflate(R.layout.fragment_fragment2, container, false);
    }

}

3. Fragment Third is as 

package com.exam.ravi.swipetabsex1;


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


/** * A simple {@link Fragment} subclass. */public class Fragment3 extends Fragment {


    public Fragment3() {
        // Required empty public constructor    }


    @Override







    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment

        return inflater.inflate(R.layout.fragment_fragment3, container, false);
    }

}

4. Fragment1 Layout file is as 
<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"

    tools:context="com.exam.ravi.swipetabsex1.Fragment1">

      <TextView
        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:text="His Blog is androidclue4u.blodspot.in"

        android:gravity="center"

        android:textSize="30sp"/>

</FrameLayout>

5. Fragment2 Layout file is as 
<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"

    tools:context="com.exam.ravi.swipetabsex1.Fragment2">

    <TextView        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:text="He is a Android Trainer"

        android:textSize="30sp"

        android:gravity="center"/>

</FrameLayout>

6. Fragment3 Layout file is as 

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

    tools:context="com.exam.ravi.swipetabsex1.Fragment3">

    <TextView        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:text="He is a i-Phone Trainer"

        android:textSize="30sp"

        android:gravity="center"/>

</FrameLayout>