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.
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-anatomy-1.png?authuser=9)
2. Expanded portion of action bar
3. One of the controls
4. Overflow button (expands and collapses control bar)
Specs
Control bar
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-spec-1.png?authuser=9)
Expanded control bar
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-spec-2.png?authuser=9)
Placement of 1–4 controls on control bar with anchored center control
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-spec-3.png?authuser=9)
Placement of 1–4 controls on control bar with no anchored control
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-spec-4.png?authuser=9)
Placement of 6–9 controls on control bar
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-spec-5.png?authuser=9)
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
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-ar-1.png?authuser=9)
Extra-wide screens with less than 1028dp between margins
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-ar-2.png?authuser=9)
Wide screens
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-ar-3.png?authuser=9)
Standard-width screens
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-ar-4.png?authuser=9)
Short screens
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-ar-0.png?authuser=9)
Control bar expanded on screens shorter than 1000dp
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-ar-5.png?authuser=9)
Control bar expanded on short screens
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-ar-7.png?authuser=9)
Control bar expanded on screens taller than 1000dp
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-ar-6.png?authuser=9)
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
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-mock-3.png?authuser=9)
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-mock-4.png?authuser=9)
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-mock-5.png?authuser=9)
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-mock-1.png?authuser=9)
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-mock-6.png?authuser=9)
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-mock-2.png?authuser=9)
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-controlbar.gif?authuser=9)