Flipping Your Views

Let’s face it: phones are small.

Even if you have a phone with excellent screen resolution, the physical screen size is still rarely over 3″x5″, since most people want phones that can fit in a pocket, purse, pouch, or poncho.

This means your Android activities can only display so much stuff at one time without individual widgets or text getting too small to be easily read. There are any number of ways to handle this:

  • You could break the one activity into several…but this can get cumbersome
  • You can use ScrollView to allow users to scroll through a longer activity…but this may or may not be easy for the user depending on the device (e.g., a haptic interface using a swipe for scrolling assumes there’s a place clear in the UI for them to actually swipe without accidentally toggling a button or something)
  • You can use TabView, as described in the previous post…but you are locked into a particular presentation pattern (e.g., tabs)
  • You can use ViewFlipper and work out a UI pattern that’s right for you

Not surprisingly, today, we’re going to look at the latter option.

ViewFlipper inherits from FrameLayout, just like we used to describe the innards of a TabView in that previous post. However, initially, it just shows the first child view. It is up to you to arrange for the views to flip, either manually by user interaction, or automatically via a timer.

For example, here is a layout for a simple activity using a Button and a ViewFlipper:

[sourcecode language=”xml”]

  • TareX

    Can the panels be flipped with a finger swipe across the screen? (not a developer; busted)

    Because you mention here that the panels flip when a button is ‘clicked’.

  • In the example, I use a Button to control the adding of panels. Depending on the device, the Button can be “clicked” by a D-pad, a touch screen, intense mental concentration leading to mind control over the phone, or whatever. Though if you get the mind control to work, I suspect the Android team would like to talk to you… 😉

    You could have any other sort of event trigger adding panels as well, such as a timer, incoming email messages, some other user interface action, or whatever.

    Specifically in terms of a “swipe”, that generally implies an iPhone/iPod Touch-style multi-touch interface. If some Android phones support it, and there’s a widget you can use or create that detect such swipes, then yes, you could use it to flip panels. However, it is unlikely *all* Android phones will support multi-touch, so you’ll want an alternative means of indicating a flip as well.

  • TareX

    Well at the Google I/O, it seemed like they repeatedly used “swipe” gestures to move from between the 3 available desktops. It wasn’t multitouch (only one finger could be detected), but they definitely used gestures.

    Thanks Mark 🙂

  • btop

    Thanks for the info! A real help.
    Could you possibly tell me a way to make it randomly select something from the string?

    cheers,
    BTop

  • Jona

    Hello,
    Thanks for your post very informative…
    Now I got a question:
    In your example it seems like one view exits and after it’s gone the next one comes in… Is this correct?
    If it is, how, or could you actually slide one out as the other is coming in simultaneously?

    Thanks!
    Jona

  • Jamie

    great article!! I do have one question about ScrollView. I set up a ScrollView with a LinearLayout inside. Example:

    However, the actual UI on the device and emulator, draws the image buttons vertically, then the textviews all together in groups of similar elements. Why does it not draw the UI elements in the order the XML is layed??

    also, i cant seem to find a page that lists all the development articles you’ve written at AndroidGuys. is there a link on the front page??

  • @Jona: I’m not sure.

    @Jamie:

    Regarding ScrollView, I have seen your posts on the Android Google Groups and, off the cuff, have no idea why you’re getting what you’re getting. Your best bet is to ZIP up the whole project, post it somewhere, and post a URL to it to the Google Groups, so one of us can see the whole thing in action.

    Regarding the lack of links to the development articles, you can click on my name (http://androidguys.com/?author=20). I’m not aware of a handy link to the Building ‘Droids category.

  • ANNOnymous_codey

    You don't need multitouch to swipe and i already wrote a swipe method for an Android-App (tested on G1)

    best regards ANNOnymous_codey

  • alan

    hmmm I've tried using ViewAnimator but when I pressed on the 'back' button on the emulator's machine, instead of returning to the last activity or home screen, the View is stuck at the first child of the ViewAnimator.

    Any solutions? I'm at my wits end….

  • Brad

    Because the code formatting sucks so bad (center justification, for code???) I can't even look at this page. I initially just closed it but decided to at least let you know why.

  • Could you please provide a sample code for dumb newbies like me for scrolling horizontally
    I have been searching for this particular thing for past 5 hrs and all i knw is that this particulat stuff is called fring and we can do it by using gestures 😀 and what is that all about i have no idea but i like android so please help me…. m a quick learner
    Thanks

  • Maile9494

    The example code is mixed up with html.  I viewsource’ed the page to copy the code then stripped out the html.  Also, your XML code kept crashing until I finally figured out to set all the XML tags with initial caps.  I’m developing with eclipse for Android 2.1, FYI. 

    Thanks.  Even with the problem it was a nice simple explanation of viewFlipper.

  • Svangieanne

    cluttered info.. try organizing the content

  • Pingback: туроператор по израилю()

  • Pingback: туроператор по израилю()

  • Pingback: Business Joomla templates 2013()

  • Pingback: Best Wordpress Themes for Photographers 2013()

  • Pingback: allotype astrantia cailleach()