Barras do sistema Android

A barra de status, a barra de legenda e a barra de navegação são as barras do sistema. Elas mostram informações importantes, como o Nível de bateria, a hora e alertas de notificação, e oferecem interação direta com o dispositivo de qualquer lugar.

Sempre considere a presença e o destaque das barras de sistema, seja ao criar layouts, métodos de entrada ou outros recursos do dispositivo.

Figura 1. Imagens atrás das barras do sistema.

Aprendizados

  • Inclua barras do sistema nos layouts para diferentes tamanhos de tela e formatos. Considere zonas seguras da interface, interações do sistema, métodos de entrada, cortes da tela, barras de status, barras de legenda, barras de navegação e outros recursos do dispositivo.

  • Mantenha as barras de status e de navegação do sistema transparentes ou translúcidas e mostre o conteúdo atrás delas para ir de ponta a ponta.

  • Use WindowInsets para processar corretamente as intrusões da barra de sistema e garantir que o conteúdo não fique oculto nos layouts adaptáveis.

  • Use layouts canônicos, que usam o espaço da tela de maneira eficiente.

Barra de status

A barra de status contém ícones de notificação e ícones do sistema. O usuário interage com a barra de status puxando-a para baixo para acessar a aba de notificações. Os estilos da barra de status podem ser transparentes ou translúcidos.

Figura 2. Região da barra de status destacada acima da barra de apps superior.

Ícones da barra de status

Os ícones da barra de status podem aparecer de maneira diferente dependendo do contexto, da hora do dia, das preferências ou temas definidos pelo usuário e de outros parâmetros. Para mais informações, consulte Ícones da barra de sistema.

Figura 3. Ícones da barra de status nos temas claro e escuro.

Quando uma notificação chega, um ícone geralmente aparece na barra de status. Isso indica ao usuário que há algo para ver na gaveta de notificações. Pode ser o ícone ou símbolo do app para representar o canal. Consulte Design de notificações.

Figura 4. Ícone de notificação na barra de status.

Definir o estilo da barra de status

Deixe a barra de status transparente ou translúcida para garantir que o conteúdo do app abranja toda a tela. Em seguida, defina o estilo dos ícones da barra de sistema para que eles tenham o contraste adequado.

O recurso de ponta a ponta é aplicado no Android 15, tornando a barra de status transparente por padrão. Chame enableEdgeToEdge() para oferecer compatibilidade com versões anteriores.

Na imagem do lado esquerdo a seguir, a barra de status é transparente e o plano de fundo verde da TopAppBar é mostrado atrás da barra de status.

Figura 5. Use o recurso de ponta a ponta para melhorar o conteúdo. Não use barras do sistema opacas.

As barras de status transparentes são ideais quando a interface não aparece abaixo da barra de status ou quando uma imagem é mostrada abaixo dela. As barras de status translúcidas são ideais quando a interface rola abaixo da barra de status. Para mais informações sobre a proteção de gradiente , consulte Design de ponta a ponta.

Figura 6. Um app de ponta a ponta com proteção de gradiente de dois tons abrangendo dois painéis atrás da barra de status do sistema.

O Android permite que os usuários controlem a navegação usando os controles "Voltar", "Início" e "Visão geral":

  • "Voltar" retorna à visualização anterior.
  • "Início" sai do app e vai para a tela inicial do dispositivo.
  • "Visão geral" mostra os apps ativos e os apps recentes não dispensados.

Os usuários podem escolher entre várias configurações de navegação, incluindo navegação por gestos e navegação adaptável. Para oferecer uma experiência ideal ao usuário, considere vários tipos de navegação.

Navegação por gestos

A navegação por gestos não usa botões para voltar, ir para a tela inicial e acessar a visão geral. Em vez disso, ela mostra uma única alça de gesto para facilitar. Os usuários interagem deslizando da borda esquerda ou direita da tela para voltar e de baixo para cima para ir para a tela inicial. Deslizar para cima e manter pressionado abre a visão geral.

A navegação por gestos é um padrão de navegação mais escalonável para criar em dispositivos móveis e telas maiores. Para oferecer a melhor experiência do usuário, considere a navegação por gestos fazendo o seguinte:

  • Oferecer suporte a conteúdo de ponta a ponta.
  • Evitar adicionar interações ou destinos de toque em margens de navegação por gestos.

Para mais informações, consulte Adicionar suporte à navegação por gestos.

Figura 7. Barra de navegação com alça de gesto.

Navegação adaptável

