Implement a SwipeView in Android

Posted on by

Android development is partially about having a set of tools in your UI toolbox that you bring out when appropriate in the design and implementation phases of the project.  I’m about to add an invaluable tool to your toolbox.  Meet the SwipeView.

What is a “SwipeView”?

A SwipeView is an Android UI view similar to the homescreens.  You have several similar panes of content that you access by swiping left and right.  As you swipe left and right, transitions between the views are animated so that the view in focus follows your finger.  See the handy illustration below (Click to enlarge):

 

When Should I use a “SwipeView”?

SwipeViews are useful if you’re going to have several screens with the same layout and function that you want the user to switch between.  If you’ve ever used the Epicurious app they make good use of a SwipeView-esque implementation when searching for recipes.  Think of SwipeViews as something like a Gallery implementation for Views instead of just images.

How Do I implement a “SwipeView”?

Here’s the fun part.  Now that you know you want a SwipeView in your Android application how do you implement it.  As you probably know its not a standard Android View.  As such we’re going to make use of a third party library.  Jason Fry has put together a nice library for the simple implementation of SwipeViews.  Head on over to his site and blog post for more details about how to implement your very own SwipeView.  Since each SwipeView implementation is going to be widely different, I’m just going to summarize the steps to implement his library below:

  • Add SwipeView element (<uk.co.jasonfry.android.tools.ui.SwipeView…) to the desired XML layout as you would any Android View.
  • Reference SwipeView in java code via findViewById() as usual
  • Populate SwipeView with number of views that you’d like to be able to swipe between
  • Implement method private class SwipeImageLoader implements OnPageChangedListener {public void onPageChanged(int oldPage, int newPage) {}}. Look at the library’s documentation and examples for more details on how to do this.  Essentially this method will handle dynamically allocating and populating views as your user swipes back and forth.

I would include an example of implementation here, but my implementation was quite unorthodox and borrowed ideas from how to implement ListViews and other portions of my Android experience. Needless to say its a bit more involved than what should be expected from an introduction to an UI pattern.  If you’d like help implementing your own SwipeView, feel free to drop a line in the comments below or give us a shoutout via twitter @droidweb.

  • http://twitter.com/tonylukasavage Tony Lukasavage

    I have an example of implementing flings for navigation if you don’t want to use a third party library. Check it out if you are interested: http://savagelook.com/blog/android/swipes-or-flings-for-navigation-in-android

    • Anonymous

      Thanks for that information! When I get a chance (probably when I’m using another SwipeView), I’ll take at look at your method and compare it to this third party library. Also, I see you’ve got a lot of helpful Android content over on your site.

  • Dim5b

    Hi would like to consider swiping through listViews using SwipeView.

    Since my ListView adapter would be filled by a Json http request (Asyntask) i would like to fill the listview only when its swiped. Is this possible ?

    Could you provide some tips on how to implement this. I looked at jason fry demos but he loads ImageViews from there drawable ids, since i am newbie not quite sure how to load a set of 7 ListViews instead.

    Thanks in advance
    Dimitri

    • Anonymous

      Dim5b: You’re implementation sounds exactly like what I ended up doing with this library. Let me take a second and share the how I implemented my swipe activity:

      - First off I created an ArrayList of items I was displaying to the screen. Because each view in the swipeview corresponded to one of these items which held a lot of information I used this at the base unit of data to drive the view. This is the item I check for when the activity begins and load only once no matter how many times the activity is restarted

      - In my onCreate() I check for this ArrayList. If its null, I show the user a progress dialog (Loadding….) and then I do what I have to do to populate the list, else I just call a custom method I wrote called setViews(). More about what that does later.

      - To populate this ArrayList, I parse through two levels of JSON feeds via my ASYNCTask. The first level accesses one API and then uses values pulled from that first API to get seed values for the HTTP Get request to a second API. Note that I wrote a method outside of the ASYNCTask that actually makes the HTTP Get requests. Its just a simple buffered method that takes the url and spits out a string with the response of that url which is then throw into a JSON object and parsed. Run a loop on this JSON object to fill the ArrayList and viola!

      - Now that we’ve got our data I call setViews(). SetViews calls another method makeView(int view). Why create another method? Well makeView() takes an integer as an argument and creates a view complete with all the data of numbered element in the ArrayList. So at this initial stage I call makeView with the values of 1 and 2 (this populates the first view the user will see and creates the second view the user will inevitably swipe to and stores it in memory).

      - Now that we’ve got the initial views, its time to override the library’s OnPageChangedListener. In this method you’ll follow the form in the examples and load one page ahead and behind the user at all times. Just call makeView() with the appropriate integer to get the right view

      - How does makeView work? Glad you asked! It simply uses a viewInflater (recycling views whenever possible, just like all good ListViews should) to inflate the xml I use to define what the individual views look like. Once inflation occurs, just pop in the appropriate values from your ArrayList and return the resulting view

      I know that’s a screenful of information, and I’m pretty sure this isn’t the prettiest way to handle this situation, but its works and it works damn beautifully. I would share the source code, but its part of a larger project for a private client. If I get a chance, I’ll make it generic and post it sometime. Hope this helps and if you need anything else, let me know!

  • Kenny Goers

    I’m looking at using an adapter instead of the child list to make it more similar to other uses, this would allow a more dynamic and extensible framework part.  

    Thoughts?

  • Kenny Goers

    I’m looking at using an adapter instead of the child list to make it more similar to other uses, this would allow a more dynamic and extensible framework part.  

    Thoughts?