Minimized control bar

The minimized control bar is used to display a minimal set of controls and metadata. When selected, it opens up a full-screen overlay that includes a larger control bar with additional controls.

For example, the minimized control bar for media apps keeps a small set of playback controls and metadata available throughout the app when music is playing – and it can also open up a full-screen playback view.


Anatomy

1. Content tile
2. Metadata
3. Controls

Specs

Minimized control bar

Minimized control bar with text overflow


Scaling layouts

These reference layouts show how to adapt the minimized 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.

Standard-width screens

Wide screens

Extra-wide and super-wide screens


Styles

Typography

Type style Typeface Weight Size (dp)
Body 1 Roboto Regular 32
Body 3 Roboto Regular 24

Color

Element Color(day mode) Color (night mode)
Primary type White White @ 88%
Secondary type White @ 72% White @ 60%
Icons White White @ 88%
Time-elapsed indicator 3rd party accent 3rd party accent
Time-remaining indicator #464A4D #464A4D
Background of minimized control bar #0E1013 @ 84% #0E1013 @ 88%
Gradient truncate Black @ 0-100% in 10% of text space Black @ 0-100% in 10% of text space

Sizing

Element Size (dp)
Icons 44
Content tile 96
Progress indicator 84
Progress indicator track 4
Height of minimized control bar 128
Rounded corner radius (R1) 4

Examples

Minimized control bar for screens wider than standard width
Minimized control bar for standard-width screens