Control bar

The control bar provides controls associated with a particular view. It displays up to 5 controls in its unexpanded version, and up to 5 additional controls when expanded.

In media apps, the control bar is used in the playback view for Play/Pause, Previous, Next, and other controls, including those for custom third-party actions.


Anatomy

The control bar has two formats: unexpanded and expanded. The unexpanded version can include up to 5 controls. In media apps,, one of these is Play/Pause.

When expanded, the control bar can include up to 5 additional controls in a second row. Users can select the overflow button to expand or collapse the control bar.

1. Control bar portion visible before expansion
2. Expanded portion of action bar
3. One of the controls
4. Overflow button (expands and collapses control bar)

Specs

Control bar

Expanded control bar

Placement of 1–4 controls on control bar with anchored center control

An anchored center control is a control with a preferred placement in the center of the control bar, such as a music play/pause button.

Placement of 1–4 controls on control bar with no anchored control

Placement of 6–9 controls on control bar


Scaling layouts

These reference layouts show how to adapt the control bar to accommodate screens of various widths and heights. (Width and height categories are defined in the Layout section.) Note that all pixel values are in rendered pixels, before any down-sampling or up-sampling occurs.

Extra-wide screens with more than 1028dp between margins

When the width between margins is greater than the maximum width of the control bar (1028dp), center the control bar horizontally. The control bar won’t extend all the way to the margins.

Extra-wide screens with less than 1028dp between margins

Wide screens

Standard-width screens

On screens of standard width, center the control bar horizontally. The control bar will extend into the margins. On a standard width screen of exactly 690 dp, as in this example, use side padding of P5 between the edges of the control bar and the edges of the screen.

Short screens

Control bar expanded on screens shorter than 1000dp

Control bar expanded on short screens

Control bar expanded on screens taller than 1000dp


Styles

Color

Element Color(day mode) Color (night mode)
Primary icons White White @ 88%
Full-screen scrim Black @ 78% Black @ 84%
Gradient scrim TBD TBD

Sizing

Element Size (dp)
Control bar 96 (short screens) / 128 (standard height and above)
Primary icon 44

Examples

Control bar in playback view
Expanded control bar in playback view
Control bar in media queue
Expanded control bar in media queue
Control bar in media queue
Expanded control bar in media queue
Control bar expanding and contracting as a user taps the overflow button