Layouts de apps de rolagem
Mantenha tudo organizado com as coleções
Salve e categorize o conteúdo com base nas suas preferências.
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
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 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
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.
O conteúdo e os exemplos de código nesta página estão sujeitos às licenças descritas na Licença de conteúdo. Java e OpenJDK são marcas registradas da Oracle e/ou suas afiliadas.
Última atualização 2025-08-25 UTC.
[[["Fácil de entender","easyToUnderstand","thumb-up"],["Meu problema foi resolvido","solvedMyProblem","thumb-up"],["Outro","otherUp","thumb-up"]],[["Não contém as informações de que eu preciso","missingTheInformationINeed","thumb-down"],["Muito complicado / etapas demais","tooComplicatedTooManySteps","thumb-down"],["Desatualizado","outOfDate","thumb-down"],["Problema na tradução","translationIssue","thumb-down"],["Problema com as amostras / o código","samplesCodeIssue","thumb-down"],["Outro","otherDown","thumb-down"]],["Última atualização 2025-08-25 UTC."],[],[],null,["# Scrolling app layouts\n\nFor pages that contain more information that extends beyond the height of the\nscreen, or require longer and more immersive journeys, use a scroll view.\n\nPreset scrolling layout components\n----------------------------------\n\n### Dialog with bottom button stack\n\n\u003cbr /\u003e\n\n### Dialog with bottom button stack\n\n\u003cbr /\u003e\n\n### Dialog with bottom double buttons\n\n\u003cbr /\u003e\n\nCustom scrolling layout examples\n--------------------------------\n\nScrolling app screens are not limited to the set components, but can combine\nelements to create the layout you want. Be mindful of the length of a scrolling\nscreen, and the use of responsive (percentage) margins and padding, to verify\nthat components adapt to the available screen size. \n\n### Additional content on larger screens\n\n\u003cbr /\u003e\n\n### Button list: Icon buttons with icon size 26dp\n\n\u003cbr /\u003e\n\n### Button list: App buttons with icon size 32dp\n\n\u003cbr /\u003e\n\n### Button list: App buttons with icon size 36dp\n\n\u003cbr /\u003e\n\n### Button list with toggle buttons\n\n\u003cbr /\u003e\n\n### Mixed list with single-line elements\n\n\u003cbr /\u003e\n\n### Mixed list with multi-line elements\n\n\u003cbr /\u003e\n\n### Card list with app cards\n\n\u003cbr /\u003e\n\n### Card list with title cards\n\n\u003cbr /\u003e\n\n### Card list with custom cards\n\n\u003cbr /\u003e\n\n### Text list\n\n\u003cbr /\u003e\n\nResponsive and adaptive behavior\n--------------------------------\n\nAll components in the Compose library automatically adapt to the wider screen\nsize, and gain width and height. Scroll views that use responsive design\npractices usually adapt to a range of screen sizes. However, in some special\ncases, you can use a breakpoint to override dimensions and augment layouts which\nexpand functionality, improve glanceability, or make content fit better on\nscreen.\n\nTo verify that responsive parameters are properly defined, use the following\nchecklist:\n\n- Apply the recommended top, bottom, and side margins.\n- Define outer margins in percentage values to prevent clipping at the beginning and end of the scrollable container.\n- Apply margins in fixed DP values between UI elements.\n- Consider applying a breakpoint at 225dp to introduce additional content or make existing content more glanceable when on bigger screen sizes."]]
