Design de ponta a ponta

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

Figura 1. Lado esquerdo. Um app que não é de ponta a ponta. Certo. Um app de ponta a ponta.

Aprendizados

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

Desenhar o conteúdo atrás das barras do sistema

O recurso de ponta a ponta permite desenhar a interface abaixo das barras de sistema para uma experiência imersiva.

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

Esteja ciente dos 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 pode ser visualmente obscurecida pelas barras de sistema.
  • As inserções de gestos do sistema se aplicam às áreas de navegação por gestos usadas pelo SO que têm prioridade sobre o 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 ver orientações fundamentais sobre o design delas. A seção a seguir aborda outras considerações sobre a barra de status.

Como rolar conteúdo

As barras de apps na parte de cima precisam ser recolhidas durante a rolagem. Saiba como recolher a TopAppBar do Material 3. No Material 3, as barras de apps pequenas na parte de cima podem ser recolhidas para a altura da barra de status ou sair da tela. As barras de apps superiores médias e grandes podem ser recolhidas para uma barra de apps menor. Consulte as [orientações do Material Design][10].

O que fazer

Reduzir a barra de apps superior pequena para a altura da barra de status se ela for fixa.

O que fazer

Adicione um gradiente de cor de fundo correspondente se a barra de apps superior pequena não for fixa.

As barras de status precisam ser translúcidas quando a interface rola por baixo delas, para que os ícones não pareçam desorganizados. Para isso, primeiro crie uma interface de ponta a ponta rolável implementando as etapas na documentação de LazyColumn ou RecyclerView. Em seguida, verifique se a barra de sistema está translúcida seguindo um destes procedimentos:

  • Use a proteção automática da TopAppBar do Material 3 ao rolar, se aplicável.
  • Crie um gradiente personalizado que pode ser composto ou use GradientProtection para visualizações. Para mais informações sobre como fazer isso no Compose, consulte Proteção da barra de sistema.
Figura 3. Um app com as inserções de gestos destacadas 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 uma proteção de gradiente que não corresponda 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, as gavetas 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 a gaveta de navegação, mas não para o app.

Não empilhe proteções da barra de status, por exemplo, usando a proteção integrada TopAppBar do Material 3 e uma proteção personalizada.

Consulte as barras de sistema do Android para ver orientações fundamentais 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

[BottomAppBar][10] precisa ser recolhido ao rolar usando o parâmetro scrollBehavior.

O que fazer

Adicionamos uma tela de fundo da barra de sistema para a navegação com três botões quando a barra de apps de baixo é removida.

O que fazer

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

No entanto, mantenha [NavigationBar]11 visível ao rolar a tela porque ele não tem um parâmetro scrollBehavior.

Corte da tela

Os cortes da tela podem afetar a aparência da interface. Os apps precisam processar as margens do corte da tela para que partes importantes da interface não sejam desenhadas abaixo dele.

O que fazer

Insira elementos essenciais da interface usando as margens do corte da tela.

O que não fazer

Colocar elementos críticos da interface 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 IU importante é inserida.

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

Figura 6. Uma tela horizontal de ponta a ponta, em que o carrossel passa pelo corte da tela.

Saiba como oferecer suporte a cortes da tela no Compose.

Outras orientações

Em geral, os planos de fundo e as linhas divisórias também precisam ser desenhados 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.