This article describes the implementation and possible interactions with the header. A header is a dedicated space at the top of the screen, most often used to display the view title. It can also include navigation, action buttons and other controls.
Notes
Headers float above content but in some circumstances can vertically scroll off screen with content as the user scrolls. While most apps use a header, it is not required. Full screen apps and games such as Camera and Gallery forego the header to maximize space for content.
The header's text (A) displays the name of the current view in title case. The heading may also include additional text. For example, in an email app, the number of unread messages may be displayed.
Header text does not wrap and is instead truncated. As a result, text should be kept as concise as possible.
Headers may include action buttons (B). However, the maximum number of buttons in a header is two.
The header is commonly used for navigation with the back button placed at the far left (C).
Navigation controls can also include a cancel button (D). The cancel button cancels an action and returns the user to the previous view or state.
The drawer button (E) is also typically located at the top left of the header.
Headers can include input fields (F) such as search or URL.
Interaction — basic header
User taps Wi-Fi to modify Wi-Fi settings.
Wi-Fi settings will slide in from right to left, pushing the settings menu out of the way. The header also updates to reflect the new window and include a navigation button.
User modifies setting options.
User taps the back button on the header to save all the modified options and return to the previous screen.
Wi-Fi settings will slide out from left to right while the settings screen slides in.
User is returned to settings screen, and settings have been updated.
Interaction — header with edit button
User taps edit button to edit content.
Edit contact fades in and covers the contact detail.
User modifies contact.
User taps cancel button on the header to abort the modifications and return to the previous screen.
Edit contact fades out and reveals Contact Detail.
User is returned to previous screen, and no changes to the contact have been made.
Interaction — header with more... button and action menu
If three or more action buttons are needed in the header, a more button is used. User taps the more button.
More action buttons appear as an action menu. The user taps outside the menu, on the more button, or makes a selection to close the more action menu.
Icons can also be included to the left of each menu item. User makes a selection to execute the function.
Keyboard is launched for user to add subject.
