Design de ponta a ponta

Um app de ponta a ponta aproveita toda a tela renderizando a interface abaixo das barras de sistema.

Figura 1. Esquerda Um app que não é de ponta a ponta. Direita. Um app de ponta a ponta.

Aprendizados

  • Renderize o plano de fundo e o conteúdo de rolagem abaixo das barras de sistema para uma experiência de ponta a ponta.
  • Evite adicionar gestos de toque ou destinos de arrastar em encartes do sistema, porque eles entram em conflito com a navegação por gestos e de ponta a ponta.
Figura 2. Um app com encartes de gestos destacados em verde.

Mostrar o conteúdo atrás das barras de sistema

Com o recurso de ponta a ponta, é possível desenhar a interface abaixo das barras de sistema para uma experiência imersiva.

Um app pode resolver sobreposições no conteúdo reagindo a recuos. Os recuos descrevem o quanto o conteúdo do app precisa ser preenchido para evitar a sobreposição com barras de sistema ou com recursos de dispositivo físico, como cortes da tela. Leia sobre como oferecer suporte a ponta a ponta e processar encartes no Compose e no Views.

Conheça os seguintes tipos de encartes ao projetar casos de uso de ponta a ponta:

  • Os encartes de barra de sistema se aplicam à interface que pode ser tocada e não deve ser obscurecida visualmente pelas barras de sistema.
  • As insets de gestos do sistema se aplicam às áreas de navegação por gestos usadas pelo SO que têm prioridade sobre seu app.
  • As margens do corte da tela se aplicam a áreas do dispositivo que se estendem até a superfície da tela, como o corte da câmera.

Considerações sobre a barra de status

Consulte as barras de sistema do Android para orientações básicas de design. A seção a seguir discute outras considerações sobre a barra de status.

Como rolar conteúdo

As barras de apps na parte de cima precisam ser recolhidas ao rolar a tela. Saiba como recolher a TopAppBar do Material 3. No Material 3, as pequenas barras de apps da parte de cima podem ser recolhidas até a altura da barra de status ou rolar para fora da tela. As barras de apps na parte de cima médias e grandes podem ser recolhidas para uma barra de apps menor. Consulte a orientação do Material.

O que fazer

Reduza a barra de apps superior pequena à altura da barra de status se ela estiver fixa.

O que fazer

Adicione um gradiente de cor de plano de fundo correspondente se a barra de apps pequena na parte de cima não for fixa.

As barras de status precisam ser translúcidas quando a interface rola por baixo para que os ícones não pareçam desordenados. Para isso, primeiro crie uma interface rolável de ponta a ponta implementando as etapas na documentação LazyColumn ou RecyclerView. Em seguida, verifique se a barra de sistema é translúcida fazendo uma das seguintes ações:

  • Confie na proteção automática da TopAppBar do Material 3 ao rolar, se aplicável.
  • Crie um elemento combinável de gradiente personalizado ou use GradientProtection para Views. Para mais informações sobre como fazer isso no Compose, consulte Proteção da barra de sistema.
Figura 3. Um app com encartes de gestos destacados em verde.

Para layouts adaptáveis, verifique se há proteções separadas para painéis com cores de plano de fundo diferentes.

O que não fazer

Ter proteção de gradiente que não corresponde ao plano de fundo de cada painel

O que fazer

Ter uma proteção de gradiente que corresponda ao plano de fundo de cada painel.

Da mesma forma, os gaveteiros de navegação também precisam ter uma proteção separada do restante do app.

Figura 4. Uma barra de status translúcida para a gaveta de navegação. Essa imagem mostra a proteção da barra de status para a gaveta de navegação, mas não para o app.

Não acumule proteções da barra de status. Por exemplo, não use a proteção integrada do Material 3 TopAppBar e uma proteção personalizada.

Consulte as barras de sistema do Android para orientações básicas sobre o design da barra de navegação. A seção a seguir inclui outras considerações sobre a barra de navegação.

Como rolar conteúdo

As barras de apps na parte de baixo precisam ser recolhidas ao rolar a tela.

O que fazer

Adicione uma máscara de barra de sistema para a navegação com três botões quando a barra de apps inferior for animada.

O que fazer

Mantenha a navegação por gestos transparente e não adicione uma tela escura extra.

Corte da tela

Os cortes na tela podem afetar a aparência da sua interface. Os apps precisam processar os encartes de corte da tela para que partes importantes da interface não sejam renderizadas abaixo do corte.

O que fazer

Faça o encadeamento da interface crítica usando encadeamentos de corte da tela.

O que não fazer

Coloque a interface crítica na borda da tela.

No entanto, os planos de fundo sólidos da barra de apps precisam ser renderizados no corte da tela, conforme mostrado na imagem a seguir.

Figura 5. Os planos de fundo sólidos da barra de apps são renderizados no corte da tela, enquanto a interface importante é inserida.

Verifique se os carrosséis horizontais são mostrados no corte da tela.

Figura 6. Uma exibição horizontal de ponta a ponta, em que o carrossel rola pelo corte da tela.

Leia sobre como oferecer suporte a cortes de tela no Compose e nas Views.

Outras orientações

Em geral, planos de fundo e linhas divisórias também devem ser desenhados de ponta a ponta, enquanto conteúdo como texto e botões precisa ser inserido para evitar a interface do sistema e elementos de hardware.