Tablet UI patterns - Action Bar

Android Action Bar is a well established UI pattern on Android phone UI design. It is the single most powerful visual tool to make an app look like an Android app. 

In their tablet version of the Android OS Google decided to support the pattern on API level. In Honeycomb implementing a standard looking Action Bar is easier than ever before.

Pattern card

Problem

Most important app functionality should always be easily accessible by users. Apps on a single platform should be internally consistent how they approach main level navigation and important actions.

Solution

Action bar is a branded top bar of the application that provides easy access to relevant actions on the screen and a shortcut to application's home screen. The action bar can also be used to indicate use's location in the application.

Consequences 

1. Very easy and fast access to relevant action on current screen.
2. Easy access to application's home screen by clicking the application logo at left. This paradigm is already well known from web sites.
3. opportunity to provide branding to the application.
4. Helps user in navigation by indicating his / her current location in app.

Multi-purpose Action Bar
On Honeycomb Action Bar as moved beyond what its functions are on an Android phone.
Honeycomb Action Bar provides following functionality:

• Actions
• Navigation
• Search
• Contextual actions
• Overflow menu
• Branding
• Home screen access
• Consistency between phone and tablet apps

Actions
Of course the main function of Action Bar is to provide the context sensitive actions that users might need the most on each screen.

Navigation
The Action Bar API provides an easy way to incorporate navigation tabs directly to the Action Bar. The tabs are visually separated from other action bar items and are consistent throughout Android apps.

For some reason Zinio app uses action bar buttons for navigation tasks. Buttons "date" and "title" sort the magazines. "Edit" button on the other hand takes you to magazine deletion mode which I think is unnecessary in itself. A long press menu would be better. The shopping basket icon takes user to the online store. I think they should have used tabs instead. Or at least separate between these two different classes of actions.

Search

Honeycomb tablets don't have the Android hardware buttons anymore. Providing in-app search, if needed, falls to the action bar's responsibilities. 

Some apps, like YouTube have search field constantly visible:

Others use a search icon that allows user to bring the search field front. 

Contextual actions
The Honeycomb action bar also provides contextual actions. For example selecting a mail in the gmail client or highlighting URL in the browser brings up this contextual mode:

Overflow menu
Because Honeycomb devices don't have the menu button anymore the action bar takes over from the menu button too. Actions that are not frequently used or don't fit on the Action Bar are accessed through the right side menu button.

Branding and home screen access

The action bar is visible on all screens and is therefore a great tool for branding the app. The app logo is located on the left and should provide a direct path to the app home screen or in some cases a step back in the activity stack (in which case indicate that with an arrow icon). 

Consistency between phone and tablet app
Implementing Action bar correctly in phone and tablet version brings consistency between the two versions.

Implementing Action Bar for tablets
Action Bar is supported on API level in Android 3.0+. That makes the implementation very simple.

Good starting point for more information is:
ActionBar API documentation
Android documentation Using the Action Bar
Nick Butcher's (@crafty) Android developer blog post about customizing Action Bar
Also Nick's presentation slides about Honeycomb UI

If you're planning to support both phones and tablets (which you should!) I recommend you take a look at the excellent ActionBarSherlock project. The project can help you to get it right on both versions of Android.


Don't just use phone Action Bar
 Just in case someone is wondering why it is recommended not to use the same Action Bar that is used on phones here are two screenshots from apps that have not yet released support for Honeycomb.

For some reason folks at evernote have decided not to use Android Action Bar in their tablet app. The self implemented top bar makes the app immediately not look like it belongs in Honeycomb. This is still a preview though. I have high hopes that they will change that before final release. Evernote has consistently been one of the apps I use as an example of the best implementations of Android UI patterns.

Honeycomb Action Bar Gallery