April 24, 2014
Hot Topics:
RSS RSS feed Download our iPhone app

Add Horizontal Paging To Your Android Applications

  • November 28, 2011
  • By Lauren Darcey & Shane Conder
  • Send Email »
  • More Articles »

Horizontal Paging functionality is a popular user interface (UI) technique added to the latest Android Compatibility Package. In fact, horizontal paging has been popping up in popular Android applications such as the Android Market application and the new Google+ Android client. Swiping left and right to change screens of similar content also received coverage for being a broadly supported navigational element in Android 4.0 (Ice Cream Sandwich).

Although not part of the Android SDK, this UI functionality has been included as part of the latest Android Compatibility Package (introduced in release 3 of the V4 package), and can be used with Activity-based and fragment-aware applications. Any developers who are ready to use the Android Compatibility Package can implement horizontal paging. In this short tutorial, learn how to incorporate horizontal paging or swiping into your Android applications quickly and easily.

The What and How of Android Horizontal Paging

From a user perspective, horizontal paging is simple. An Android application with horizontal paging support simply has screens or "pages" that the user can swipe (left or right) to view. The number of pages and the content of each page is up to the developer.

For example, the Android Market enables horizontal paging to navigate the apps available on the market. The Google+ client uses them to page between nearby, circles, and incoming posts, as shown in the following screenshot.


Google+ Client Using Horizontal Paging
Click here for larger image

Figure 1. Google+ Client Using Horizontal Paging

As a developer, you can enable horizontal paging within your own applications using some classes included in the Android Compatibility package. First, there is a new user interface control called a ViewPager, which you can include in your layout resource files. Much like a Gallery control, the ViewPager is the container that holds your page contents. And like a Gallery control, its contents can be populated using a special data adapter. For basic page contents, you can simply extend the PageAdapter class to populate the ViewPager control with the contents of your choice.

The developer controls the page contents served up into the ViewPager control. As its name implies, each page displays a View. A View can be simple, like a TextView control with certain textual contents, or a more complex control like a TableLayout filled with child view controls, or an entire view hierarchy as defined in a layout resource file.

How Do I Access the Android Horizontal Paging Classes?

The ViewPager and PageAdapter classes are part of the Android Compatibility package, which can be downloaded using the Android SDK and AVD Manager.

A quick note about naming: With the recent update in Eclipse to R14 of the tools, the SDK and AVD managers were split apart. Use the Android SDK Manager. In addition, the Android Compatibility package, while still named as such inside Eclipse, is now being called the Android Support package. Given there are features of it that don't exist within the stock APIs this is a more descriptive name. However, we continue to refer to it as the Android Compatibility package.

If you are using Eclipse, recent versions of the ADT plug-in have added the ability to easily add the package to your existing Android project. To do this, right-click on your project in the Project Explorer, choose Android Tools, and select Add Compatibility Library (Figure 2). A file called android-support-v4.jar file will appear in your Referenced Libraries project folder and you can begin using the classes.


Select "Add Compatibility Library" from Android Tools
Click here for larger image

Figure 2. Select "Add Compatibility Library" from Android Tools


Tags: mobile UI, Android App development



Page 1 of 2



Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Sitemap | Contact Us

Rocket Fuel