Android FragmentStatePagerAdapter Example

Android development

is full of surprises, you can never predict what’s coming your way. In my latest assignment at Truiton I had to develop an app in which I user can fill segmented data in an interactive way. The best approach I could think of was screen slides. Now to solve this, I used Android FragmentStatePagerAdapter and ViewPager class. And so I thought of writing this Android FragmentStatePagerAdapter Example tutorial. This way each screen can act as a segment and data can be filled in all segments by sliding from one screen to another.

Although there are two ways to implement Android ViewPager class, but in this tutorial I am only going to discuss Android FragmentStatePagerAdapter class with an example. Since the main purpose/advantage of Android FragmentStatePagerAdapter class is to it consume less memory as compared to its counterpart, I used this to solve my problem. Android FragmentStatePagerAdapter class consumes less memory, because it destroys fragments, as soon as they are not visible to user, keeping only saved state of that fragment. And savedInstanceState is all, what I needed in my app to restore the filled out data by user.

But there may exist a situation where you would like to store the entire fragment in memory, if that’s the case have look at my complete series on PagerAdapters used to implement ViewPager class:

1. Android FragmentStatePagerAdapter
2. Android FragmentPagerAdapter
3. Android FragmentPagerAdapter vs FragmentStatePagerAdapter

Now since the Fragments were introduced in android API 11, earlier versions of android are not capable of running fragments and swipes, unless a support library is used in app. Therefore I built this app with Android support library v4, package name android.support.v4. As a result all versions will run following Android FragmentStatePagerAdapter Example.

Android FragmentStatePagerAdapter Example

To get started, first thing to do is, to create a layout for ViewPager and Android FragmentStatePagerAdapter class. Now while creating a layout please keep in mind to use android.support.v4.view.ViewPager as we would like our app to be compatible with older versions of android. Have a look at fragment_pager.xml.

fragment_pager.xml

XHTML

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center_horizontal" android:orientation="vertical" android:padding="4dip" > <android.support.v4.view.ViewPager android:id="@+id/pager" android:layout_width="match_parent" android:layout_height="0px" android:layout_weight="1" > </android.support.v4.view.ViewPager> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="0" android:gravity="center" android:measureWithLargestChild="true" android:orientation="horizontal" > <Button android:id="@+id/first" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="First" > </Button> <Button android:id="@+id/last" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Last" > </Button> </LinearLayout> </LinearLayout>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

<? xml version = "1.0" encoding = "utf-8" ?> <LinearLayout xmlns : android = "http://schemas.android.com/apk/res/android"     android : layout_width = "match_parent"     android : layout_height = "match_parent"     android : gravity = "center_horizontal"     android : orientation = "vertical"     android : padding = "4dip" >        <android.support.v4.view.ViewPager         android : id = "@+id/pager"         android : layout_width = "match_parent"         android : layout_height = "0px"         android : layout_weight = "1" >      </android.support.v4.view.ViewPager>        <LinearLayout         android : layout_width = "match_parent"         android : layout_height = "wrap_content"         android : layout_weight = "0"         android : gravity = "center"         android : measureWithLargestChild = "true"         android : orientation = "horizontal" >            <Button             android : id = "@+id/first"             android : layout_width = "wrap_content"             android : layout_height = "wrap_content"             android : text = "First" >          </Button>            <Button             android : id = "@+id/last"             android : layout_width = "wrap_content"             android : layout_height = "wrap_content"             android : text = "Last" >          </Button>      </LinearLayout> </LinearLayout>

The layout above is the main layout where all the fragments would be inflated and displayed. To display sliding views, now we need to declare a main class where Android FragmentStatePagerAdapter class would be declared. The class defined below is MainActivity.java.

MainActivity.java

Java

