To switch easily from one page to another using slide either from left-to-right or right-to-left becomes easy using ViewPager. The below example is to make view pager with TabLayout, tabs may be used to display headings, we can also move easily from one fragment to another. Below four steps will be enough to implement ViewPager in your application.

Step1: Creating supporting TabLayout and ViewPager in your xml file

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

<android.support.v4.view.ViewPager
            android:id="@+id/viewpager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@android:color/white" />

Step2: Initializing ViewPager and TabLayout and calling below methods from onCreate()

viewPager = (ViewPager) view.findViewById(R.id.viewpager);
	tabLayout = (TabLayout) view.findViewById(R.id.tabs);

	// Adding fragments to the view pager
        setupViewPager(viewPager);

        // Tab layout view
        tabLayout.setupWithViewPager(viewPager);
        setupTabIcons();

Step3: In this step, we going to add fragments to the FragmentPagerAdapter class and if someone needs to customize the view like adding icons and setting state_selected, state_focused, state_active, state_activated colors can be done using selector tag.

// initializing adapter class and adding fragments to that adapter
private void setupViewPager(ViewPager viewPager) {

        ViewPagerAdapter adapter = new ViewPagerAdapter(getChildFragmentManager());

        // first fragment
        adapter.addFrag(new FriendsMessageFragment(), "FriendsMessageFragment");

        // second fragment
        adapter.addFrag(new MyConnectMessageFragment(), "MyConnectMessageFragment");

        // attaching adapter to viewPager
        viewPager.setAdapter(adapter);
    }

// customising the Tab
private void setupTabIcons() {
	
        TextView tabOne = (TextView) LayoutInflater.from(getActivity()).inflate(R.layout.custom_tab_addfriend, null);
        tabOne.setText(" Friends");
	// if you need to add image/icon with tab title        
	tabOne.setCompoundDrawablesWithIntrinsicBounds(R.drawable.new_friend, 0, 0, 0);
        tabLayout.getTabAt(0).setCustomView(tabOne);

        TextView tabTwo = (TextView) LayoutInflater.from(getActivity()).inflate(R.layout.custom_tab_addfriend, null);
        tabTwo.setText(" My Connect");
        //tabTwo.setCompoundDrawablesWithIntrinsicBounds(R.drawable.friends_add, 0, 0, 0);
        tabLayout.getTabAt(1).setCustomView(tabTwo);
    }

private class ViewPagerAdapter extends FragmentPagerAdapter {

        private final List<Fragment> mFragmentList = new ArrayList<>();
        private final List<String> mFragmentTitleList = new ArrayList<>();

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

	// returns fragment to display at particular page
        @Override
        public Fragment getItem(int position) {
            return mFragmentList.get(position);
        }

	// returns total number of pages
        @Override
        public int getCount() {
            return mFragmentList.size();
        }

        public void addFrag(Fragment fragment, String title) {
            mFragmentList.add(fragment);
            mFragmentTitleList.add(title);
        }

	// returns page title
        @Override
        public CharSequence getPageTitle(int position) {
            return mFragmentTitleList.get(position);
        }
    }

Step4: Don't forget to add dependencies in your build.gradle file

compile 'com.android.support:appcompat-v7:24.1.1'
	compile 'com.android.support:design:24.1.1'