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.

Google Docs for Android - UI pattern facelift

Google's track record on Android app quality has been questionable. User interface in most official Google apps has been very poor. Today we had a nice surprise though. Google just released Google docs for Android. The app is very polished both visually and functionally.

The app also provides us a view to Google's new visual style for Android apps. They have taken many of the design patterns and given them a facelift. I wouldn't be surprised to see this app as the reference in the upcoming Google I/O. I hope we see this app or at least the UI layer released as open source really soon.


Dashboard
Dashboard of the app still contains the same amount of icons as usual but they have been arranged differently. For some reason they have left the bottom part of the screen empty. Other than I think this design is very stylish and very clean.

twitter app's quick action and action bar implementation fail

twitter app was initially developed by Google for twitter and it was the benchmark for many of design patterns (see this old Android developer blog post). After the initial release twitter took over from Google and released a new version of it few months ago.

In the latest version they took the twitter app closer to the iOS version byt ditching many of the Android UI patterns and replacing them with iOS. Unfortunately these UI solutions feel alien on Android and don't really work as expected.

Quick Actions

Long pressing or swiping a tweet opens actions that can be performed on the tweet. Unfortunately doing that hides the selected tweet. This is the worst possible placement for the actions as it hides the only tweet on the screen that has any relevance to the actions. Compare this to the previous implementation bellow which keeps the selected tweet visible and helps the user to keep track of the context.

Action Bar Sherlock - project for action bar implementation

Project Action Bar Sherlock is very promising looking project that provides implementation for the action bar pattern in form of an Android library project. What makes it particularly great is that it supports both 3.0 and pre 3.0 Android versions. It will automatically display the Honeycomb action bar on 3.0 + and the traditional version on anything bellow 3.0.

See project website for more info and instructions:
https://github.com/JakeWharton/ActionBarSherlock

Project license is Apache 2.0.

GreenDroid, library for implementing action bar, quick actions and much more

GreenDroid is a open source project Android library project that contains many useful components. The license is Apache 2.0 making it suitable even for commercial projects.

Project website: https://github.com/cyrilmottier/GreenDroid

You can find instructions how to use the GreenDroid in your projects from the project's website. In short, all you need to do is to download the project code and include it as a library project in your Android app project.

The GreenDroid creator, Cyril Mottier (@cyrilmottier), have also written about the project in his blog: Introduction to the GreenDroid library.

There's also a demo application demonstrating GreenDroid library's components (Android Market link)

10 more applications that use UI patterns

Catch Notes
Catch Notes separates two sections of their dashboard with a horizontal line and different background texture.

What's New in Honeycomb APIs, UI Point of View

As first Honeycomb tablets are hitting store selveds and the SDK has been out for few weeks Google has been busy updating their documentation for the new OS version.

The Android Dev Guide is massive. Not everybody have time to go through all of it or even just the new posts (tagged with new! -tag). So I've gathered here a quick overview about the technical documentation for Android UI development and design. I hope this overview gives designers decent understanding about what is now possible and developers an overview and a reference of the new articles.

More after the jump...

Google engineer's comments on Honeycomb action bar at stackoverflow

Google's framework engineer Adam Powell added some good notes to a question in stackoverflow.

Original link

par:

Can i hide the App Icon from the Action Bar in Honeycomb? 

I am currently planning the honeycomb update for my app and i am wondering how to use the Action Bar correctly. My first question is if it is possible to hide the App-Icon and Title from the Action Bar. And is there any kind of Design guidline for the Honeycomb-UI yet?

adamp:

Yes, you can hide the app icon and title. You can also replace the app icon with a wider logo image for your activity.
The app icon/logo at the left is collectively treated as a "home" affordance. You can optionally ask the system to display it as "up." When tapped, this should take the user either to a home/landing page for your app or one level up in the app's navigation hierarchy, respectively.
This complements the system back button by providing a consistent way for the user to move around your app when the history associated with the back button might be complex. (For example, the user might have been deep-linked into your app through a notification or an intent from another application.) By using this pattern your app won't need to hijack the normal behavior of the back button in special cases for convenience.
The action bar does double duty in the form of action modes. The two APIs are orthogonal but the resulting UI occupies the same screen real estate. An action mode presents a set of contextually relevant options to the user as a customized action bar. For example, a user might select several items from a list at a time. The app might present an action mode to let the user take a bulk action on the set of all selected items such as delete or share.
Action modes are a great way to present contextual actions that doesn't stop the user from interacting with the rest of the UI the way that popup menus do.

Design guidelines will hopefully be published "soon." :) 

Official Blogger app fails to implement design patterns

Google released official Android app for Blogger a week or so back. Unfortunately, this app fails to deliver. The user interface is confusing and difficult to use. 

Android market link

What could be done to make it better. UI design patterns to the rescue!
More after break...

Renaming "Action Bar" UI design pattern

"Action Bar" UI pattern was created by Google in their 2010 Google I/O conference talk. Action bare, however, isn't very good name for it. Even the guys at Android Central podcasts have referred to the name as stupid more than once.

What would be a better name for it? In some parts documentation of Honeycomb Google refers it as "Application Bar" but that is not consistent throughout the documentation. Should we change the name of this pattern?

I have added a poll to this page outlining few options for names. 

1. Application Bar
2. Activity bar
3. Action Bar
4. Other

Please add any other suggestions to comments to this post. 

Please vote! Thank you!

Picplz adopts Action Bar and Dashboard in 2.0

picplz has updated their application to version 2.0. This update brings with it a new user interface that now conforms to common Android UI design patterns.

 

Implementing Dashboard and Action Bar

Action bar and Dashboard are well established Android UI design patterns that are suitable in most Android projects.

See UI design pattern index for more about these patterns.

I have started a project to help developers to get into speed with their project faster. The project aims to collect together code that can be used to implement different UI patterns. I used Google's IO conference Android application as a basis and removed overhead code to make it easier to understand which bits of it are useful.

More details and other projects after the jump

More dashboards and action bars

Realplayer and Aldiko have updated their Android apps. Aldiko's ebook reader app now fully utilises the action bar and dashboard whereas Realplayer implements the dashboard using different but very clear style.

For more see:

Action Bar gallery - part 2

Dashboard gallery - part 2

OmniGraffle Stencils

First version of OmniGraffle stencils for Android UI Design Patterns is now available for download from Android UI Patterns Google Code project website.

Download:
Android UI Design Patterns OmniGraffle stencils, version 1.0.1

OmniGraffle is an excellent application for drafting UI layouts. Unfortunately it runs only on OSx.
OmniGraffle website

There are a lot of ready made other Android related stencils available from their website
http://graffletopia.com/search/android

Action Bar Anti-Pattern Gallery

Dictionary.com 

  Anti-pattern

Dictionary.com uses very action-bar like visuals for application navigation. Also, pushing the company logo doesn't do anything. I would recommend a redesign in this case. Use of tab component would be advisable.

Action Bar Gallery - Part 2

... continuing from Action Bar Gallery - Part 1

YouTube

In the latest update of YouTube application Google has utilised the action bar pattern. In each context the user has the most needed functionality available easily. In this app they have added an interesting twist by including "More" button in the action bar when more functions are relevant than the three you can comfortably fit into an action bar.

Action Bar Gallery - Part 1

Twitter

Twitter application was created by Google engineers to promote new Android application UI patterns. It is therefore the reference implementation of action bar pattern. It includes branding, contextual information (see twitter post character count) and fast access to all most used functions on each screen. A promise was made in Google I/O 2010 that source code for this app will be released but that has not happened yet.