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 de ponta a ponta.

Aprendizados

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

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

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

Um app pode resolver sobreposições no conteúdo reagindo aos encartes. Os recuos descrevem 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. Saiba como oferecer suporte de ponta a ponta e processar encartes no Compose e nas visualizações.

Esteja ciente dos seguintes tipos de encartes ao criar 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 visualmente obscurecida pelas barras de sistema.
  • Os encartes de gestos do sistema se aplicam a áreas de navegação por gestos usadas pelo SO que têm prioridade sobre o app.
  • Os encartes 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 de barras de sistema. A seção a seguir discute outras considerações sobre a barra de status.

Como rolar conteúdo

As barras de apps de cima precisam ser recolhidas durante a rolagem. Aprenda a recolher a TopAppBar do Material 3. No Material 3, as barras de apps de cima pequenas podem ser recolhidas até a altura da barra de status ou rolar para fora da tela. As barras de apps de cima médias e grandes podem ser recolhidas para uma barra de apps menor. Consulte as orientações do Material.

O que fazer

Recolha a barra de apps de cima pequena até a altura da barra de status se ela for fixa.

O que fazer

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

As barras de status precisam ser translúcidas quando a interface rola por baixo, para que os ícones da barra de status não pareçam desordenados. Para fazer isso, primeiro crie uma interface rolável de ponta a ponta implementando as etapas na documentação do LazyColumn ou RecyclerView. Em seguida, verifique se a barra de sistema é 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 gradiente combinável personalizado 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 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 corresponde 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 de barra de status, por exemplo, usando 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 de barras 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 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 de três botões quando a barra de apps de baixo for animada.

O que fazer

Mantenha a navegação por gestos transparente e não adicione outra tela de proteção.

Corte da tela

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

O que fazer

Insira a interface essencial usando encartes de corte da tela.

O que não fazer

Colocar a interface essencial 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 essencial é inserida.

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

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

Saiba como oferecer suporte a cortes da tela no Compose e nas visualizações.

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.