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.

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

Barra de control expandida

Colocación de 1 a 4 controles en la barra de control con un control central fijo

Posición de 1 a 4 controles en la barra de control sin un control fijo

Colocación de 6 a 9 controles en la barra de control

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

Pantallas extra anchas con menos de 1,028 dp entre los márgenes

Pantallas panorámicas

Pantallas de ancho estándar

Pantallas cortas

Se expandió la barra de control en pantallas de menos de 1,000 dp

Se expandió la barra de control en pantallas cortas

Se expandió la barra de control en pantallas de más de 1,000 dp

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






