View Pager With Tabs

Hello Guys, Today we are going to implement Android View Pager with Tabs.

Step 1: Create an Android Project and in your MainActivity Add below code:
package com.example.viewpagerwithtabsdemo;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentTransaction;
import android.support.v4.view.ViewPager;
import android.support.v7.app.ActionBar;
import android.support.v7.app.ActionBar.Tab;
import android.support.v7.app.ActionBar.TabListener;
import android.support.v7.app.ActionBarActivity;

import com.example.viewpagerwithtabsdemo.bo.Student;
import com.example.viewpagerwithtabsdemo.fragment.BaseFragment;

@SuppressWarnings("deprecation")
public class MainActivity extends ActionBarActivity implements TabListener {

    ViewPager viewPager;
    ActionBar actionBar;
    ViewPagerAdapter mAdapter;

    public Student student;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        // Specify that tabs should be displayed in the action bar.
        initViewPager();
        initActionBar();
    }

    private void initViewPager() {
        viewPager = (ViewPager) findViewById(R.id.pager);
        mAdapter = new ViewPagerAdapter(getSupportFragmentManager());

        viewPager.setAdapter(mAdapter);

        /**
         * on swiping the viewpager make respective tab selected
         * */
        viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {

            @Override
            public void onPageSelected(int position) {
                // on changing the page
                // make respected tab selected
                actionBar.setSelectedNavigationItem(position);
            }

            @Override
            public void onPageScrolled(int arg0, float arg1, int arg2) {
            }

            @Override
            public void onPageScrollStateChanged(int arg0) {
            }
        });

    }

    private void initActionBar() {
        actionBar = getSupportActionBar();
        actionBar.setHomeButtonEnabled(false);
        actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

        // Adding Tabs
        actionBar.addTab(actionBar.newTab().setText("First")
                .setTabListener(this));
        actionBar.addTab(actionBar.newTab().setText("Second")
                .setTabListener(this));
    }

    @Override
    public void onTabReselected(Tab tab, FragmentTransaction ft) {
    }

    @Override
    public void onTabSelected(Tab tab, FragmentTransaction ft) {
        viewPager.setCurrentItem(tab.getPosition());
    }

    @Override
    public void onTabUnselected(Tab tab, FragmentTransaction ft) {
    }

    /**
     * Identifies whether the back is called form a child fragment or a parent
     * fragment and takes necessary steps then.
     */
    @Override
    public void onBackPressed() {
        // android:switcher is default tag provided by Android framework for
        // ViewPager default implementation.
        Fragment fragment = (Fragment) getSupportFragmentManager()
                .findFragmentByTag(
                        "android:switcher:" + R.id.pager + ":"
                                + viewPager.getCurrentItem());

        if (fragment != null && fragment instanceof BaseFragment) {
            if (fragment.getView() != null) {
                BaseFragment bf = (BaseFragment) fragment;
                if (bf.isShowingChild()) {
                    replaceChild(bf, viewPager.getCurrentItem());
                } else {
                    backButton();
                }
            }
        }
    }

    // Back Button Pressed
    private void backButton() {
        finish();
    }

    public void replaceChild(BaseFragment oldFrg, int position) {
        mAdapter.replaceChildFragment(oldFrg, position);
    }

}


Step 2: Create Listener for View pager page change
package com.example.viewpagerwithtabsdemo;

public interface PageFragmentListener {
    void onSwitchToNextFragment();
}


Step 3: Create View Pager Adapter


package com.example.viewpagerwithtabsdemo;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

import com.example.viewpagerwithtabsdemo.fragment.BaseFragment;
import com.example.viewpagerwithtabsdemo.fragment.FirstPageFragment;
import com.example.viewpagerwithtabsdemo.fragment.SecondPageFragment;
import com.example.viewpagerwithtabsdemo.fragment.ChildFragment;

public class ViewPagerAdapter extends FragmentPagerAdapter {

    private BaseFragment mFragmentAtPos1; // Fragment at index 1
    private final FragmentManager mFragmentManager;

    private static final int NUM_OF_ITEMS = 2; // No of ViewPager items

    private static final String STR_CHILD_TAG_2 = " -> child fragment of tag 2";

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

