Juntas, a barra de status e a de navegação são chamadas de barras do sistema. Eles mostram informações importantes, como nível da bateria, hora e alertas de notificação, além de oferecer interação direta com o dispositivo de qualquer lugar.
É fundamental considerar o destaque das barras do sistema, quer você esteja projetando a IU para interações com o SO Android, métodos de entrada ou outros recursos do dispositivo. Mantenha as barras de sistema na parte de cima da maioria das camadas para garantir que elas sejam contabilizadas.
Takeaways
Inclua barras do sistema nos seus designs para considerar zonas de segurança da IU, interações do sistema, métodos de entrada, cortes de tela e outros recursos do dispositivo. Manter as barras do sistema na camada superior garante que elas sejam contabilizadas.
O que fazer: torne as barras do sistema transparentes e mostre 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 ambas as barras como transparentes, confira se as cores delas correspondem à cor do corpo do seu app. Por exemplo, a cor da barra de navegação inferior precisa ser igual à da barra de gestos, e da barra de status de cima à cor do corpo.
Figura 2:conferir se as cores da barra do sistema correspondem à cor do corpo do app. Evite adicionar gestos de toque ou áreas de arrastar em encartes de gestos. Esses conflitos com a navegação por gestos e de ponta a ponta entram em conflito.
Figura 3:encartes de gestos do sistema. Evite colocar áreas de toque nessas áreas
Exiba seu 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 lidar com sobreposições no conteúdo reagindo a 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 físicos do dispositivo, como cortes de tela.
Esteja ciente dos seguintes tipos de encartes ao projetar para casos de uso de ponta a ponta:
- Os encartes de barras de sistema se aplicam à interface que pode ser tocada e que não pode ser visualmente obscurecida pelas barras do sistema.
- Os encartes de gestos do sistema se aplicam a áreas de navegação por gestos usadas pelo sistema e 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 uma notificação chega, 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 estilo personalizado, além de definir transparência e 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á definir o estilo do conteúdo da barra de status como claro ou escuro para ter o contraste ideal.
Cortes de tela e 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
Apresentada no Android 10 (API de nível 29), a navegação por gestos é o tipo 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, acessar a tela inicial e para a visão geral. Em vez disso, ela mostra um único identificador de gesto para affordance. Os usuários interagem deslizando da borda esquerda ou direita da tela para voltar, avançar e subir de baixo até 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 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: voltar, página inicial 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, fornece dois botões para início e retorno.
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ões.
Modo de navegação por gestos: 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. No exemplo a seguir, a alça na barra de navegação vai 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 do sistema (para o nível 29 da API ou mais recente) ou uma barra transparente do sistema (para o nível da 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é mesmo 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
para cima e para baixo na tela.
Modo imersivo
Você pode ocultar as barras do sistema quando precisa de uma experiência em tela cheia, por exemplo, quando o usuário está assistindo um filme. O usuário ainda pode tocar para revelar barras do sistema e a interface para 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.