Scrolling app layouts
Stay organized with collections
Save and categorize content based on your preferences.
For pages that contain more information that extends beyond the height of the
screen, or require longer and more immersive journeys, use a scroll view.
Preset scrolling layout components
Custom scrolling layout examples
Scrolling app screens are not limited to the set components, but can combine
elements to create the layout you want. Be mindful of the length of a scrolling
screen, and the use of responsive (percentage) margins and padding, to verify
that components adapt to the available screen size.
Additional content on larger screens
Mixed list with single-line elements
Mixed list with multi-line elements
Card list with title cards
Card list with custom cards
Responsive and adaptive behavior
All components in the Compose library automatically adapt to the wider screen
size, and gain width and height. Scroll views that use responsive design
practices usually adapt to a range of screen sizes. However, in some special
cases, you can use a breakpoint to override dimensions and augment layouts which
expand functionality, improve glanceability, or make content fit better on
screen.
To verify that responsive parameters are properly defined, use the following
checklist:
- Apply the recommended top, bottom, and side margins.
- Define outer margins in percentage values to prevent clipping at the
beginning and end of the scrollable container.
- Apply margins in fixed DP values between UI elements.
- Consider applying a breakpoint at 225dp to introduce additional content or
make existing content more glanceable when on bigger screen sizes.
Content and code samples on this page are subject to the licenses described in the Content License. Java and OpenJDK are trademarks or registered trademarks of Oracle and/or its affiliates.
Last updated 2025-08-25 UTC.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 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."]]
