How to Enable Swiping Between Multiple Screens in Android (Using Fragments)

FragmentActivity is a helpful class for creating an application with multiple screens in which the user can swipe between. Rather than creating one activity per screen and defining the transition animations, the FragmentActivity class will handle all of the work for you.

All you have to do is define each screen as a Fragment.

Your main activity should extend the FragmentActivity class, and should define all of the Fragments like so:

MainActivity.java

/**
 *
 */
public class MainActivity extends FragmentActivity {

	/**
	 * Identifier for the first fragment.
	 */
	public static final int FRAGMENT_ONE = 0;

	/**
	 * Identifier for the second fragment.
	 */
	public static final int FRAGMENT_TWO = 1;

	/**
	 * Number of total fragments.
	 */
	public static final int FRAGMENTS = 2;

	/**
	 * The adapter definition of the fragments.
	 */
	private FragmentPagerAdapter _fragmentPagerAdapter;

	/**
	 * The ViewPager that hosts the section contents.
	 */
	private ViewPager _viewPager;

	/**
	 * List of fragments.
	 */
	private List<Fragment> _fragments = new ArrayList<Fragment>();

	@Override
	protected void onCreate(final Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);

		setContentView(R.layout.activity_main);

		// Create fragments.
		_fragments.add(FRAGMENT_ONE, new FirstFragment());
		_fragments.add(FRAGMENT_TWO, new SecondFragment());

		// Setup the fragments, defining the number of fragments, the screens and titles.
		_fragmentPagerAdapter = new FragmentPagerAdapter(getSupportFragmentManager()){
			@Override
			public int getCount() {
				return FRAGMENTS;
			}
			@Override
			public Fragment getItem(final int position) {
				return _fragments.get(position);
			}
			@Override
			public CharSequence getPageTitle(final int position) {
				switch (position) {
					case FRAGMENT_ONE:
						return "Title One";
					case FRAGMENT_TWO:
						return "Title Two";
					default:
						return null;
				}
			}
		};
		_viewPager = (ViewPager) findViewById(R.id.pager);
		_viewPager.setAdapter(_fragmentPagerAdapter);
	}

}

activity_main.xml

<ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <!-- This title strip will display the currently visible page title, as well as the page titles for adjacent pages. -->
    <android.support.v4.view.PagerTitleStrip
        android:id="@+id/pager_title_strip"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="top" />

</ViewPager>

For each Fragment, define its layout as you would normally define the layout of an Activity.
An example of a Fragment looks like so:

FirstFragment.java

public class FirstFragment extends Fragment {

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

		View view = inflater.inflate(R.layout.fragment_one, null);

		// Create UI components here.

		return view;
	}

}

fragment_one.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/photo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

Leave a Reply

Your email address will not be published. Required fields are marked *