Juntas, as barras de status e 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, além de fornecer interação direta com o dispositivo de qualquer lugar.
É fundamental considerar o destaque das barras do sistema, ao projetar uma interface para interações com o SO Android, métodos de entrada ou outros recursos do dispositivo. Mantenha as barras do sistema na parte de cima da maioria das camadas para garantir que elas sejam contabilizadas.
Takeaways
Inclua barras de sistema nos seus designs para considerar zonas de segurança da interface, interações do sistema, métodos de entrada, cortes de tela e outros recursos do dispositivo. Manter as barras de sistema na camada superior garante que elas sejam contabilizadas.
O que fazer: torne as barras do sistema transparentes e organize seu app em tela cheia, continuando a interface abaixo das barras para oferecer uma experiência completa de ponta a ponta.
Se não for possível definir as duas barras como transparentes, verifique se as cores delas correspondem à cor do corpo do app. Por exemplo, combine a cor da barra de navegação inferior com a da barra de gestos e a cor da barra de status superior à cor do corpo.
Figura 2:verificar se as cores da barra do sistema correspondem à cor do corpo do app. Evite adicionar gestos de toque ou destinos de arrastar em encartes de gesto. Esses conflitos com a navegação de borda a borda e por gestos.
Figura 3:encartes de gestos do sistema. Evite colocar áreas de toque nessas áreas
Desenhar o conteúdo atrás das barras do sistema
O recurso de ponta a ponta permite que o Android desenhe a interface abaixo das barras do sistema para uma experiência mais imersiva. Recomendamos o uso de ponta a ponta, porque tornar a barra de navegação transparente é uma solicitação comum dos usuários. Leia sobre como oferecer suporte de ponta a ponta.
Um app pode resolver as sobreposições no conteúdo reagindo aos encartes. Os encartes descrevem quanto o conteúdo do app precisa ser preenchido para evitar a sobreposição com partes da interface do SO Android, como a barra de navegação ou a barra de status, ou com recursos do dispositivo físico, como cortes da tela.
Esteja ciente dos seguintes tipos de encartes ao projetar para casos de uso de ponta a ponta:
- Os encartes das barras de sistema se aplicam à interface que pode ser tocada e que não pode ser coberta visualmente pelas barras do sistema.
- Os encartes de gestos do sistema se aplicam a áreas de navegação por gestos usadas pelo sistema que têm prioridade sobre o app.
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 ao puxá-la para baixo para acessar a aba de notificações.
A barra de status pode 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. Também é possível definir o estilo da barra de status, como nos exemplos a seguir.
Quando chega uma notificação, um ícone geralmente aparece na barra de status. Isso sinaliza 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.
Definir o estilo da barra de status
Defina o estilo do plano de fundo da barra de status como parte do tema do app, com uma cor ou um estilo personalizado, além de definir a transparência e a opacidade.
<style name="Theme.MyApp">
<item name="android:statusBarColor">
@android:color/transparent
</item>
</style>
Se você definir manualmente a cor do plano de fundo, poderá estilizar o conteúdo da barra de status como claro ou escuro para ter o contraste ideal.
Cortes de tela e a barra de status
Um corte da tela é uma área em alguns dispositivos que se estende até a superfície da tela para fornecer espaço a sensores frontais. Isso pode afetar a aparência das barras de status. Os cortes da tela podem variar de acordo com o fabricante.
Leia sobre como oferecer suporte a cortes de tela.
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 tela inicial sai do app para a tela inicial do dispositivo.
- A visão geral mostra que os apps estão abertos e foram abertos recentemente.
Os usuários podem escolher entre várias configurações da barra de navegação, incluindo a navegação por gestos (recomendado) e a navegação com três botões.
Navegação por gestos
Introduzida no Android 10 (nível 29 da API), a navegação por gestos é o tipo de navegação recomendado, embora não seja possível substituir a preferência do usuário. A navegação por gestos não usa botões para voltar, "Início" e "Visão geral", mostrando uma única alça de gesto para affordance. Os usuários interagem com o dedo deslizando da borda esquerda ou direita da tela para voltar, avançar, de baixo para cima e voltar para a tela inicial. Deslizar para cima e segurar abre a visão geral.
A navegação por gestos é um padrão de navegação mais escalonável para projetar para dispositivos móveis e telas maiores. Para oferecer a melhor experiência do usuário, considere a navegação por gestos:
- Suporte a conteúdo de ponta a ponta
- Evite adicionar interações ou áreas de toque em encartes da navegação por gestos.
Leia sobre a implementação da 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, para página inicial e para 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, fornece dois botões para iniciar e voltar.
Definir um estilo de navegação
O exemplo a seguir mostra como implementar um estilo de navegação.
<style name="Theme.MyApp">
<item name="android:navigationBarColor">
@android:color/transparent
</item>
</style>
O Android processa toda a proteção visual da interface do usuário no modo de navegação por gestos ou nos modos de botão.
Modo de navegação por gestos: o sistema aplica a adaptação dinâmica de cores, em que o conteúdo das barras de sistema muda de cor com base no conteúdo por trás delas. No exemplo a seguir, a alça na barra de navegação mudará para uma cor escura se for colocada acima do conteúdo claro e vice-versa.
Figura 15:adaptação dinâmica de cores Modos de botão: o sistema aplica um scrim translúcido atrás das barras de sistema (para o nível de API 29 ou mais recente) ou uma barra de sistema transparente (para o nível de API 28 ou anterior).
Figura 16:adaptação dinâmica de cores, em que as barras do sistema mudam de cor com base no conteúdo atrás delas.
Teclado e navegação
Cada tipo de navegação reage de forma adequada ao teclado na tela para
permitir que o usuário execute ações como dispensar ou até mudar o
tipo de teclado. Para garantir uma transição suave do teclado, use
WindowInsetsAnimationCompat para garantir uma transição suave que sincronize a transição do app com o teclado deslizando
de baixo para cima na tela.
Modo imersivo
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 pode tocar para revelar barras do sistema e a interface, a fim de 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 de sistema para o modo imersivo.