View Pager Example in Android

Add Librarry In build.gradle using app And Import Library

compile 'com.android.support:design:26.+'

ViewPagerActivity.xml

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.example.bhaumik.officetask.ViewPagerActivity">


    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabGravity="fill"
        app:tabMode="fixed"
       app:tabBackground="@color/colorPrimaryDark"
        app:tabSelectedTextColor="#fff"/>

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

Create Two Fragment First Fragment And Second Fragment Are Create in This Example.

FirstFragment.xml

<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.example.bhaumik.officetask.fragments.FirstFragment"
    android:background="@android:color/holo_blue_dark">


    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textSize="@dimen/_20dp"
        android:textColor="#fff"
        android:textStyle="bold"
        android:gravity="center"
        android:text="This is a First Fragment" />

</FrameLayout>

SecondFragment.xml

<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.example.bhaumik.officetask.fragments.SecondFragment"
    android:background="@android:color/holo_green_dark">


    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textSize="@dimen/_20dp"
        android:textColor="#fff"
        android:gravity="center"
        android:textStyle="bold"
        android:text="This is a Second Fragment" />

</FrameLayout>

FirstFragment.java

package com.example.bhaumik.officetask.fragments;


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

import com.example.bhaumik.officetask.R;

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


    public FirstFragment() {
        // 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_first, container, false);
    }

}

SecondFragment.java

package com.example.bhaumik.officetask.fragments;


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

import com.example.bhaumik.officetask.R;

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


    public SecondFragment() {
        // 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_second, container, false);
    }

}

ViewPagerActivity.java

package com.example.bhaumik.officetask;

import android.support.design.widget.TabLayout;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

import com.example.bhaumik.officetask.adapter.ViewPagerAdapter;

public class ViewPagerActivity extends AppCompatActivity {


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

        ViewPager viewPager = (ViewPager) findViewById(R.id.view_pager);
        TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);

        tabLayout.setupWithViewPager(viewPager);

        viewPager.setAdapter(new ViewPagerAdapter(getSupportFragmentManager()));

    }
}

ViewPagerAdapter.java

package com.example.bhaumik.officetask.adapter;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;

import com.example.bhaumik.officetask.fragments.FirstFragment;
import com.example.bhaumik.officetask.fragments.SecondFragment;

/**
 * Created by Bhaumik on 8/28/2017.
 */

public class ViewPagerAdapter extends FragmentStatePagerAdapter{

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

    @Override
    public Fragment getItem(int position) {

        switch (position){

            case 0 :
                return getFirstFragment();
            case 1 :
                return getSecondFragment();
        }
        return null;
    }

    @Override
    public int getCount() {
        return 2;
    }


    private FirstFragment getFirstFragment() {

        FirstFragment firstFragment = new FirstFragment();
        Bundle bundle = new Bundle();
        firstFragment.setArguments(bundle);

        return firstFragment;

    }


    public SecondFragment getSecondFragment() {

        SecondFragment secondFragment = new SecondFragment();
        Bundle bundle = new Bundle();
        secondFragment.setArguments(bundle);

        return secondFragment;

    }

    @Override
    public CharSequence getPageTitle(int position) {

        switch (position){

            case 0 :
                return "First Fragment";

            case 1 :
                return "Second Fragment";
        }
        return "";
    }
}