Para páginas que contêm mais informações do que a altura da tela ou exigem jornadas mais longas e imersivas, use uma visualização de rolagem.
Componentes de layout de rolagem predefinidos
Caixa de diálogo com pilha de botões na parte de baixo
Caixa de diálogo com pilha de botões na parte de baixo
Caixa de diálogo com dois botões na parte de baixo
Exemplos de layouts de rolagem personalizados
As telas de apps com rolagem não se limitam aos componentes definidos, mas podem combinar elementos para criar o layout desejado. Preste atenção no comprimento de uma tela de rolagem e no uso de margens e padding responsivos (porcentagem) para verificar se os componentes se adaptam ao tamanho de tela disponível.
Conteúdo extra em telas maiores
Lista de botões: botões de ícone com tamanho de ícone de 26 dp
Lista de botões: botões de app com tamanho de ícone de 32 dp
Lista de botões: botões de app com tamanho de ícone de 36 dp
Lista de botões com botões de alternância
Lista mista com elementos de uma linha
Lista mista com elementos de várias linhas
Lista de cards com cards de apps
Lista de cards com cards de título
Lista de cards com cards personalizados
Lista de texto
Comportamento responsivo e adaptativo
Todos os componentes da biblioteca Compose se adaptam automaticamente ao tamanho maior da tela, ganhando largura e altura. As visualizações de rolagem que usam práticas de design responsivo geralmente se adaptam a uma variedade de tamanhos de tela. No entanto, em alguns casos especiais, é possível usar um ponto de interrupção para substituir dimensões e aumentar layouts que expandem a funcionalidade, melhoram a visibilidade ou fazem com que o conteúdo se ajuste melhor à tela.
Para verificar se os parâmetros responsivos estão definidos corretamente, use a seguinte lista de verificação:
- Aplique as margens recomendadas na parte superior, inferior e nas laterais.
- Defina as margens externas em valores percentuais para evitar o corte no início e no fim do contêiner rolável.
- Aplique margens em valores DP fixos entre elementos da interface.
- Considere aplicar um ponto de interrupção em 225 dp para apresentar mais conteúdo ou tornar o conteúdo atual mais fácil de visualizar em tamanhos de tela maiores.
