Stay organized with collections
Save and categorize content based on your preferences.
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.
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)
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
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2024-07-23 UTC."],[[["The control bar offers view-specific controls, displaying up to 5 initially and up to 5 more when expanded via an overflow button."],["It's commonly used in media apps for playback control (Play/Pause, Previous, Next) and custom actions."],["Control bar adapts to different screen sizes, with layouts optimized for extra-wide, wide, and standard screens."],["Visual styles include color palettes for day/night modes and specific sizing for the bar and icons."],["Examples demonstrate control bar usage in playback and media queue views, showcasing its expanding/contracting functionality."]]],[]]
