Screen structure
Action bar
An action bar is an area along the bottom of the screen that gives you a compact way to include actions and tabs that apply to the screen. The location of the action bar lets users access actions and tabs easily and effectively.
Use when
You want to include the most frequent and relevant actions for the entire screen.
Don't use when
You want to include less frequent actions. Use an action menu instead. For example, include Delete at the bottom of an action menu instead of in an action bar.
Best practices
Fix action bars along the bottom of a screen. For immersive views, such as pictures or videos, let the action bar disappear. Show it again when users tap the screen.
Avoid filling up an action bar just because there's room even if it means that just one action is displayed in the action bar.
Consider placing very important actions inline on the screen. For example, if the most important action for a picture is to comment on it, let users drag the picture to reveal space to add comments. Place other important actions, such as sharing, editing, and setting the picture as wallpaper, in the action bar.
Title bar
A title bar is an area along the top of the screen that can contain a title, a segmented control, or actions. A title can help users understand the context of the current screen.
Use when
There's only one way to view the content and the context is not apparent.
Don't use when
The content conveys the context in a richer way. For example, a contact card can more richly identify the context with a picture and a name than a title can.
If tabs appear at the bottom of the screen, don't include a title.
Segmented controls
Segmented controls are a group of horizontally stacked buttons that let users see different aspects of the same content type (for example, top applications, top free applications, and recently released applications).
Use when
There are two to four ways for users to view the content and users might frequently switch views.
Don't use when
You're not sure whether to use segmented controls or tabs. Use tabs instead. Tabs are easier for users to interact with and understand.
Best practices
Place the segment that's most frequently used in the far left position. If you include an "All content" segment, place it in the far left position.
When users return to a view, show the content from the last filtered state. When users reopen an app after exiting it, show the content from the far left segment.
Don't allow segmented controls to scroll out of view unless you must show more content on the screen.
Make the font size smaller if the names don't fit in the segment.
If users can filter only some of the content on a screen, place segmented controls directly above the content that can be filtered.
If you combine segmented controls with tabs, make tabs the primary method of navigation and make sure that the segmented control filters content within a specific tab.
Actions in a title bar
Actions in a title bar help prevent users from submitting information accidentally by separating the action buttons from a virtual keyboard.
Use when
You have a sheet and you want to help users complete and dismiss it easily. Learn more about Sheets.
Don't use when
You need back navigation in a drill-down. Use the action bar for back navigation instead. An exception is if the screen is highly focused on text input or back navigation is a primary action. In these cases, put the back navigation in the title bar so that it isn't hidden by a virtual keyboard.
Best practice
Place positive actions, such as Send, Accept, and Save at the top right of the screen. Place more destructive actions, such as Cancel, Close, and Back, at the top left of the screen.
Menus
Action menus
Action menus contain actions that are less frequently used than actions that appear in the action bar.
Context menus
Context menus give users a quick way to access the most common actions for an item. Users don't have to open an item to act on it.
Application menus
Application menus hold important actions that are independent of context and common across the app (for example, "Settings", "Log Out", and "About").
Learn more about Menus.
