Skip to content

Quick guide to enabling Tab + Swipe using Fragments and Android Support library

Before you start, if you want a systematic view (abeit a long one) to creating lateral navigation, refer to the Android Developer patterns:

I will go through a step-by-step (condensed version of the various google dev docs pages) on how to implement 3 tabs + swipe using 3 fragments. 2 fragments have xml layout files, and one fragment is a Google MapFragment.

*Important* – All the packages that you will see below such as ViewPager, FragmentActivity etc are available natively to Android 3.0+ APIs, however Android has provided a support library that allow the creation of everything described here all the way down to Android 2.2. This is important, because if you are developing on a high API level you will see that many classes can be important from either native API, or from*. You will have to stick with one of them as they are not interchangeable.

Example below will be using android support, as this provide greater backward compatibility.

Step 1 – Set up the tabs on the main activity
In Android 3.0+, tabs can be built into the ActionBar on any application. The code below is all that is required:

private void setupABar() {
		// obtain the action bar
		final ActionBar aBar = getActionBar();
                // set it to tab mode
		// add a tab listeners to handle changing the current fragment
		ActionBar.TabListener tabListener = new ActionBar.TabListener() {
			public void onTabUnselected(Tab tab, FragmentTransaction ft) {


			public void onTabSelected(Tab tab, FragmentTransaction ft) {

			public void onTabReselected(Tab tab, FragmentTransaction ft) {

		// add the tabs, register the event handler for the tabs

and in onCreate, call:


Most of the code here is self-explanatory, except for the mViewPager variable. This will become clear in the next section, just remember that the code above just sets up the tabs and registers a handler. It is rather detached from the whole fragment and swipe process.

Step 2 – Fragments
We now want to build 2 fragments (the 3rd Google Map fragment will be constructed in code at runtime). Here we will show the creation of only 1 fragment called ControlFragment (for the control panel of the app I was building):

public class ControlFragment extends Fragment {
	public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
		// inflat and return the layout
		return inflater.inflate(R.layout.controls_fragment, container, false);

and the layout:

controls_fragment.xml (simplified):

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android=""
    android:orientation="vertical" >

        android:text="@string/controls_btn_turnon" />
        android:text="@string/controls_btn_turnoff" />


Step 3 – ViewPager on the MainActivity and swipe
To support multiple views (called fragments), you generally:

  • Add a ViewPager to the layout (through either the XML or by code), it is responsible for displaying different fragments
  • If you need to control how the ViewPager functions such as disabling swiping on certain fragments, then you need to inherit the default ViewPager
  • Register a bunch of fragments to the ViewPager

Step 2 shows the construction of list items 1 and 2. We are building a custom ViewPager as we want to disable scrolling later on a Google MapFragment (so that when you swipe on the map it doesnt jump to the next tab).

MainActivity.xml (Layout XML):

    android:layout_height="match_parent" />

        vertCollectionPagerAdapter mVCollectionPageAdapter;
	ViewPagerMapNoScroll mViewPager;
	private void setupPager() {
                // the page adapter contains all the fragment registrations
		mVCollectionPageAdapter = new vertCollectionPagerAdapter(getSupportFragmentManager());
		mViewPager = (ViewPagerMapNoScroll) findViewById(;
                // set the contents of the ViewPager
		// add a on page change listener to change the actionBar's selected tab # (fragment will then be changed by actionBar's code)
                // the change listener is called on swiping
		mViewPager.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
				public void onPageSelected(int pos) {

and in onCreate of MainActivity:


*Swiping* – We see that we can enable swiping very easily by implementing a ViewPager’s setOnPageChangeListener, this is triggered whenever a ViewPager detects enough side scrolling, and also has determined that the current fragment can be scrolled (see below).

public class vertCollectionPagerAdapter extends FragmentPagerAdapter {
	private static final int FRAGMENT_COUNT = 3;
	private List<Fragment> mFragments = new ArrayList<Fragment>();
        // Google's Android MAP API 2 has MapFragment and the Android Support library's equivalent, SupportMapFragment
	private SupportMapFragment mMapFragment;
	private FragmentManager mFM;
	public boolean disableSwipe = false; 
	public vertCollectionPagerAdapter(FragmentManager fm) {
		mFM = fm;
		// add fragments
		mMapFragment = SupportMapFragment.newInstance();
		mFragments.add(new ControlFragment());
		mFragments.add(new StatsFragment());

	public int getCount() {
        // This is called by the ViewPager to get the fragment at tab position pos
        // ViewPager calls this when the Tab handler handles a tab change
	public Fragment getItem(int pos) {
		Fragment f = mFragments.get(pos);
                // we want to disable swiping on the map fragment
		if (f instanceof SupportMapFragment)
			disableSwipe = true;
			disableSwipe = false;
		return f;
	public Fragment getActiveFragment(ViewPager container, int pos) {
		String name = "android:switcher:" + container.getId() + ":" + pos;
		return  mFM.findFragmentByTag(name);


public class ViewPagerMapNoScroll extends ViewPager {
	public ViewPagerMapNoScroll(Context context) {
	public ViewPagerMapNoScroll(Context context, AttributeSet attrs) {
		super(context, attrs);
	protected boolean canScroll(View v, boolean checkV, int dx, int x, int y) {
		if (v instanceof ViewPagerMapNoScroll) {
                        // the vertCollectionPagerAdapter has logic on getItem that determines if the next fragment should have swipe disabled
			vertCollectionPagerAdapter a = (vertCollectionPagerAdapter) ((ViewPagerMapNoScroll)v).getAdapter();
			if (a.disableSwipe)
				return false;
				return true;
		return super.canScroll(v, checkV, dx, x, y);

This completes a really fast, code-centric tutorial on how to build Tab + Swipe using fragments and Android Support library.

As of now, the MapFragment would not work because that require additional setup, see the next blog post on that

Posted in Android, Java. Tagged with , , , , , , , .