Outro padrão de navegação comum no Android é alternar entre uma coluna de navegação e uma barra de navegação, dependendo da classe de tamanho da janela da tela. Os componentes de navegação adaptável no Jetpack Compose processam vários formatos e impedem que as barras do sistema interfiram no layout dos componentes de navegação.

Em layouts adaptáveis, considere como as barras do sistema podem se comportar ou ser estilizadas de maneira diferente em vários contextos, como tamanhos de janela compactos ou expandidos ou diferentes posições dobráveis.

Para mais informações, consulte Criar navegação adaptável.

Os ícones de navegação também podem aparecer de maneira diferente dependendo das preferências ou temas definidos pelo usuário. Para mais informações, consulte Ícones da barra de sistema.

Definir um estilo de navegação

O Android processa a proteção visual da interface do usuário no modo de navegação por gestos e nos modos de botão. O sistema aplica a adaptação de cores dinâmicas, em que o conteúdo das barras do sistema muda de cor com base no conteúdo atrás delas.

Modo de navegação por gestos

Depois de segmentar o Android 15 ou chamar enableEdgeToEdge na Activity, o sistema mostra uma barra de navegação por gestos transparente e aplica a adaptação de cores dinâmicas. No exemplo a seguir, a alça na barra de navegação muda para uma cor escura se for colocada acima do conteúdo claro e vice-versa.

Figura 8. Adaptação de cores dinâmicas.

As barras de navegação por gestos transparentes são sempre recomendadas.

O que fazer

Mantenha a barra de navegação por gestos transparente.

O que não fazer

Adicionar um plano de fundo à barra de navegação por gestos.

Modos de botão

Depois de segmentar o Android 15 ou chamar enableEdgeToEdge na Activity, o sistema aplica uma tela translúcida atrás das barras de navegação de botões, que pode ser removida definindo Window.setNavigationBarContrastEnforced() como "false".

Figura 9. Adaptação de cores dinâmicas, com uma tela transparente.

Use barras de navegação transparentes de três botões quando houver uma barra de apps inferior ou uma barra de navegação de apps inferior, ou quando a interface não rolar abaixo da barra de navegação de três botões. Para ter uma barra de navegação transparente, defina Window.setNavigationBarContrastEnforced() como "false" e preencha as barras de apps inferiores para mostrar abaixo das barras de navegação do sistema, conforme mostrado nas figuras 7, 8 e 9. Para mais informações, consulte Proteção da barra de sistema.

Use uma barra de navegação translúcida de três botões para rolar o conteúdo. Para mais informações sobre considerações da barra de navegação translúcida, consulte Design de ponta a ponta.

Teclado e navegação

Figura 10. Teclado na tela com barras de navegação.

Cada tipo de navegação reage adequadamente ao teclado na tela para permitir que o usuário realize ações como dispensar ou até mesmo mudar o tipo de teclado. Para garantir uma transição suave que sincronize a transição do app com o teclado deslizando para cima e para baixo na parte de baixo da tela, use WindowInsetsAnimationCompat.

Layouts

Os layouts adaptáveis otimizam o espaço de exibição disponível. Eles organizam a interface do app movendo o conteúdo para painéis secundários ou terciários.

Ao criar layouts adaptáveis, considere como as barras do sistema interagem com o conteúdo. Use WindowInsets para garantir que a interface não fique oculta pelas barras de sistema em telas grandes, dispositivos dobráveis e janelas de apps nos modos de várias janelas e de modo janela para computador.

Quando o app é mostrado de ponta a ponta, verifique se o conteúdo e os controles não estão ocultos pela interface do sistema. Por exemplo, se a barra de navegação cobrir um botão, o usuário não poderá clicar nele.

Para mais informações, consulte Layouts canônicos.

Corte da tela

Um corte da tela é uma área em alguns dispositivos que cria espaço na tela para sensores frontais. Os cortes da tela podem variar dependendo do fabricante. Considere como os cortes da tela vão interagir com o conteúdo, a orientação e o recurso de ponta a ponta.

Figura 11. Exemplos de cortes da tela.

Modo imersivo

Figura 12. Modo imersivo mostrando uma experiência de tela cheia em um dispositivo móvel orientado para paisagem.

Você pode ocultar as barras do sistema quando precisar de uma experiência de tela cheia, por exemplo, quando o usuário estiver assistindo a um filme. O usuário ainda poderá tocar para mostrar as barras do sistema e navegar ou interagir com os controles do sistema. Para mais informações, consulte Conteúdo imersivo e Ocultar as barras do sistema para o modo imersivo.