How to Implement Android Horizontal Paging, Page 2

A Quick Android Horizontal Paging Example

Let's show a quick example of how to create a three-page ViewPager control. To do so, follow these steps:

1. Create a new Android project in Eclipse, or choose to modify an existing one.
2. Add the Android Compatibility package to the project as described above.
3. Create three layout resource files, one for each page in your ViewPager control. For example, for the sample application we created three layouts, each with a TextView and an ImageView (as shown in Figure 3).

   
   
   Click here for larger image
   Figure 3. Three Layouts for Sample App

4. Update the main.xmllayout file and include a ViewPager control. This control must be defined using its fully qualified control name. Here's an example:

   android:orientation="vertical"
   
   android:layout_width="fill_parent"
   
   android:layout_height="fill_parent">
   
   android:layout_width="match_parent"
   
   android:layout_height="match_parent"
   
   android:id="@+id/threepageviewer"/>

5. Update the Activity class and implement a custom PagerAdapter class. You will need to implement several important data adapter methods for this class. The getCount() method must return the number of pages for the ViewPager (in this case, three). The instantiateItem() method must inflate the appropriate view control for each page (in our example, a full layout), populate it with any data, as determined by the page position, and add it to the collection used by the ViewPager control. With a three page layout, we have defined the left layout as position 0, the middle layout as position 1, and the right layout as position 2.
6. Finally, you'll need to implement the destroyItem() method to remove each page's contents when it is no longer being displayed.

Here's a sample implementation of a custom PagerAdapter class:

private class MyPagerAdapter extends PagerAdapter {

public int getCount() {

return 3;

}

public Object instantiateItem(View collection, int position) {

LayoutInflater inflater = (LayoutInflater) collection.getContext()

.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

int resId = 0;

switch (position) {

case 0:

resId = R.layout.left;

break;

case 1:

resId = R.layout.middle;

break;

case 2:

resId = R.layout.right;

break;

}

View view = inflater.inflate(resId, null);

((ViewPager) collection).addView(view, 0);

return view;

}

@Override

public void destroyItem(View pager, int arg1, Object view) {

((ViewPager) pager).removeView((View) view);

}

}

You need to update the onCreate() method of your Activity class to bind your custom PagerAdapter to the ViewPager control you defined in your Activity layout resource file, main.xml. You set the data adapter using the setAdapter() method. You can also modify the default starting position of the ViewPager, so that the Monkey (position 1, the middle page) is the default using the setCurrentItem() method.

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

MyPagerAdapter adapter = new MyPagerAdapter();

ViewPager myPager = (ViewPager) findViewById(R.id.threepageviewer);

myPager.setAdapter(adapter);

myPager.setCurrentItem(1);

}

That's all there is to it. Now you've got a three-page horizontal paging screen, as shown in Figure 4, that loads the middle page by default (the monkey). The user can swipe or page to the left to see the lion page or right to see the rhino page.

Click here for larger image
Figure 4. A Three-page Horizontal Paging Screen in Android

The source code is available for download.

What About Fragments?

Got an application that relies upon fragments? No problem! There's nothing stopping you from using fragments as your ViewPager control page contents. Take a look at the FragmentPagerAdapter for this very purpose and serve up fragment-based pages.

Conclusion

Android users desire applications that have easy-to-navigate user interfaces. The horizontal paging functionality, available within the Android Compatibility package, gives application developers yet another handy technique for displaying substantial quantities of information in such a fashion. Whether your application is fragment-ready or not, you can use the ViewPager and related data adapter classes available to create dynamic user interfaces for your users.

About the Authors

Shane Conder and Lauren Darcey--Contributing Editors, Mobile Development--have coauthored two books on Android development: an in-depth programming book entitled Android Wireless Application Development (ISBN-13: 978-0-321-62709-4) and Sams Teach Yourself Android Application Development in 24 Hours (ISBN-13: 978-0-321-67335-0). When not writing, they spend their time developing mobile software at their company and providing consulting services. Email | Blog | Twitter