Swipe View Tutorial

  • Written by  Clive

Using Swipe Views to swop pages

Android Swipe Views icon

Swipe views allow you to change pages by swiping your finger across the screen.

You create Swipe views by using a page viewer and an adapter. The adapter supplies the pages and the page viewer takes care of moving the pages on and off the screen.

We’re using a ViewPager. It’s a layout manager that takes care of the horizontal scrolling. Usually it’s used with fragments, scrolling them on and off screen.

We’re also going to need a page adapter to supply the pages to the ViewPager.

As we’re using fragments, we have two adapter options:

  • FragmentPagerAdapter – represents each page as a fragment. The fragment is kept in the fragment manager while it’s still possible that it may be used. This adapter is best used for a small number of fragments. It can use lot of memory as fragments are kept in memory while not displayed
  • FragmentStatePagerAdapter – uses fragments to manage the pages. It also saves and restores the fragment’s state. It’s useful for a large number of pages as it uses less memory. Only the state of the fragment is kept in memory and not the whole fragment. It may be a bit slow switching between pages due to it first having to restore their state

We’re going to use the FragmentStatePagerAdapter.

Android Swipe Views diagram

Pages are scrolled horizontally

Our tutorial app: an overview

Our app consists of one activity, a list fragment and a FragmentStatePagerAdapter.

We’ve got 7 lists that we want to show. The user swipes the lists on and off the screen and can then select an item from the currently displayed list. A Toast message displays their selection.

Have a look at Making Toast for more on Toast messages.

Here’s a screenshot:

Android Swipe Views screenshot

Lists are scrolled on and off the screen. Selecting an item displays a Toast message with the selected item’s details

The Activity

We’re using the Support Library so our activity extends the FragmentActivity class.

Here’s the code for our activity:

Android Swipe Views activity

Extend the FragmentActivity class and then set up the adapter and page viewer in the activity’s onCreate() method

Note the following:

  • The Support Library imports
  • setContentView – sets the layout file to use for the User Interface. We’re using the fragment_pager.xml file
  • NUMBER_OF_LISTS – the constant for the number of lists (and pages)  that we want to display
  • mAdapter – our FragmentStatePagerAdapter that will manage the fragments displayed as  pages in the page viewer
  • mPager – the page viewer that manages the page scrolling

The layout file

Our activity uses the fragment_pager.xml layout file. It’s a linear layout containing a ViewPager element with its PagerTitleStrip child view.

Here’s part of the xml code:

Android Swipe Views activity viewPager Xml

Add the ViewPager element to your layout file

The Adapter

The adapter supplies the pages to the page viewer.

Android Swipe Views save fragment state

No need to worry about saving the fragments state when the device’s configuration changes. The FragmentStatePagerAdapter manages the fragment’s state for you

We’re using the FragmentStatePagerAdapter. Here’s the first part of our code:

Android Swipe Views adapter

Our page adapter uses the Support Library and we extend the FragmentStatePagerAdapter class

Note the following:

  • we pass a fragment manager object as a parameter to the constructor. This will manage the fragments in the activity
  • There are three methods in our adapter:
    • getCount – returns the number of available pages
    • getItem – returns a fragment. We use the parameter, position, to specify the page that we want to display
    • getPageTitle - supplies a title to the page title strip

The Page Title Strip

Android Swipe Views TitleStrip

You can display the PagerTitleStrip at the top or the bottom of the screen

The getPageTitle() method supplies a title to the page title strip that appears at the top of the screen.

Here’s the code:

Android Swipe Views getPageTitle()

Use the getPageTitle() method to display a title in the PagerTitleStrip

Make sure that you include this code in the fragment_pager.xml file:

Android Swipe Views pagerTitleStrip

The PagerTitleStrip can appear at either the top or the bottom of the screen. It shows the previous, current and next page title in the title strip

The list fragment

We use a list fragment to display our lists.

Android Swipe Views listFragment Imports

Make sure that you import the Support Library’s ListFragment class

We create a new fragment containing the page that it should display:

Android Swipe Views listFragment createNewFragment

Create a new fragment to display another list

Note the following:

  • the num parameter specifies which page fragment to display. We set it as an argument which will be used when creating the fragment

We use the onActivityCreated() method to set up the list adapter. This is where we tell it which array of countries to use for the fragment that’s about to be displayed.

Here’s the code:

Android Swipe Views listFragment onActivityCreated

Set up the list adapter. We’re using an ArrayAdapter to supply an array of countries to the list fragment

Note the following:

  • setListAdapter – we provide the adapter that will supply the array. The adapter is passed as a parameter
  • ArrayAdapter – we use an array adapter to pass the country array to the list. We create a new ArrayAdapter object, passing it three parameters:
    • The context which we get by calling the getActivity() method
    • The ID of the resource layout that we’ll use to display the items in the list
    • The array of countries to display in the list. We get the array by calling getMyListArray()
  • getMyListArray – we’re going to display a different array in each of the pages. We use this method to determine which array to use

Here’s part of the code for getting the array:

Android Swipe Views listFragment switch array

We use a switch statement to filter the page number. We get the page number when a new fragment is created

Note the following:

  • mNum –each call to createNewFragmentToDisplay() passes the fragment’s position as a parameter. This is put in a Bundle object which we use to create the fragment. We get the page number out of the fragment’s arguments in the list fragment’s onCreate() method and assign it to the mNum variable
  • switch – we use a switch statement to filter the value of mNum. Matching case statements  determine which array to use

The list arrays

There are seven arrays defined in the CountriesClass class. Each one is displayed on a page.

I hope that you have found this tutorial helpful.

If you're interested in brushing up on Fragments, why not have a look at Dynamic layouts using Fragments.

And if you need more info on ArrayAdapters and lists, have a look at our Android ListView tutorial.

This tutorial was created using Android Studio. You can download the project files here Download icon

Are you using Eclipse or another IDE? Here's how you can use this project's Android Studio files.