Barra de controle

A barra de controle fornece controles associados a uma vista específica. Ele exibe até cinco controles na versão não expandida e até cinco controles adicionais quando expandido.

Em apps de mídia, a barra de controle é usada na visualização de reprodução para pausar/pausar, voltar, voltar e outros controles, incluindo os de ações personalizadas de terceiros.

Componente minimizado da barra de controle

A barra de controle minimizada oferece um conjunto mínimo de controles disponíveis em várias visualizações

---

Anatomia

A barra de controle tem dois formatos: não expandido e expandido. A versão não expandida pode incluir até cinco controles. Em apps de mídia, um deles é Play/Pause.

Quando expandida, a barra de controle pode incluir até cinco controles adicionais em uma segunda linha. Os usuários podem selecionar o botão flutuante para expandir ou recolher a barra de controle.

1. Parte da barra de controle visível antes da expansão
2. Parte expandida da barra de ações
3. Um dos controles
4. Botão flutuante (expande e recolhe a barra de controle)

---

Especificações

Marcadores de layout

Definições de E, M, KL, P e Flex

Barra de controle

Barra de controle expandida

Posicionamento de 1 a 4 controles na barra de controle com controle centralizado

Um controle fixo no centro é um controle com uma posição preferida no centro da barra de controle, como um botão para reproduzir/pausar músicas.

Posição de 1 a 4 controles na barra de controle sem controle fixo

Posição de 6 a 9 controles na barra de controle

---

Como dimensionar layouts

Esses layouts de referência mostram como adaptar a barra de controle para acomodar telas de várias larguras e alturas. As categorias de largura e altura são definidas na seção Layout. Todos os valores de pixel estão em pixels renderizados, antes de qualquer amostragem para baixo ou para cima.

Layout

Margens, linhas-chave e padding para vários tamanhos de tela

Marcadores de layout

Definições de E, M, KL, P e Flex

Telas extragrandes com mais de 1.028 dp entre as margens

Quando a largura entre as margens for maior que a largura máxima da barra de controle (1.028 dp), centralize-a horizontalmente. A barra de controle não se estenderá até as margens.

Telas extragrandes com menos de 1.028 dp entre as margens

Telas largas

Telas de largura padrão

Em telas de largura padrão, centralize a barra de controle horizontalmente. A barra de controle se estenderá até as margens. Em uma tela de largura padrão de exatamente 690 dp, como neste exemplo, use o padding lateral de P5 entre as bordas da barra de controle e as bordas da tela.

Telas curtas

Barra de controle expandida em telas com menos de 1.000 dp.

Barra de controle expandida em telas curtas

Barra de controle expandida em telas com mais de 1.000 dp.

---

Estilos

Diretrizes de cor

Paletas, valores de elevação e opacidade, e mais

Cor

Elemento	Cor(modo dia)	Cor (modo noturno)
Ícones principais	Branco	Branco 88%
Tela cheia	Preto a 78%	Preto a 84%
Gradiente scrim	a definir	a definir

Dimensionamento

Elemento	Tamanho (dp)
Barra de controle	96 (telas curtas) / 128 (altura padrão e superior)
Ícone principal	44

---

Exemplos

Barra de controle na visualização de reprodução

Barra de controle expandida na visualização de reprodução

Barra de controle na fila de mídia

Barra de controle expandida na fila de mídia

Barra de controle na fila de mídia

Barra de controle expandida na fila de mídia

Barra de controle se expande e contraindo à medida que o usuário toca no botão flutuante