Barra de control

La barra de control proporciona controles asociados a una vista específica. Muestra hasta cinco controles cuando no está expandida y hasta cinco controles adicionales cuando está expandida.

En las aplicaciones multimedia, la barra de control se utiliza en la vista de reproducción para Reproducir/Pausa, Anterior, Siguiente y otros controles, incluidos aquellos para acciones personalizadas de terceros.

icono de llamada
Componente de barra de control minimizado
La barra de control minimizada proporciona un conjunto mínimo de controles disponibles en múltiples vistas.

Anatomía

La barra de control tiene dos formatos: sin expandir y expandida. La versión sin expandir puede incluir hasta cinco controles. En las apps multimedia, uno de ellos es Reproducir/Pausar.

Al expandirse, la barra de control puede incluir hasta cinco controles adicionales en una segunda fila. Los usuarios pueden usar el botón de desbordamiento para expandir o contraer la barra de control.

1. Parte de la barra de control visible antes de la expansión
2. Parte expandida de la barra de acción
3. Uno de los controles
4. Botón de desbordamiento (expande y contrae la barra de control)

Especificaciones

icono de llamada
Etiquetas de diseño
Definiciones de E, M, KL, P, Flex

Barra de control

Barra de control expandida

Ubicación de 1 a 4 controles en la barra de control con control central anclado

Un control central anclado es un control con una ubicación preferida en el centro de la barra de control, como un botón de reproducción/pausa de música.

Ubicación de 1 a 4 controles en la barra de control sin control anclado

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

Diseños de escala

Estos diseños de referencia muestran cómo adaptar la barra de control para pantallas de diferentes anchos y alturas. (Las categorías de ancho y altura se definen en la sección Diseño ). Tenga en cuenta que todos los valores de píxeles se expresan en píxeles renderizados, antes de cualquier reducción o aumento de resolución.

Pantallas extra anchas con más de 1028 dp entre márgenes

Cuando el ancho entre los márgenes sea mayor que el ancho máximo de la barra de control (1028 dp), centre la barra de control horizontalmente. La barra de control no llegará hasta los márgenes.

Pantallas extra anchas con menos de 1028 dp entre márgenes

Pantallas anchas

Pantallas de ancho estándar

En pantallas de ancho estándar, centre la barra de control horizontalmente. Esta se extiende hasta los márgenes. En una pantalla de ancho estándar de exactamente 690 dp, como en este ejemplo, utilice un relleno lateral de P5 entre los bordes de la barra de control y los bordes de la pantalla.

Pantallas cortas

Barra de control expandida en pantallas de menos de 1000 dp

Barra de control ampliada en pantallas cortas

Barra de control expandida en pantallas de más de 1000 dp de altura

Estilos

icono de llamada
Pautas de color
Paletas, valores de elevación y opacidad, y más

Color

Elemento Color (modo día) Color (modo nocturno)
Iconos primarios Blanco Blanco @ 88%
Pantalla completa Negro @ 78% Negro @ 84%
malla degradada Por determinar Por determinar

Apresto

Elemento Tamaño (dp)
Barra de control 96 (pantallas cortas) o 128 (altura estándar y superior)
Icono principal 44

Ejemplos

Barra de control en la vista de reproducción.
Barra de control expandida en la vista de reproducción.
Barra de control en la cola de medios.
Barra de control ampliada en la cola de medios.
Barra de control en la cola de medios.
Barra de control ampliada en la cola de medios.
La barra de control se expande y contrae cuando el usuario toca el botón de desbordamiento.