    @Override
    public Fragment getItem(int position) {
        if (position == 1) {
            if (mFragmentAtPos1 == null) {
                mFragmentAtPos1 = SecondPageFragment
                        .newInstance(new PageFragmentListener() {
                            public void onSwitchToNextFragment() {
                                mFragmentManager.beginTransaction()
                                        .remove(mFragmentAtPos1).commit();
                                mFragmentAtPos1 = ChildFragment
                                        .newInstance(STR_CHILD_TAG_2);
                                mFragmentAtPos1.setShowingChild(true);
                                notifyDataSetChanged();
                            }
                        });
            }
            return mFragmentAtPos1;
        }

        return FirstPageFragment.newInstance();
    }

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

    @Override
    public int getItemPosition(Object object) {
        if (object instanceof SecondPageFragment
                && mFragmentAtPos1 instanceof ChildFragment) {
            return POSITION_NONE;
        }
        else if (object instanceof ChildFragment) {
            return POSITION_NONE;
        }
        return POSITION_UNCHANGED;
       
    }

    public void replaceChildFragment(BaseFragment oldFrg, int position) {
        switch (position) {
        case 1:
            mFragmentManager.beginTransaction().remove(oldFrg).commit();
            mFragmentAtPos1 = SecondPageFragment
                    .newInstance(new PageFragmentListener() {
                        public void onSwitchToNextFragment() {
                            mFragmentManager.beginTransaction()
                                    .remove(mFragmentAtPos1).commit();
                            mFragmentAtPos1 = ChildFragment
                                    .newInstance(STR_CHILD_TAG_2);
                            mFragmentAtPos1.setShowingChild(true);
                            notifyDataSetChanged();
                        }
                    });
            notifyDataSetChanged();
            break;

        default:
            break;
        }
    }

}


Step 4: Create Fragments: 

Base Fragment:

public class BaseFragment extends Fragment {
   
    private boolean mShowingChild;
   
    public PageFragmentListener mListener;
   
    public boolean isShowingChild() {
        return mShowingChild;
    }

    public void setShowingChild(boolean showingChild) {
        mShowingChild = showingChild;
    }

}

First Fragment:

 /**
 * First fragment.
 */
public class FirstPageFragment extends BaseFragment {

    public FirstPageFragment() {
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_tab1, container, false);
        return view;
    }

    public static FirstPageFragment newInstance() {
        return new FirstPageFragment();
    }

}

Second Fragment:

public class SecondPageFragment extends BaseFragment {

    private View rootView;
    private static SecondPageFragment fragmentObject;

    public SecondPageFragment() {
    }

    public SecondPageFragment(PageFragmentListener listener) {
        mListener = listener;
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        rootView = inflater.inflate(R.layout.fragment_tab2, container, false);
        Button button = (Button) rootView.findViewById(R.id.button);

        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (mListener != null) {
                    // save form data.
                    saveFormData();

                    mListener.onSwitchToNextFragment();
                }
            }
        });

        initViewDetails();

        return rootView;
    }

    public static SecondPageFragment newInstance(PageFragmentListener listener) {
         fragmentObject=new SecondPageFragment(listener);
        return fragmentObject;
    }

    private void saveFormData() {
        Student student = ((MainActivity) getActivity()).student=new Student();

        student.setFirstName(((EditText) rootView.findViewById(R.id.firstName))
                .getText().toString());
        student.setLastName(((EditText) rootView.findViewById(R.id.secondName))
                .getText().toString());
    }

    private void initViewDetails() {
        Student student = ((MainActivity) getActivity()).student;
        if (student != null) {
            ((EditText) rootView.findViewById(R.id.firstName)).setText(student
                    .getFirstName());
            ((EditText) rootView.findViewById(R.id.secondName)).setText(student
                    .getLastName());
        }
    }
}

Child Fragment

public class ChildFragment extends BaseFragment {

    private String mTitle;

    public ChildFragment(String title) {
        mTitle = title;
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_child, container, false);
        return view;
    }

    public static ChildFragment newInstance(String title) {
        return new ChildFragment(title);
    }

}

Step5: Modal/BO/Bean Class for saving object state:

public class Student {

    private String firstName;
    private String lastName;

    public String getFirstName() {
        return firstName;
    }

    public void setFirstName(String firstName) {
        this.firstName = firstName;
    }

    public String getLastName() {
        return lastName;
    }

    public void setLastName(String lastName) {
        this.lastName = lastName;
    }

}

Output:

 Attached Src: View Pager Demo Src