Barras do sistema Android

Juntas, a barra de status e a barra de navegação são chamadas de barras do sistema. Eles exibem informações importantes como o nível da bateria, a hora e enviar alertas de notificação e interagir diretamente com o dispositivo em qualquer lugar.

É fundamental considerar o destaque das barras do sistema, projetar IUs para interações com o SO Android, métodos de entrada ou outros recursos do dispositivo. Manter as barras de sistema no topo da maioria das camadas para garantir eles são contabilizados.

Figura 1:imagens atrás das barras de sistema

Aprendizados

  • Incluir barras de sistema nos designs para considerar as zonas de segurança da interface, o sistema interações, métodos de entrada, cortes da tela e outros recursos do dispositivo. Mantenha as barras de sistema na camada superior para garantir que elas sejam consideradas.

  • O que fazer: deixar as barras do sistema transparentes e posicionar o app em tela cheia, continuar a interface sob as 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 combinar com a cor do corpo do seu app. Por exemplo, fazer a correspondência com a parte inferior a cor da barra de navegação com a cor da barra de gestos e a barra de status superior cor com a 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 alvos de arrastar abaixo de encartes de gesto. esses entrar em conflito com a navegação de ponta a ponta e por gestos.

    Figura 3. Encartes de gestos do sistema. Evite colocar o toque metas nessas áreas

Desenhar o conteúdo por trás das barras do sistema

O recurso de ponta a ponta permite que o Android desenhe a interface abaixo das barras de sistema para uma experiência mais imersiva. Recomendamos o uso de ponta a ponta porque tornar a transparente é uma solicitação comum dos usuários. (Leia sobre como são compatíveis com borda a borda.

Um app pode resolver sobreposições no conteúdo reagindo a encartes. Os encartes descrevem quanto do conteúdo do app precisa ser preenchido para evitar sobreposição com partes da interface do SO Android, como a barra de navegação ou de status, ou com recursos de dispositivos físicos, como cortes da tela;

Preste atenção aos seguintes tipos de encarte ao projetar para uso de ponta a ponta casos:

  • Os encartes das barras de sistema se aplicam à interface que pode ser tocada e não pode ser visualmente obscurecidos pelas barras do sistema.
  • Os encartes de gestos do sistema se aplicam às áreas de navegação por gestos usadas pelo sistema. que têm prioridade sobre seu app.

Barra de status

No Android, a barra de status contém ícones de notificação e do sistema. A o usuário interage com a barra de status puxando-a para baixo para acessar a notificação sombra.

Figura 4:região da barra de status destacada na parte de cima da barra de apps

A barra de status pode aparecer de forma diferente dependendo do contexto, hora do dia, preferências ou temas definidos pelo usuário e outros parâmetros. Também é possível definir estilo da barra de status, como nos exemplos a seguir.

Figura 5. Barra de status no tema claro e escuro.

Confira se o conteúdo do app cobre toda a tela, agora que de ponta a ponta está obrigatórios. Use barras de sistema transparentes com conteúdo de ponta a ponta, como mostrado no exemplo a seguir.

Figura 6. Barras transparentes usando o recurso de ponta a ponta, ideal para destacar seu conteúdo usando o maior espaço na tela.


Figura 7. Ajustar o estilo das barras de sistema para melhorar o conteúdo ou combinar com o do app branding. Não deixe as barras do sistema definidas com os atributos padrão.

Quando uma notificação chega, um ícone geralmente aparece na barra de status. Isso sinais para o usuário de que há algo a 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 8:ícone de notificação na barra de status

Definir o estilo da barra de status

Estilizar o plano de fundo da barra de status como parte do tema do app, com uma cor personalizada ou estilo, 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á definir o estilo do status o conteúdo da barra como claro ou escuro para um contraste ideal.

Cortes da tela e barra de status

Um corte da tela é uma área em alguns dispositivos que se estende até a tela para dar espaço aos sensores frontais. Pode afetar a aparência de barras de status. Os cortes da tela podem variar de acordo com o fabricante.

Leia sobre como oferecer suporte a cortes da tela.

Figura 9:exemplos de cortes da tela

O Android permite que os usuários controlem a navegação usando os controles de retorno, início e visão geral:

  • Voltar retorna diretamente à visualização anterior.
  • A tela inicial sai do app e vai 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 gestos (recomendado) e navegação com três botões.

Navegação por gestos.

Introduzido no Android 10 (nível 29 da API), a navegação por gestos é a opção recomendada tipo de navegação, embora não seja possível substituir a preferência do usuário. Gesto a navegação não usa botões para voltar, página inicial e visão geral, mostrando um alça de gesto única para affordance. Os usuários interagem deslizando da esquerda para a direita ou borda direita da tela para voltar e avançar e subir de baixo para cima para casa. 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 em em dispositivos móveis e em telas maiores. Para oferecer a melhor experiência ao usuário, considere navegação por gestos:

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

Leia sobre a implementação da navegação por gestos.

Figura 10:barra de navegação da alça de gestos

Navegação com três botões.

A navegação com três botões oferece três botões para voltar, página inicial e visão geral.

Figura 11:barra de navegação com três botões

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 disponíveis para seus usuários. A navegação com dois botões, por exemplo, oferece dois para os botões Home e Voltar.

Figura 12:barra de navegação com dois botões

Definir um estilo de navegação

O exemplo abaixo mostra como implementar um estilo de navegação.

<style name="Theme.MyApp">
  <item name="android:navigationBarColor">
    @android:color/transparent
  </item>
</style>

O Android gerencia toda a proteção visual da interface do usuário em gestos no modo de navegação ou nos modos de botões.

  • Modo de navegação por gestos: o sistema aplica a adaptação dinâmica de cores, quais conteúdos das barras do sistema mudam de cor com base no conteúdo atrás deles. 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 13:adaptação dinâmica de cores.
  • Modos de botão: o sistema aplica um scrim translúcido atrás do sistema. barras (para API de nível 29 ou superior) ou uma barra de sistema transparente (para nível de API 28 ou inferior).

    Figura 14:adaptação dinâmica de cores, em que as barras de sistema mudam de cor com base no conteúdo por trás delas

Teclado e navegação

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

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

Modo imersivo

Figura 16:modo imersivo mostrando uma experiência em tela cheia. em um dispositivo móvel com orientação paisagem.

Você pode ocultar barras de sistema quando precisar de uma experiência em tela cheia, por exemplo quando o usuário está assistindo a um filme. O usuário ainda poderá tocar para revelar barras de sistema e interface para navegar ou interagir com os controles do sistema. Saiba mais sobre como projetar para os modos de tela cheia ou leia sobre como ocultar as barras de sistema para o modo imersivo.