Tablet UI patterns - Action Bar
Join the DZone community and get the full member experience.Join For Free
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.
- Very easy and fast access to relevant action on current screen.
- Easy access to application's home screen by clicking the application logo at left. This paradigm is already well known from web sites.
- opportunity to provide branding to the application.
- 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:
- Contextual actions
- Overflow menu
- Home screen access
- Consistency between phone and tablet apps
Of course the main function of Action Bar is to provide the context sensitive actions that users might need the most on each screen.
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.
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:
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.
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.
Published at DZone with permission of Juhani Lehtimaki, DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.