Header

App Design Guides

Consider using the standard Header element to show the most important actions and navigation in your app.

The Header appears at the top of the screen and is designed to show:

  1. Where you are
  2. Where else you can go
  3. The most important actions available (e.g. compose a message or crop a picture)

Elements and placement ›

Arrange your Header to maximise the important elements inside your app.

Display options ›

Consider how you want your Header to appear; we have two options: default or fixed.

Modes ›

The Header has the ability to transform into different modes: search/input and multi-select (coming soon).

Header section ›

These are used to display sub-navigation or filtering options within the Header.

1. Elements and placement

The Header features a maximum of four slots that can be arranged and combined to fulfill the users’ needs. When there is no back or navigation drawer, there may be three slots on the right side of the title.

Each Header element has a specific meaning and purpose.

1-ElementsPlacemen

Slot A: Back and Navigation Drawer

Slot B: Title

Slot C & D: View, Actions, Actions Drawer, Search, Settings

2-title

Title (Slot B – mandatory)

Gives the user a clear indication of where they are inside the app.

3-View

View (C-D)

If an app has a limited number of primary views, they can be placed at the right of the title to enable quicker access. This allows the user to navigate across different views inside the app.

Note: Views in the SDK are defined as Tabs

4-NavDrawer

Navigation drawer (Slot A)

Navigate to different views through the drawer. When open, the navigation drawer will display all the MainViews. The current selected view will be displayed with the selected state.

5-Back

Back (Slot A – always on the left)

The user can navigate to the previous view of the app until they get to the main screen.

Do

  • If there are only two or three views, use Header buttons instead. If there are more than three, try using a separate toolbar of view buttons. Even if some views spill over into a menu, the first four will be visible without tapping, and will be accessible with only one tap.

Avoid

  • Using a Navigation Drawer, because it requires a tap just to see the available views, and two taps every time you switch views.

6-Actions

Actions (C-D)

Do

  • Consider putting the most important actions in the Header.

For example: in the Contact app, we have placed a clear principal action ‘Add Contact’ – making it more accessible to the user.

7-ActionsDrawer

Action drawer (Slot D)

Do

  • The first one to three actions (depending on available space) go directly in the Header, with other actions in the Action Drawer.
Design Advice: we recommend to use the Action Drawer sparingly, as it hides actions from view.

8-Search

Search (Slot D or Slot C – if Action Drawer occupies D)

Tapping on the search action will make the Header transition into a search mode.

9-Settings

Settings (D or Action Drawer)

App Settings can be placed directly into the Header or inside the drawer if there is no space at the right of the title.

2. Display options

Default

By default, when the user opens the app or navigates to a screen the Header will display; it will then slide away once they scroll down.

Fixed

You can choose for the Header to be fixed so actions can be available at all times. For instance, when editing photos, the Header ‘Photo’ stays fixed and can’t be dismissed.

Overlay (Coming soon)

The Header is made semi-transparent and the content sits beneath it. Developers can choose for it to be displayed constantly or hidden on timeout or tap.

3. Modes

12-Modes

Multi-select mode

Multi-select mode allows users to select multiple items and carry out actions on them, such as select, share or delete.

When available, users will activate the multi-select mode by long pressing on a List or Grid view.

If the Multi-select mode is not available, nothing will happen.

Once multi-select mode is activated, the item pressed will be selected and the Header will switch to multi-select mode.

  • Actions will be displayed at the right
  • Cancel action will displayed at the left

Note:

  • The action buttons are disabled when no item is selected.
  • ‘Select non’ toggle will unselected the items when they are all selected.

Deletion

The user will have to confirm the deletion in this action with a dialog, as they won’t be able to undo it. The item will disappear and the list will drop down.

Please note: Developers can extend the default actions and add new ones. A maximum of 4 actions are allowed in this mode. If more than 4 is needed, consider using a Popover or Action Menu.

13-Search_Imput

Search and input

Once the user taps on an action such as ‘Search’ in the Header, the standard Header will switch to ‘Input’ mode. The input field will be focused, and OSK (On Screen Keyboard) will displayed.

Input mode is also used in screens where you can add new contacts to a message. The input field is displayed by default in the Header and users can tap to activate focus, display OSK and add new contacts.

Header section

Header_section

Header sections in the divider are used to display sub-navigation or filtering options.The divider is displayed at the bottom of the Header. If the Header scrolls, the divider does too.

For example: in the Contacts app you can switch between ‘All’ contacts or ‘Favourites.’

By default, the user can tap to switch views, or swipe (optional):

  • One option must always be selected – for example – the user will either see ‘all’ their contacts or just their ‘favourites.’
  • The Header will retain its state once the user navigates back in the page stack.
  • Options may be disabled (greyed out) so that the user cannot change them (e.g. in Dialer, user can’t change option while on a live call)