A Swipe View Android Example for Screen Paging

Simple Flip View Tutorial Using ViewPager for the Android Screen Swipe Effect

This introductory tutorial shows how to code a simple page swiping App with the ViewPager class. It is the basis for more complex view flipping examples, such as an image swiping gallery (to replace the Android Gallery widget that was deprecated in API 16). The ViewPager controls the swiping (flicking the screen left and right) between multiple screens or pages of data. The ViewPager is fed with the multiple screens by a PageAdapter (or the sub-classes FragmentPageAdapter and FragmentStatePagerAdapter).

ViewPager in Action

The implementation of the PageAdapter will create (and destroy) the pages to be shown in the ViewPager. It will load the pages with the data (such as text or images) that must be displayed on the individual pages. This tutorial’s PageAdapter allows swiping through a series of strings (text). Once this example is complete it is easily extended. The follow on tutorial turns this example into a swiping image gallery with each image showing a caption. The following steps are performed to complete the screen swiping demo:

  • Start a new Android App in Eclipse.
  • Add the ViewPager widget to the Apps screen.
  • Define the data (text) to be displayed on each swiped page.
  • Define the layout for the swiped pages.
  • Implement PageAdapter which will create each page and load it with data.
  • Test the App.

Start a New Android App

This tutorial assumes that you are using Eclipse to try out this example code. Start by generating a new App in Eclipse, we called it Swipe Demo. (If you are new to Android programming see the articles Set Up Windows for Android Development and Your First Android Hello World Java Program.) You can of course add the page swiping effect to an existing App.

Adding the ViewPager Widget to the App’s Layout

The ViewPager is part of the Support Library, which is added by default to a new App created with a recent version of the Android API (the Support Library used to be known as the compatibility package). The ViewPager is referenced using it’s package name of android.support.v4.view.ViewPager. Open the default activity layout (or open the layout you are using) and add the ViewPager using the XML editing window, give it the id of viewPager. The ViewPager sits under the TextView (if using the layout created by the default Blank Activity after creating a new Android Application Project).

The TextView is also centered and the text changed from Hello world! to Please Swipe. It is made larger by assigning ?android:attr/textAppearanceMedium to the textAppearance attribute.

Defining the Data to Show on Each ViewPager Page

In this example some text is shown on each swiped page. Here the strings are stored in an array. The array could be defined in code but here they are in a resource file. Open the strings.xml file and add a string array. We are using the code names for Android version releases, all named after desserts:

In the main class file, in our project it is called MainActivity.java, a string array is declared at the class level, String pageData[], and loaded from the resource in the onCreate method   using pageData=getResources().getStringArray(R.array.desserts).

Create a Layout Used for the Swiped Pages

Here we are displaying large text in the center of the screen. Using the Package Explorer
select the layout folder and using the context (or File) menu select New and then Android XML File. Enter a file name, e.g. page.xml, in the File box, and select RelativeLayout, which will be used to center the text. Click Finish then add a TextView with the textAppearance attribute set to textAppearanceLarge, give it an id, e.g. textMessage. The final layout XML will be similar to this:

 Implement PageAdapter

The PageAdapter will create and destroy the pages being swiped. In the MainActivity.java class, before the closing brace, create a new class, e.g. MyPagesAdapter, it needs to extend PageAdapter and will require android.support.v4.view.PageAdapter to be added to the imports. The new class implements four methods:

  1. getcount() – Returns the total number of pages and here it is simply the number of strings in the array so returns pageData.length.
  2. instantiateItem() – This is passed a reference to the ViewPager so the new page can be added to it, and the page number so that the correct data for the page can be loaded. In our implementation we use a class level LayoutInflater to create an instance of page.xml, and set the TextView to a string in the array.
  3. isViewFromObject() – A method required by the ViewPager to check that a page matches the object from which it was created.
  4. destroyItem() – This is called when the ViewPager no longer requires the page (it is now several swipes away so can be cleared).

Here is this samples implementation:

 Test the Swiping by Running the App

Simple ViewPager Demo

This simple swiping App can be extended to support different types of data.

The ViewPager Example Source Code

The full text (code) for the page.xml file was given above. Here is the full source code for those wanting the other files used in this sample. The source code is also available in the  text_swiper.zip file ready to import into an Android Eclipse project (also available from the Android Example Projects page). The activity_main.xml layout:

The strings.xml file:

The MainActivity.java source code:

5 thoughts on “A Swipe View Android Example for Screen Paging

Leave a Reply

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

Human Verification: In order to verify that you are a human and not a spam bot, please enter the answer into the following box below based on the instructions contained in the graphic.