Android Design and Development series The second: Action Bar (Design)

Action Bar

The Action Bar is a dedicated piece of real estate at the top of each of the screens is generally persistent through Out the app.

It provides several key functions:

• Makes important actions prominent and accessible in a predictable the (such as New or Search).
• Supports consistent navigation and view switching within apps.
• Reduces clutter by providing a action overflow for rarely used actions.
• Provides a dedicated space for giving your app a identity.

If you're new to writing Android apps, note this action Bar is one of the most important design elements you can imple ment. Following the guidelines described here'll go a long toward making your app ' s interface consistent with the core and Roid Apps.

General Organization

The action Bar is a split into a four different functional areas this apply to most apps.

1. APP icon

   The app icon establishes your app ' s identity. It can be replaced with a different logo or branding if you wish. Important:if The app is currently isn't displaying the top-level screen, being sure to display the the App icon, so the user can navigate up the hierarchy. For more discussion of up navigation, see the navigation pattern.

   APP icon with and without the "up" affordance.

1. View Control

   If your app displays data in different views, this segment of the action Bar allows users to switch views. Examples of view-switching controls are Drop-down menus or tab controls. For more information in view-switching, see the App Structure pattern.

   If your app doesn ' t support different views, can also with this space to display non-interactive content, such as an AP P title or longer branding information.

2. Action buttons

   Show the most important actions on the your app in the Actions section. Actions that don ' t fit in the action bar is moved automatically to the action overflow. Long-press on a icon to view the action ' s name.

3. Action Overflow

   Move less often used actions to the action overflow.

Adapting to Rotation and Different screens Sizes

One of the most important UI issues to consider when creating a app is what to adjust to screens rotation on different scre En sizes.

You can adapt to such changes by using the split action bars, which allow you to distribute action bar content across Multiple bars located below the main action bar or at the bottom of the screen.

Layout Considerations for Split Action Bars

When splitting up content across multiple action bars, you generally has three possible locations for action bar content:

1. Main Action Bar
2. Top Bar
3. Bottom Bar

If the user can navigate up the hierarchy from a given, the main action bar contains the up caret, at a minimum.

The user to quickly switch between the Your app provides, use tabs or a spinner in the top bar.

To display actions and, if necessary, the action overflow, use the bottom bar.

Action Buttons

action Buttons on the action bar surface your app's most important activities. Think about which buttons'll get used most often, and order them accordingly. Depending on available screens real estate, the system shows your most important actions as action buttons and moves the RE St to the action overflow. The action Bar should show only those actions, that is available to the user. If an action is unavailable in the current context, hide it. Do not show it as disabled.

A Sampling of action buttons used throughout the Gmail application.

For guidance on prioritizing actions, use the FIT scheme.

F-frequent

• Would people use this action @ Least 7 out of ten times they visit the screen?
• Would they typically use it several times in a row?
• Would taking an extra step every time truly be burdensome?

I-important

• Do you want everyone to discover this action because it's especially cool or a selling point?
• Is it something this needs to being effortless in the rare cases it ' s needed?

T-typical

• Is it typically presented as a first-class action in similar apps?
• Given the context, would people is surprised if it were buried in the action overflow?

If either F, I, or T apply, then it's appropriate for the action Bar. Otherwise, it belongs in the action overflow.

Pre-defined glyphs should is used for certain common actions such as "refresh" and "share." The download link below provides a package with icons that is scaled for various screen densities and is suitable for us E with the holo light and holo Dark themes. The package also includes unstyled icons so can modify to match your theme, in addition to ADOBE®ILLUSTRATOR®SOURC e files for further customization.

Download the Action Bar Icon Pack

Action Overflow

The action overflow in the Action Bar provides access to your app's less frequently used actions. The overflow icon is appears on phones, that has no menu hardware keys. Phones with menu keys display the action overflow when the user presses the key.

Action overflow is pinned to the right side.

How many actions would fit in the main action bar? Action bar capacity is controlled by the following rules:

• Action buttons in the main action bar is occupy more than 50% of the bar ' s width. Action buttons on bottom action bars can use the entire width.
• The screen width in density-independent pixels (DP) determine the number of items the would fit in the main action bar:
  • Smaller than DP = 2 icons
  • 360-499 DP = 3 icons
  • 500-599 DP = 4 icons
  • -DP and larger = 5 icons

In the above table "O" denotes a action bar item and "=" an overflow icon. Sharing data

Whenever your app permits sharing of data, such as images or movie clips, use a share action provider in your act Ion Bar. The share action provider is designed to speed up sharing by displaying the most recently used sharing service next to a s Pinner button that contains the other sharing options.

The Gallery app ' s share action provider with extended spinner for additional sharing options. Contextual Action Bars

A contextual action Bar (CAB) is a temporary action bar overlays the app's Action bar for the duration of a Particular sub-task. CABs is most typically used for tasks this involve acting on selected data or text.

Contextual Action Bar in Browser and Gmail

The selection CAB appears after a long press on a selectable data item triggers selection mode.

From the user can:

• Select additional elements by touching them.
• Trigger an action from the CAB, the applies to all selected data items. The CAB then automatically dismisses itself.
• Dismiss the cab via the navigation bar ' s Back button or the CAB ' s checkmark button. This removes the CAB along with all selection highlights.

Use CABs whenever the user to select data via long press. You can control the action content of a CAB in order to insert the actions you would like the user into be able to perform.

For more information, refer to the Selection pattern.

Action Bar Checklist

When planning your split action bars, ask yourself questions like these:

How important are view navigation to the task?

If View navigation is very the important to your app, use tabs (for fastest view-switching) or spinners.

Which of the app ' s actions need to being consistently available directly from the action bar, and which can is moved to the A Ction overflow?

Use the FIT scheme to decide if actions is displayed at the top-level or can is moved to the action overflow. If the number of top-level actions exceeds the capacity of the main action bar, display them separately in a bottom action Bar.

What else was important enough to warrant continuous display?

Sometimes it is important to the display contextual information for your app, that's always visible. Examples is the number of unread messages in a Messaging Inbox view or the now Playing information in a music player. Carefully plan which important information you would like to display and structure your action bars accordingly.

Android Design and Development series The second: Action Bar (Design)