Header

A header labels the active view. In addition, it can contain top-level navigation and inputs for the active view. See the Coding guide for information on implementing headers in your apps.

Characteristics

A header is a horizontal bar the full width of the screen, which appears at the top of the screen in most apps.
Headers float above content, with the option of flowing with content in special instances, such as in the Browser app.
The heading's text provides the name of the current view.
The heading may optionally include additional text; for example, in an email app, the number of unread messages may be displayed.
Headers may include inputs for navigating and manipulating the current view.
Most apps (full-screen games being an obvious exception) have a header.

Visuals

Some guidelines for how headers should look and work:

Generic headers: Generic headers should have an orange background.
Headers in media contexts: Headers in media contexts (such as in video players, or camera or photo viewer apps) should have a dark grey background instead of orange.
Header actions: There are never more than two actions placed next to each other in a header.
Action positioning: Negative actions—such as cancel—are always placed on the left. Positive actions—such as "done" or "create"—are always placed on the right. Neutral actions—such as "add" and "edit" are placed in order of priority from right to left.