Barras do sistema Android

As barras de status, de legenda e de navegação são as barras de sistema. Eles mostram informações importantes, como nível de bateria, horário e alertas de notificação, e oferecem interação direta com o dispositivo de qualquer lugar.

Sempre leve em consideração a presença e o destaque das barras de sistema, seja ao projetar layouts, métodos de entrada ou outros recursos do dispositivo.

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

Aprendizados

  • Inclua barras de sistema nos layouts para diferentes tamanhos de tela e formatos. Considere as zonas seguras da interface, as interações do sistema, os métodos de entrada, os cortes da tela, as barras de status, as barras de legenda, as 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 preencher toda a tela.

  • Use WindowInsets para processar corretamente as intrusões da barra de sistema e garantir que o conteúdo não seja ocultado 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 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 forma 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 do app ou um símbolo que represente 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 ocupe toda a tela. Em seguida, defina o estilo dos ícones da barra de sistema para que eles tenham o contraste adequado.

A exibição de ponta a ponta é aplicada no Android 15, tornando a barra de status transparente por padrão. Chame enableEdgeToEdge() para ter compatibilidade com versões anteriores.

Na imagem à esquerda, a barra de status é transparente, e o plano de fundo verde da TopAppBar é desenhado atrás dela.

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

As barras de status transparentes são ideais quando a IU 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 por baixo 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 que abrange 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.
  • O botão home sai do app e vai para a tela inicial do dispositivo.
  • A Visão geral mostra os apps ativos e os apps recentes que não foram dispensados.

Os usuários podem escolher entre várias configurações de navegação, incluindo por gestos e 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 um único identificador de gesto para acessibilidade. Os usuários interagem deslizando da borda esquerda ou direita da tela para voltar e de baixo para cima para acessar a tela inicial. Deslizar para cima e manter a tela pressionada abre a visão geral.

A navegação por gestos é um padrão de navegação mais escalonável para design 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:

  • Suporte a conteúdo de ponta a ponta.
  • Evite adicionar interações ou áreas de toque em encartes de navegação por gestos.

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

Figura 7. Barra de navegação por gestos.

Navegação adaptável

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

Em layouts adaptáveis, considere como as barras de 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 de dobráveis.

Para mais informações, consulte Criar navegação adaptativa.

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

Definir um estilo de navegação

O Android lida com 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 de 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 no Activity, o sistema vai mostrar uma barra de navegação por gestos transparente e aplicar 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 de um conteúdo claro e vice-versa.

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

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

O que fazer

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

O que não fazer

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

Modos de botão

Depois de segmentar o Android 15 ou chamar enableEdgeToEdge no 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 falso.

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 falso e preencha as barras de apps inferiores para desenhar abaixo das barras de navegação do sistema, como mostrado nas figuras 7, 8 e 9. Consulte Proteção da barra de sistema para mais informações.

Use uma barra de navegação translúcida com três botões para rolar o conteúdo. Para mais informações sobre as 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 projetar layouts adaptáveis, considere como as barras do sistema interagem com seu conteúdo. Use WindowInsets para garantir que a interface não seja ocultada pelas barras de sistema em telas grandes, dobráveis e janelas de apps nos modos de várias janelas e modo janela para computador.

Quando o app estiver em tela cheia, 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, talvez o usuário não consiga 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 a exibição de ponta a ponta.

Figura 11. Exemplos de cortes da tela.

Modo imersivo

Figura 12. Modo imersivo mostrando uma experiência em tela cheia em um dispositivo móvel no modo paisagem.

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