La barra de controles proporciona controles asociados con una vista en particular. Muestra hasta 5 controles en la versión no expandida y hasta 5 controles adicionales cuando se expande.
En las apps de música, la barra de control se usa en la vista de reproducción para los controles Reproducir/Pausar, Anterior, Siguiente y otros, incluidos los para acciones personalizadas de terceros.
Anatomía
La barra de control tiene dos formatos: no expandido y expandido. La versión no expandida puede incluir hasta 5 controles. En las apps de música, una de ellas es Reproducir/Pausar.
Cuando se expande, la barra de control puede incluir hasta 5 controles adicionales en una segunda fila. Los usuarios pueden seleccionar el botón de menú ampliado para expandir o contraer la barra de control.
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-anatomy-1.png?authuser=1&hl=es)
2. Parte expandida de la barra de acciones
3. Uno de los controles
4. Botón ampliado (se expande y contrae la barra de control)
Especificaciones
Barra de control
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-spec-1.png?authuser=1&hl=es)
Barra de control expandida
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-spec-2.png?authuser=1&hl=es)
Colocación de 1 a 4 controles en la barra de control con un control central fijo
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-spec-3.png?authuser=1&hl=es)
Posición de 1 a 4 controles en la barra de control sin un control fijo
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-spec-4.png?authuser=1&hl=es)
Colocación de 6 a 9 controles en la barra de control
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-spec-5.png?authuser=1&hl=es)
Cómo ajustar diseños
Estos diseños de referencia muestran cómo adaptar la barra de control para adaptarse a pantallas de varios anchos y alturas. Las categorías de ancho y altura se definen en la sección Diseño. Ten en cuenta que todos los valores de píxeles están en píxeles renderizados, antes de que se realice cualquier reducción o sobremuestreo.
Pantallas extra anchas con más de 1,028 dp entre los márgenes
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-ar-1.png?authuser=1&hl=es)
Pantallas extra anchas con menos de 1,028 dp entre los márgenes
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-ar-2.png?authuser=1&hl=es)
Pantallas panorámicas
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-ar-3.png?authuser=1&hl=es)
Pantallas de ancho estándar
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-ar-4.png?authuser=1&hl=es)
Pantallas cortas
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-ar-0.png?authuser=1&hl=es)
Se expandió la barra de control en pantallas de menos de 1,000 dp
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-ar-5.png?authuser=1&hl=es)
Se expandió la barra de control en pantallas cortas
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-ar-7.png?authuser=1&hl=es)
Se expandió la barra de control en pantallas de más de 1,000 dp
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-ar-6.png?authuser=1&hl=es)
Estilos
Color
Elemento | Color(modo diurno) | Color (modo nocturno) |
---|---|---|
Íconos principales | White | Blanco @ 88% |
Lámina de pantalla completa | Negro @ 78% | Negro 84% |
Lámina de gradientes | Por definir | Por definir |
Tamaño
Elemento | Tamaño (dp) |
---|---|
Barra de control | 96 (pantallas cortas) / 128 (altura estándar y superiores) |
Ícono principal | 44 |
Ejemplos
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-mock-3.png?authuser=1&hl=es)
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-mock-4.png?authuser=1&hl=es)
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-mock-5.png?authuser=1&hl=es)
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-mock-1.png?authuser=1&hl=es)
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-mock-6.png?authuser=1&hl=es)
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-mock-2.png?authuser=1&hl=es)
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-controlbar.gif?authuser=1&hl=es)