Barra de controle

A barra de controle fornece controles associados a uma determinada visualização. Ela exibe até cinco controles quando não está expandida e até cinco controles adicionais quando expandida.

Em aplicativos de mídia, a barra de controle é usada na visualização de reprodução para reproduzir/pausar, anterior, próximo e outros controles, incluindo aqueles para ações personalizadas de terceiros.

ícone de chamada
Componente da barra de controle minimizado
A barra de controle minimizada fornece um conjunto mínimo de controles disponíveis em várias visualizações.

Anatomia

A barra de controle possui dois formatos: não expandida e expandida. A versão não expandida pode incluir até cinco controles. Em aplicativos de mídia, um deles é o Reproduzir/Pausar.

Quando expandida, a barra de controle pode incluir até cinco controles adicionais em uma segunda linha. Os usuários podem selecionar o botão de opções 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ção
3. Um dos controles
4. Botão de opções (expande e recolhe a barra de controle)

Especificações

ícone de chamada
Rótulos de layout
Definições de E, M, KL, P, Flex

Barra de controle

Barra de controle expandida

Posicionamento de 1 a 4 controles na barra de controle com controle central ancorado.

Um controle central fixo é um controle com posicionamento preferencial no centro da barra de controle, como um botão de reprodução/pausa de música.

Posicionamento de 1 a 4 controles na barra de controle sem controle ancorado.

Posicionamento de 6 a 9 controles na barra de controle

Dimensionamento de layouts

Esses layouts de referência mostram como adaptar a barra de controle para telas de diferentes larguras e alturas. (As categorias de largura e altura são definidas na seção Layout .) Observe que todos os valores de pixel estão em pixels renderizados, antes de qualquer redução ou aumento de resolução.

Telas extralargas com mais de 1028 dp entre as margens.

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

Telas extralargas com menos de 1028 dp entre as margens

Telas amplas

Telas de largura padrão

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

Telas curtas

A barra de controle se expande em telas com menos de 1000 dp.

Barra de controle expandida em telas pequenas

A barra de controle se expande em telas com mais de 1000 dp de altura.

Estilos

ícone de chamada
Guias de cores
Paletas, valores de elevação e opacidade, e muito mais

Cor

Elemento Cor (modo diurno) Cor (modo noturno)
Ícones principais Branco Branco @ 88%
tela cheia scrim Preto @ 78% Preto @ 84%
Tela de gradiente A definir A definir

Tamanhos

Elemento Tamanho (dp)
Barra de controle 96 (telas curtas) ou 128 (altura padrão e acima)
Í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.
A barra de controle se expande e se contrai conforme o usuário toca no botão de opções adicionais.