package com.truiton.fragmentstatepageradapter; import android.os.Bundle; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentActivity; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentStatePagerAdapter; import android.support.v4.view.ViewPager; import android.view.Menu; import android.view.View; import android.view.View.OnClickListener; import android.widget.Button; public class MainActivity extends FragmentActivity { static final int ITEMS = 10; MyAdapter mAdapter; ViewPager mPager; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.fragment_pager); mAdapter = new MyAdapter(getSupportFragmentManager()); mPager = (ViewPager) findViewById(R.id.pager); mPager.setAdapter(mAdapter); Button button = (Button) findViewById(R.id.first); button.setOnClickListener(new OnClickListener() { public void onClick(View v) { mPager.setCurrentItem(0); } }); button = (Button) findViewById(R.id.last); button.setOnClickListener(new OnClickListener() { public void onClick(View v) { mPager.setCurrentItem(ITEMS - 1); } }); } public static class MyAdapter extends FragmentStatePagerAdapter { public MyAdapter(FragmentManager fragmentManager) { super(fragmentManager); } @Override public int getCount() { return ITEMS; } @Override public Fragment getItem(int position) { switch (position) { case 0: // Fragment # 0 - This will show image return ImageFragment.init(position); case 1: // Fragment # 1 - This will show image return ImageFragment.init(position); default:// Fragment # 2-9 - Will show list return ArrayListFragment.init(position); } } } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.main, menu); return true; } }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71

package com . truiton . fragmentstatepageradapter ;   import android . os . Bundle ; import android . support . v4 . app . Fragment ; import android . support . v4 . app . FragmentActivity ; import android . support . v4 . app . FragmentManager ; import android . support . v4 . app . FragmentStatePagerAdapter ; import android . support . v4 . view . ViewPager ; import android . view . Menu ; import android . view . View ; import android . view . View . OnClickListener ; import android . widget . Button ;   public class MainActivity extends FragmentActivity { static final int ITEMS = 10 ; MyAdapter mAdapter ; ViewPager mPager ;   @Override protected void onCreate ( Bundle savedInstanceState ) { super . onCreate ( savedInstanceState ) ; setContentView ( R . layout . fragment_pager ) ; mAdapter = new MyAdapter ( getSupportFragmentManager ( ) ) ; mPager = ( ViewPager ) findViewById ( R . id . pager ) ; mPager . setAdapter ( mAdapter ) ;   Button button = ( Button ) findViewById ( R . id . first ) ; button . setOnClickListener ( new OnClickListener ( ) { public void onClick ( View v ) { mPager . setCurrentItem ( 0 ) ; } } ) ; button = ( Button ) findViewById ( R . id . last ) ; button . setOnClickListener ( new OnClickListener ( ) { public void onClick ( View v ) { mPager . setCurrentItem ( ITEMS - 1 ) ; } } ) ; }   public static class MyAdapter extends FragmentStatePagerAdapter { public MyAdapter ( FragmentManager fragmentManager ) { super ( fragmentManager ) ; }   @Override public int getCount ( ) { return ITEMS ; }   @Override public Fragment getItem ( int position ) { switch ( position ) { case 0 : // Fragment # 0 - This will show image return ImageFragment . init ( position ) ; case 1 : // Fragment # 1 - This will show image return ImageFragment . init ( position ) ; default : // Fragment # 2-9 - Will show list return ArrayListFragment . init ( position ) ; } } }   @Override public boolean onCreateOptionsMenu ( Menu menu ) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater ( ) . inflate ( R . menu . main , menu ) ; return true ; }   }

In the class above I defined my own FragmentStatePagerAdapter by the name of MyAdapter class. In this adapter the main method is getItem. The getItem method in FragmentStatePagerAdapter calls each fragment when user swipes though them. In this MyAdapter class we are calling two Fragments, ImageFragment and ArrayListFragment. lets have a look at ImageFragment class first.

ImageFragment.java

Java

package com.truiton.fragmentstatepageradapter; 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.TextView; public class ImageFragment extends Fragment { int fragVal; static ImageFragment init(int val) { ImageFragment truitonFrag = new ImageFragment(); // Supply val input as an argument. Bundle args = new Bundle(); args.putInt("val", val); truitonFrag.setArguments(args); return truitonFrag; } @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); fragVal = getArguments() != null ? getArguments().getInt("val") : 1; } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View layoutView = inflater.inflate(R.layout.fragment_image, container, false); View tv = layoutView.findViewById(R.id.text); ((TextView) tv).setText("Truiton Fragment #" + fragVal); return layoutView; } }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

package com . truiton . fragmentstatepageradapter ;   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 . TextView ;   public class ImageFragment extends Fragment { int fragVal ;   static ImageFragment init ( int val ) { ImageFragment truitonFrag = new ImageFragment ( ) ; // Supply val input as an argument. Bundle args = new Bundle ( ) ; args . putInt ( "val" , val ) ; truitonFrag . setArguments ( args ) ; return truitonFrag ; }   @Override public void onCreate ( Bundle savedInstanceState ) { super . onCreate ( savedInstanceState ) ; fragVal = getArguments ( ) != null ? getArguments ( ) . getInt ( "val" ) : 1 ; }   @Override public View onCreateView ( LayoutInflater inflater , ViewGroup container , Bundle savedInstanceState ) { View layoutView = inflater . inflate ( R . layout . fragment_image , container , false ) ; View tv = layoutView . findViewById ( R . id . text ) ; ( ( TextView ) tv ) . setText ( "Truiton Fragment #" + fragVal ) ; return layoutView ; } }

Here in the class above I have defined a static method by the name of init. This method takes the position as argument val from inherited/extended Android FragmentStatePagerAdapter class and further its used in onCreate and onCreateView method of this Fragment accordingly. ImageFragment uses fragment_image layout, so lets have a look at fragment_image.xml.

image_fragment.xml

XHTML

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" > <TextView android:id="@+id/text" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center_vertical|center_horizontal" android:text="@string/hello_world" android:textAppearance="?android:attr/textAppearanceMedium" /> <ImageView android:id="@+id/imageView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/text" android:layout_centerHorizontal="true" android:layout_marginTop="36dp" android:src="@drawable/truiton" /> </RelativeLayout>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<? xml version = "1.0" encoding = "utf-8" ?> <RelativeLayout xmlns : android = "http://schemas.android.com/apk/res/android"     android : layout_width = "match_parent"     android : layout_height = "match_parent" >        <TextView         android : id = "@+id/text"         android : layout_width = "match_parent"         android : layout_height = "wrap_content"         android : gravity = "center_vertical|center_horizontal"         android : text = "@string/hello_world"         android : textAppearance = "?android:attr/textAppearanceMedium" />        <ImageView         android : id = "@+id/imageView1"         android : layout_width = "wrap_content"         android : layout_height = "wrap_content"         android : layout_below = "@+id/text"         android : layout_centerHorizontal = "true"         android : layout_marginTop = "36dp"         android : src = "@drawable/truiton" />   </RelativeLayout>

Next lets have a look at the ArrayListFragment.java.

ArrayListFragment.java

package com.truiton.fragmentstatepageradapter; import android.os.Bundle; import android.support.v4.app.ListFragment; import android.util.Log; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.ArrayAdapter; import android.widget.ListView; import android.widget.TextView; public class ArrayListFragment extends ListFragment { int fragNum; String arr[] = { "This is", "a Truiton", "Demo", "App", "For", "Showing", "FragmentStatePagerAdapter", "and ViewPager", "Implementation" }; static ArrayListFragment init(int val) { ArrayListFragment truitonList = new ArrayListFragment(); // Supply val input as an argument. Bundle args = new Bundle(); args.putInt("val", val); truitonList.setArguments(args); return truitonList; } /** * Retrieving this instance's number from its arguments. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); fragNum = getArguments() != null ? getArguments().getInt("val") : 1; } /** * The Fragment's UI is a simple text view showing its instance number and * an associated list. */ @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View layoutView = inflater.inflate(R.layout.fragment_pager_list, container, false); View tv = layoutView.findViewById(R.id.text); ((TextView) tv).setText("Truiton Fragment #" + fragNum); return layoutView; } @Override public void onActivityCreated(Bundle savedInstanceState) { super.onActivityCreated(savedInstanceState); setListAdapter(new ArrayAdapter<String>(getActivity(), android.R.layout.simple_list_item_1, arr)); } @Override public void onListItemClick(ListView l, View v, int position, long id) { Log.i("Truiton FragmentList", "Item clicked: " + id); } }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63

package com . truiton . fragmentstatepageradapter ;   import android . os . Bundle ; import android . support . v4 . app . ListFragment ; import android . util . Log ; import android . view . LayoutInflater ; import android . view . View ; import android . view . ViewGroup ; import android . widget . ArrayAdapter ; import android . widget . ListView ; import android . widget . TextView ;   public class ArrayListFragment extends ListFragment { int fragNum ; String arr [ ] = { "This is" , "a Truiton" , "Demo" , "App" , "For" , "Showing" , "FragmentStatePagerAdapter" , "and ViewPager" , "Implementation" } ;   static ArrayListFragment init ( int val ) { ArrayListFragment truitonList = new ArrayListFragment ( ) ;   // Supply val input as an argument. Bundle args = new Bundle ( ) ; args . putInt ( "val" , val ) ; truitonList . setArguments ( args ) ;   return truitonList ; }   /** * Retrieving this instance's number from its arguments. */ @ Override public void onCreate ( Bundle savedInstanceState ) { super . onCreate ( savedInstanceState ) ; fragNum = getArguments ( ) != null ? getArguments ( ) . getInt ( "val" ) : 1 ; }   /** * The Fragment's UI is a simple text view showing its instance number and * an associated list. */ @ Override public View onCreateView ( LayoutInflater inflater , ViewGroup container , Bundle savedInstanceState ) { View layoutView = inflater . inflate ( R . layout . fragment_pager_list , container , false ) ; View tv = layoutView . findViewById ( R . id . text ) ; ( ( TextView ) tv ) . setText ( "Truiton Fragment #" + fragNum ) ; return layoutView ; }   @ Override public void onActivityCreated ( Bundle savedInstanceState ) { super . onActivityCreated ( savedInstanceState ) ; setListAdapter ( new ArrayAdapter < String > ( getActivity ( ) , android . R . layout . simple_list_item_1 , arr ) ) ; }   @ Override public void onListItemClick ( ListView l , View v , int position , long id ) { Log . i ( "Truiton FragmentList" , "Item clicked: " + id ) ; } }

The functioning of this ListFragment is also same as of ImageFragment, it has an init method which takes argument from FragmentStatePagerAdapter, the only difference is that it displays a list. Have a look at its layout fragment_pager_list.xml.

fragment_pager_list.xml

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@android:drawable/gallery_thumb" android:orientation="vertical" > <TextView android:id="@+id/text" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center_vertical|center_horizontal" android:text="@string/hello_world" android:textAppearance="?android:attr/textAppearanceMedium" /> <FrameLayout android:layout_width="match_parent" android:layout_height="0dip" android:layout_weight="1" > <ListView android:id="@android:id/list" android:layout_width="match_parent" android:layout_height="match_parent" android:drawSelectorOnTop="false" /> </FrameLayout> </LinearLayout>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

<? xml version = "1.0" encoding = "utf-8" ?> < LinearLayout xmlns : android = "http://schemas.android.com/apk/res/android"      android : layout_width = "match_parent"      android : layout_height = "match_parent"      android : background = "@android:drawable/gallery_thumb"      android : orientation = "vertical" >        < TextView          android : id = "@+id/text"          android : layout_width = "match_parent"          android : layout_height = "wrap_content"          android : gravity = "center_vertical|center_horizontal"          android : text = "@string/hello_world"          android : textAppearance = "?android:attr/textAppearanceMedium" / >        < FrameLayout          android : layout_width = "match_parent"          android : layout_height = "0dip"          android : layout_weight = "1" >            < ListView              android : id = "@android:id/list"              android : layout_width = "match_parent"              android : layout_height = "match_parent"              android : drawSelectorOnTop = "false" / >      < / FrameLayout >   < / LinearLayout >

As of now we have our Android FragmentStatePagerAdapter and ViewPager setup and working, so your project should look something like this.

With this I can conclude this tutorial on Android FragmentStatePagerAdapter and ViewPager. In this tutorial I created an app which had the functionality to display 10 sliding fragments, or swipe views. Also I defined two types of fragments, an ImageFragment and ListFragment, which were used according to the required position in FragmentStatePagerAdapter.

As I mentioned earlier Android FragmentStatePagerAdapter destroys fragments as soon as, they are not visible to user. If you are developing an app which has less number of fragments and you want to keep them in memory, have look at my tutorial on Android FragmentPagerAdapter. If this helped you please like and share this with your friends on Google+ and Facebook. Also like our Facebook page for updates.

http://www.truiton.com/2013/05/android-fragmentstatepageradapter-example/