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. Lado esquerdo. Um app que não é de ponta a ponta. Certo. Um app que é 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 de conteúdo reagindo a encartes. 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 nas Views.

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

  • Os encartes da 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 a áreas de navegação por gestos usadas pelo SO que têm prioridade sobre seu app.
  • As margens de 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 barras de apps pequenas 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 de rolagem de ponta a ponta implementando as etapas na documentação LazyColumn ou RecyclerView. Em seguida, verifique se a barra de sistema está translúcida fazendo uma destas 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. Para mais informações, 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 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. Esta imagem mostra a proteção da barra de status para o 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 da TopAppBar do Material 3 e uma proteção personalizada.

Consulte as barras de sistema do Android para orientações básicas de 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 durante a rolagem.

O que fazer

Adicione uma tela de proteção da barra de sistema para a navegação com três botões quando a barra de apps inferior for animada para fora.

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 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

Insira a interface crítica usando encartes 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.

Outras orientações

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