Android : Page Swiping using ViewPager

In this example, I’ve re-used the Fragment implements from the Tabs post.

Requirements

To implement a Tabbed, using fragments on devices running Android 2.1 or higher, you’ll need to include the Android Compatibility library.  In my example, I’m using Compatibility library v4

Step-by-step

Define the activity_main
Define the FragmentActivity container for the PageViewer named MainActivity
Define the PagerAdapter

Download the code from PageSwiping

1)1)MainActivity.java

package com.jitesh.pageswipingusingviewpager;

import android.os.Bundle;

import android.app.Activity;

import android.view.Menu;

import java.util.List;

import java.util.Vector;

import android.os.Bundle;

import android.support.v4.app.Fragment;

import android.support.v4.app.FragmentActivity;

import android.support.v4.view.ViewPager;

/**

 * The <code>ViewPagerFragmentActivity</code> class is the fragment activity hosting the ViewPager

 * @author jitesh

 */

public class MainActivity extends FragmentActivity{

/** maintains the pager adapter*/

private PagerAdapter mPagerAdapter;

/* (non-Javadoc)

* @see android.support.v4.app.FragmentActivity#onCreate(android.os.Bundle)

*/

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

super.setContentView(R.layout.activity_main);

//initialsie the pager

this.initialisePaging();

}

/**

* Initialise the fragments to be paged

*/

private void initialisePaging() {

List<Fragment> fragments = new Vector<Fragment>();

fragments.add(Fragment.instantiate(this, Tab1Fragment.class.getName()));

fragments.add(Fragment.instantiate(this, Tab2Fragment.class.getName()));

fragments.add(Fragment.instantiate(this, Tab3Fragment.class.getName()));

this.mPagerAdapter  = new PagerAdapter(super.getSupportFragmentManager(), fragments);

//

ViewPager pager = (ViewPager)super.findViewById(R.id.viewpager);

pager.setAdapter(this.mPagerAdapter);

}

}

2)PagerAdapter.java

package com.jitesh.pageswipingusingviewpager;

import java.util.List;

import android.support.v4.app.Fragment;

import android.support.v4.app.FragmentManager;

import android.support.v4.app.FragmentPagerAdapter;

/**

 * The <code>PagerAdapter</code> serves the fragments when paging.

 * @author jitesh

 */

public class PagerAdapter extends FragmentPagerAdapter {

private List<Fragment> fragments;

/**

* @param fm

* @param fragments

*/

public PagerAdapter(FragmentManager fm, List<Fragment> fragments) {

super(fm);

this.fragments = fragments;

}

/* (non-Javadoc)

* @see android.support.v4.app.FragmentPagerAdapter#getItem(int)

*/

@Override

public Fragment getItem(int position) {

return this.fragments.get(position);

}

/* (non-Javadoc)

* @see android.support.v4.view.PagerAdapter#getCount()

*/

@Override

public int getCount() {

return this.fragments.size();

}

}

3)activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:orientation="vertical"
  >
  <android.support.v4.view.ViewPager
  android:id="@+android:id/viewpager"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  />
</LinearLayout>

4) tab_frag1_layout.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout

  xmlns:android="http://schemas.android.com/apk/res/android"

  android:layout_width="fill_parent"

  android:layout_height="fill_parent"

  android:background="#FF0000"

  >

</LinearLayout>

5) tab_frag2_layout.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout

  xmlns:android="http://schemas.android.com/apk/res/android"

  android:layout_width="fill_parent"

  android:layout_height="fill_parent"

  android:background="##bcda"

  >

</LinearLayout>

6) tab_frag3_layout.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout

  xmlns:android="http://schemas.android.com/apk/res/android"

  android:layout_width="fill_parent"

  android:layout_height="fill_parent"

  android:background="##abcd"

  >

</LinearLayout>

7)Tab1Fragment.java

package com.jitesh.tabviewpager;

import android.os.Bundle;

import android.support.v4.app.Fragment;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.LinearLayout;

/**

 * @author jitesh

 *

 */

public class Tab1Fragment extends Fragment {

/** (non-Javadoc)

 * @see android.support.v4.app.Fragment#onCreateView(android.view.LayoutInflater, android.view.ViewGroup, android.os.Bundle)

 */

public View onCreateView(LayoutInflater inflater, ViewGroup container,

Bundle savedInstanceState) {

if (container == null) {

            // We have different layouts, and in one of them this

            // fragment's containing frame doesn't exist.  The fragment

            // may still be created from its saved state, but there is

            // no reason to try to create its view hierarchy because it

            // won't be displayed.  Note this is not needed -- we could

            // just run the code below, where we would create and return

            // the view hierarchy; it would just never be used.

            return null;

        }

return (LinearLayout)inflater.inflate(R.layout.tab_frag1_layout, container, false);

}

}

8)Tab2Fragment.java

package com.jitesh.tabviewpager;

import android.os.Bundle;

import android.support.v4.app.Fragment;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.LinearLayout;

/**

 * @author jitesh

 *

 */

public class Tab2Fragment extends Fragment {

/** (non-Javadoc)

 * @see android.support.v4.app.Fragment#onCreateView(android.view.LayoutInflater, android.view.ViewGroup, android.os.Bundle)

 */

public View onCreateView(LayoutInflater inflater, ViewGroup container,

Bundle savedInstanceState) {

if (container == null) {

            // We have different layouts, and in one of them this

            // fragment's containing frame doesn't exist.  The fragment

            // may still be created from its saved state, but there is

            // no reason to try to create its view hierarchy because it

            // won't be displayed.  Note this is not needed -- we could

            // just run the code below, where we would create and return

            // the view hierarchy; it would just never be used.

            return null;

        }

return (LinearLayout)inflater.inflate(R.layout.tab_frag2_layout, container, false);

}

}

9)Tab3Fragment.java

package com.jitesh.tabviewpager;

import android.os.Bundle;

import android.support.v4.app.Fragment;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.LinearLayout;

/**

 * @author jitesh

 *

 */

public class Tab3Fragment extends Fragment {

/** (non-Javadoc)

 * @see android.support.v4.app.Fragment#onCreateView(android.view.LayoutInflater, android.view.ViewGroup, android.os.Bundle)

 */

public View onCreateView(LayoutInflater inflater, ViewGroup container,

Bundle savedInstanceState) {

if (container == null) {

            // We have different layouts, and in one of them this

            // fragment's containing frame doesn't exist.  The fragment

            // may still be created from its saved state, but there is

            // no reason to try to create its view hierarchy because it

            // won't be displayed.  Note this is not needed -- we could

            // just run the code below, where we would create and return

            // the view hierarchy; it would just never be used.

            return null;

        }

return (LinearLayout)inflater.inflate(R.layout.tab_frag3_layout, container, false);

}

}

Download the code from PageSwiping