My Android application has a left hand navigation menu similar to the Google TV left hand menu bar. I can programmatically collapse and expand it to make more or less room on the screen. In the narrow view there are just buttons with icons and in the wider view there is also text with each button.

Now I am playing with letting the user expand and collapse this navigation with a left/right fling gesture. It all works nicely but I kind of doubt that users will actually discover the feature. I had a similar problem with the long click in the past and ended up adding buttons that do the same as the long click.

Should I do that for that collapse/expand feature and the swipe gesture? Are there other options helping the user discover this feature. A help text or new feature release note or so would probably never be read I assume..

  • Somewhat related, an emerging pattern for discovery (new in Android 4.0) is long-pressing action buttons for a tooltip indicating the title of the action. This is kind of a touch-equivalent of hover-based discovery on the web. Commented Jan 5, 2012 at 3:13
  • 2
    So basically setting an View.OnLongClickListener() that brings up a Toast with a help text right? Cool idea. Commented Jan 5, 2012 at 4:26
  • You're making me reboot my HP TouchPad into webOS to take screenshots of the pattern there. Will post them shortly.
    – dnbrv
    Commented Jan 5, 2012 at 5:32
  • Sounds good. Looking forward to it. Commented Jan 5, 2012 at 6:05
  • The Gmail app for iPhone works this way, swipe to reveal left-side navigation. Commented Jan 5, 2012 at 11:37

3 Answers 3


The thing about gestures is that they should have consistent behavior across all apps on a platform. Otherwise, they'll be confusing and hard to discover.

As I've mentioned in my comment to the OP, HP's webOS uses sliding pane a lot (it's actually a part of the official style guide). Here're a few screenshots showing how the layout is implemented in apps (native email client and a 3rd-party Twitter client). Scroll below the pictures for recommendations.

E-mail (native)

hp touchpad email app 3 panes vertical

The sliding option is indicated by the 3 vertical bars in the lower-left corner of each pane that can be slid. The left-most pane doesn't have any special symbols & doesn't respond to the dragging gesture. Also, note how the right-most panel is shown only partially inviting to pull it out to the full view. In horizontal orientation, the screen width is enough to show all buttons but not enough to display an email entirely.

hp touchpad email app 2 panes vertical

Now, the left-most pane is hidden. However, there is no visual indicator how many panes are hidden. We know only that there's at least one more pane because there's the sliding icon in the lower-left corner. When the right-most pane is expanded full-screen, there's also no indication of how many panes are hidden.

TweetPad (3rd-party)

hp touchpad tweepad 2 panes vertical

The first view consists only of 2 panes: navigation & the feed. There's no indication that a 3rd pane can appear (it appears only when you press a tweet and it contains all of the controls for individual tweets). There's also no indication that the feed can slide. Sliding is accomplished by a right-to-left dragging gesture starting anywhere on the pane.

hp touchpad tweetpad 2 panes vertical minimized navigation

When we maximize the feed pane, the navigation pane doesn't disappear. It slides just enough to cover the labels to the icons but leaves them completely functional, similar to the pattern the OP is using. You can press any of the icons and get to the destination without the panes changing their layout. At the same time, there is still nothing to indicate that the feed pane can be slid to the right exposing more of navigation.


These 2 applications plus the official design guidelines cover all of the interactions with paned layout. The obvious troubles with this approach are 1) indicating the possibility of expanding & collapsing panes and 2) indicating the number of collapsed panes.

Given that such a layout isn't common on Android yet, creating a well-denoted hot zone or a toggling button on the left-most pane (for 2-pane layout) is better than just enabling an uncommon gesture.

Also, if any of the panes goes full-screen with others hidden, there needs to be a clear indicator of how many panes are hidden and which way the user should swipe or press to expose them.

  • I like the 3 bars indicating draggable. Commented Jan 5, 2012 at 11:39
  • I am doing pretty much what TweetPad is doing with my navigation, but the gesture detection is on the navigation rather than the main screen since it just makes room for whatever is on the right. And there are many different layouts. I agree that the problem is that there is no style guide and well established patterns and as such I will add a button that does the expand/collapse action. Commented Jan 5, 2012 at 17:18

A couple more examples of this pattern in touchscreen applications:

While on the iPad version the navigation sidebar is always visible, the Gmail app for iPhone reveals the left-hand side navigation by swiping the whole screen (see a screenshot and description). Notice how it also has a redundant Menu button for the same action.

[The app] slides your messages over to the right to reveal the Gmail menu hiding underneath. It’s pretty slick, and makes navigations between folders or subfolders quicker and more streamlined.

gmail app for iphone

Also, it is common to have one (or more) sides with outside-in dragging to reveal notifications or menu: iOS and Android top side for notifications, BBX bottom side for menu.

  • How did you discover the slide-out side menu?
    – dnbrv
    Commented Jan 5, 2012 at 13:08
  • I can't remember... I was discussing with a colleague this new trend of having the navigation concealed on the left (facebook also does it) and somehow I already knew. I think it's because of the affordance that being concealed gives. Commented Jan 5, 2012 at 14:01
  • I want to encourage the users to discover it and all these patterns are too hidden imho. Commented Jan 5, 2012 at 17:19
  • An option to educate your users are coach marks. Commented Jan 5, 2012 at 17:58

Swiping left to right in Android is generally used for previous/next item (as in Google Reader or Calendar) or previous/next tab (as in the Android Market: http://www.pushing-pixels.org/2011/08/11/android-tips-and-tricks-swipey-tabs.html).

Note that, on tablets, this can work to only fill half the screen with content as when you swipe to the left to show sub-categories from the first genre (Apps, Games, Books, Music)you picked: Swipey tabs

The current Android pattern for expanding content is also found on the Market right now but it is the downward-pointing arrow that you'll see in app descriptions and the like: Expanding area

So if you are truly collapsing and expanding content, you may want to use the second design here, but if you want to swipe the navigation into view a la Market categories, you may want to implement "swipey tabs" so the menu is more discoverable to users.

  • I am truly expanding and collapsing the menu and as such I will add a icon with an error sort of icon pointing left and right.. Commented Jan 5, 2012 at 17:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.