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.
Minimized control bar
Minimized control bar with text overflow
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.
Extra-wide and super-wide screens
|Type style||Typeface||Weight||Size (dp)|
|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|
|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|
|Progress indicator track||4|
|Height of minimized control bar||128|
|Rounded corner radius (R1)||4|