An Emerging Android UI Pattern for Contextual Actions

When showing a ListView on Android, there are often more actions associated with a single list item. Providing access to these actions in a simple manner is not easy. This article provides insight into how this problem was solved in the past.

Consequently it explains an emerging UI pattern which provides a much better solution. And last-but-not-least, an open source implementation, which you can use in your Android project.

Important note: I did not invent this pattern, it is already used by some high quality Android apps, such as the new Spotify app. Which initially gave me the idea to implement it myself.

Older Approaches

Some different approaches where used in the history of Android (1).

• By long-pressing on the list item.
  • This would bring up a context menu, where the user can choose the appropiate action.
• By swiping the list item left or right
  • After the swipe the list item would reveal the options for that list item.
  • It was the twitter app that introduced this intially
• By a popup showing the actions
  • This is better known as the quick-actions popup. It looks like a balloon from a comic.

All of these approaches have disadvantages. Long-pressing and swiping are difficult to discover. They all hide the information presented below them. Conclusion: they kinda suck.

The new Slide-Expandable Pattern

The new way to solve this problem is to accompany every list item with a “more” button. Once that button is clicked, a panel slides out of the bottom of the list item which provides access to the contextual actions.

Example

As with all ui-patterns, an example are worth a thousand words.  The Spotify app has one of the best implementations. A normal listview looks as follows:

It shows a list of songs. For each song there are different actions, such as playing the song, enqeueue the song, navigating to the album of the song, etc.

When tapping on the text of the song, the main action will be executed. In this case it is playing the song.

The other actions are hidden in an contextual menu. After the user taps on the triangle in the bottom-right corner of a list item, the contextual menu slides reveals itself. It is shown together with a sliding animation, giving the impression that the contextual menu was hidden below the list item

The following pictures shows the state after the contextual menu is fully shown:

When a context menu is already open, it will be hidden when another context menu is opened. The new menu will animate in, while other will animate out.

This can be seen in the frames on the right showing the context menu in the 3DWeapons app, which I developed:

Advantages

The main advantages of this pattern are the following one:

• Discoverability
  • The “more” button (in spotify a triangle) is easy to discover, indicating that there is more to be shown.
• No Overlays
  • Once the contextual menu is shown, it does not hide any other data that the user is currently working with.
• Physical Analogy
  • It feels like you open a drawer. This relation of a UI pattern with the physical world is often what it makes a success.

An Implementation for Android

Since I liked this pattern so much, I wanted it in my own apps. But I could not find any library for Android to solve this problem, so I took to oppertunity to create one myself.

The result is the Android-SlideExpandableListView project (4). Usage documentation can be found on the github page.

Feel free to embed it in your Android project!

References

1. http://www.androidpatterns.com/uap_category/provide-access-to-contextual-actions
2. http://www.androidpatterns.com/uap_pattern/context-menu
3. http://www.androidpatterns.com/uap_pattern/swipe-for-action
4. https://github.com/tjerkw/Android-SlideExpandableListView