Juntas, a barra de status, a barra de legenda e a barra de navegação são chamadas de barras do sistema. Eles mostram informações importantes, como o nível da bateria, a hora e alertas de notificação, e permitem a interação direta com o dispositivo de qualquer lugar.
É essencial considerar a importância das barras do sistema, seja para projetar uma interface para interações com o SO Android, métodos de entrada ou outros recursos do dispositivo.
Aprendizados
Inclua barras do sistema ao projetar seu app. Considere as zonas seguras da interface, as interações do sistema, os métodos de entrada, os recortes de 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 dessas barras para que ele apareça de ponta a ponta.
Barra de status
No Android, a barra de status contém ícones de notificação e do sistema. O usuário interage com a barra de status arrastando-a para baixo para acessar a sombra de notificação. Os estilos da barra de status podem ser transparentes ou translúcidos.
Ícones da barra de status
Os ícones da barra de status podem aparecer de maneira diferente dependendo do contexto, do horário, das preferências ou temas definidos pelo usuário e de outros parâmetros. Para mais informações, consulte Ícones da barra do sistema.
Quando uma notificação chega, um ícone geralmente aparece na barra de status. Isso sinaliza ao usuário que há algo para conferir na gaveta de notificações. Ele pode ser o ícone ou símbolo do app para representar o canal. Consulte Design de notificações.
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 do 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 oferecer compatibilidade com versões anteriores.
Na imagem à esquerda, a barra de status é transparente, e o
plano de fundo verde do TopAppBar é exibido atrás dela.
Barras de status transparentes são ideais quando a interface não aparece abaixo da barra de status ou quando uma imagem é exibida abaixo dela. 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 borda a borda.
Barra de navegação
O Android permite que os usuários controlem a navegação usando os controles "Voltar", "Início" e "Visão geral":
- "Voltar" retorna diretamente à visualização anterior.
- A página inicial 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 da barra de navegação, incluindo a navegação por gestos (recomendada) e a navegação de três botões. Para oferecer a melhor experiência, considere vários tipos de navegação.
Navegação por gestos.
Recomendamos que você use a navegação por gestos, a menos que o usuário selecione outra opção nas preferências. A navegação por gestos não usa botões para voltar, ir para a tela inicial e a visão geral. Em vez disso, ela mostra um único gesto para facilitar o uso. Os usuários interagem deslizando da borda esquerda ou direita da tela para voltar e para cima da parte de baixo para acessar a tela inicial. Deslize para cima e mantenha a tela pressionada para abrir a visão geral.
A navegação por gestos é um padrão de navegação mais escalonável para projetar em telas móveis e 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 destinos de toque em inserções de navegação por gestos.
Para mais informações, consulte Adicionar suporte à navegação por gestos.
Navegação com três botões.
A navegação com três botões oferece três botões para voltar, home e visão geral.
Outras variações da barra de navegação
Dependendo da versão do Android e do dispositivo, outras configurações da barra de navegação podem estar disponíveis para os usuários. A navegação com dois botões, por exemplo, oferece dois botões para a tela inicial e para voltar.
Ícones da barra de navegação
Os ícones da barra 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 barra 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 dinâmica de cores, em que o conteúdo das barras do sistema muda de cor com base no conteúdo por trás delas.
Modo de navegação por gestos
Depois de segmentar o Android 15 ou chamar enableEdgeToEdge no Activity, o
sistema desenha uma barra de navegação por gestos transparente e aplica a adaptação de
cor dinâmica. No exemplo abaixo, a alça na barra de navegação muda
para uma cor escura se for colocada acima do conteúdo claro e vice-versa.
Barras de navegação por gestos transparentes são sempre recomendadas.
O que fazer
O que não fazer
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.
Recomendamos barras de navegação com três botões transparentes quando houver uma barra de app
inferior ou uma barra de navegação do app inferior ou quando a interface não rolar abaixo
da barra de navegação com três botões. Para ter uma barra de navegação transparente, defina
Window.setNavigationBarContrastEnforced() como falso e reforce as barras de apps inferiores para
desenhar abaixo das barras de navegação do sistema, conforme mostrado nas Figuras 7, 8 e 9. Consulte
Proteção da barra de sistema para mais informações.
Use uma 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 .
Teclado e 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 da parte de baixo da tela, use
WindowInsetsAnimationCompat.
Corte da tela
Um corte da tela é uma área em alguns dispositivos que se estende até a superfície da tela para fornecer espaço para sensores frontais. Os recortes da tela podem variar de acordo com o fabricante. Considere como os recortes da tela vão interagir com o conteúdo, a orientação e a tela cheia.
Modo imersivo
É possível ocultar as barras do sistema quando você precisar de uma experiência em tela cheia, por exemplo, quando o usuário estiver assistindo um filme. O usuário ainda precisa poder tocar para revelar as barras do sistema e navegar ou interagir com os controles do sistema. Saiba mais sobre como projetar para modos de tela cheia ou leia sobre como ocultar as barras do sistema para o modo imersivo.