Indicador de progresso de mídia

O componente indicador de progresso de mídia é exclusivo para apps de mídia.

O indicador de progresso é uma representação visual da duração e do tempo decorrido de reprodução de uma fonte de mídia. Ele aparece em apps de música durante a reprodução.


Anatomia

O indicador de progresso de mídia consiste em uma faixa inativa (exibida em cinza) que representa a duração da fonte de mídia e uma faixa ativa (exibida com uma cor de destaque) que se sobrepõe à faixa inativa para indicar o tempo decorrido da reprodução.

Anatomia do indicador de progresso de mídia
1. Faixa ativa
2. Faixa inativa

O indicador de progresso de mídia pode ser linear ou circular.

Indicador de progresso de mídia linear

O indicador de progresso linear exibe a duração e o tempo decorrido em um eixo horizontal. A parte visível da faixa está centralizada em uma área de toque de 76 dp. Ao tocar ou arrastar o tempo decorrido, o usuário pode ir para diferentes locais na fonte de mídia. O indicador de progresso de mídia linear é destinado a telas com 800 dp ou mais.

Anatomia do indicador de progresso circular

O indicador de progresso circular mostra a duração e o tempo decorrido como um círculo. Não é possível tocar ou arrastar o tempo decorrido para mudar de local. O indicador de progresso de mídia circular é destinado a telas com menos de 800 dp de altura e para quando os controles de mídia são minimizados.

Estados indicadores de progresso de mídia

Durante a reprodução, o indicador de progresso está em um dos quatro estados:

  • Em reprodução:a mídia está tocando e a faixa ativa avança na faixa inativa para indicar o tempo decorrido.
  • Pausada: o usuário pausou a reprodução. A faixa ativa está fixa no ponto em que a reprodução está pausada.
  • Armazenando em buffer: o app de música está carregando o conteúdo que vai ser reproduzido. O indicador exibe uma linha branca que avança repetidamente na faixa inativa enquanto o conteúdo é carregado.
  • Erro: não é possível reproduzir a mídia. Não há faixas ativas, e as faixas inativas são desativadas.
A faixa ativa avança na faixa inativa conforme a mídia é reproduzida.
Estado de reprodução: a faixa ativa avança na faixa inativa conforme a mídia é reproduzida.
A faixa ativa está parada enquanto a reprodução de mídia está pausada
Estado pausado: a faixa ativa está estática enquanto a reprodução da mídia está pausada.
Uma linha branca avança repetidamente na faixa inativa enquanto o conteúdo é carregado.
Estado de buffer: uma linha branca avança repetidamente na faixa inativa enquanto o conteúdo é carregado.
A faixa inativa é desativada quando há um erro de reprodução medai Estado de erro: quando ocorre um erro de mídia, nenhuma faixa ativa é exibida, e a faixa inativa é desativada.

Especificações

Indicador de progresso de mídia linear

Linha vermelha do indicador de progresso de mídia linear

Indicador de progresso de mídia circular

Linha vermelha do indicador de progresso de mídia circular

Personalização

Durante a reprodução de mídia, a faixa ativa do indicador de progresso de mídia é exibida usando uma cor de destaque. A cor de destaque padrão é um tom de azul. Os desenvolvedores de apps podem optar por fornecer uma cor de destaque que reflita a marca de mídia deles. Da mesma forma, os OEMs podem fornecer uma cor de destaque que reflete a marca do carro deles. Se fornecida, uma cor de destaque do OEM tem prioridade sobre a cor de destaque do app.

Barra de progresso da mídia linear mostrando a faixa ativa usando as cores padrão, de terceiros e de destaque do OEM
O estilo padrão do indicador de progresso é um tom de azul. Os desenvolvedores de apps podem substituir o estilo padrão dos apps pela cor de destaque da marca deles (verde neste exemplo). Os OEMs também podem substituir o estilo padrão e do app pela cor de destaque da marca (laranja neste exemplo).
Barra de progresso de mídia circular mostrando a faixa ativa usando as cores padrão, de terceiros e de destaque do OEM
Exemplos de estilos de cor padrão, de apps e de destaque do OEM aplicados a um indicador de progresso circular

O Guia de integração da biblioteca de IU do carro fornece orientações ao OEM para personalizar componentes.

Para ver orientações específicas sobre o uso de cores para personalizar componentes, acesse Cor.


Exemplos

Indicador de progresso de mídia linear em ação
Indicador de progresso de mídia linear na visualização de reprodução de app de mídia
Indicador de progresso de mídia circular em ação
Aqui, o indicador de progresso de mídia circular aparece no controle de reprodução minimizado. O controle minimizado sobrepõe a tela de uma playlist.