Stay organized with collections
Save and categorize content based on your preferences.
Non-scrolling views focus on glanceable information and offer users value with
little or no interaction. Because of that, it can be challenging to build
responsive behavior into these layouts.
Preset non-scrolling layout components
Dialog
A dialog is a transient overlay that occupies the whole screen. It lets users
perform a single action.
Consider the following points:
Dialogs focus your attention to verify their content is addressed.
Dialogs should be direct in communicating information and dedicated to
completing a task.
Dialogs should appear in response to a user task or an action, with relevant
or contextual information.
Confirmation overlay
The confirmation overlay displays a confirmation message to the user for a short
period. Use this component to capture the user's attention after an action has
been executed.
Open on phone
The open on phone overlay is triggered when the user chooses to continue their
journey on a phone. The overlay has a progress indicator and tells the user when
to check their phone.
Stepper
Steppers provide a full-screen control experience that let users make a
selection from a range of values. They can control the interaction using the
buttons or crown, and the specific level is shown using a curved level
indicator.
Time picker
Pickers let users choose among a finite number of items in scrollable sections.
The Time Picker has up to three columns, depending on whether seconds are
available or if the clock is a 12-hour or 24-hour clock. Users interact with
each column at a time, making your selection by leaving the number in focus
before continuing.
Date picker
Pickers let users choose among a finite number of items in scrollable sections.
The Date Picker has up to three columns, which have an interchangeable order
between date, time, and year, depending on the use case.
Date Pickers require longer strings of content, so only one column is in
view at a time, giving a hint of what's to the left or right. Users interact
with each column at a time, making their selection by leaving the number in
focus before continuing.
Custom non-scrolling layout examples
Non-scrolling app screens are not limited to the set components. You can combine
a combination of elements to create the layout you want.
You should be mindful of the limited space on a non-scrolling screen and the use
of responsive (percentage) margins and padding to use the available screen
space. You can also consider applying a breakpoint at 225dp to introduce
additional content or make existing content more glanceable when on bigger
screen sizes.
Maps
Emergency overlay
Emergency alert
Responsive and adaptive behavior
All components in the Compose library automatically adapt to the wider screen
size and gain width and height. For these views in particular, utilizing
breakpoints can deliver a particularly rich and valuable experience for all
users.
For many of your UI's buttons, cards, and margins, stretch and fill the space
for different screen sizes to take advantage of the available space on the UI
and also make for a well-balanced layout.
Use the following checklist to verify that responsive parameters are properly
defined:
Create flexible layouts that look reasonable on all screen sizes.
Apply the recommended top, bottom, and side margins.
Define margins in percentage values in places where content might otherwise
be clipped.
Utilize layout constraints so that elements make the best possible use of
the space within the screen and maintain balance across different device
sizes.
Accommodate Time Text if used, but don't overlap the top section of the
page.
Consider using edge-hugging buttons to utilize more of the limited space.
Consider applying a breakpoint at 225dp to introduce additional content or
make existing content more glanceable when on bigger screen sizes.
Multiple non-scrolling page journeys using pagination
In scenarios where an experience requires more content but wants to retain a
non-scrolling layout, consider a multi-page layout with either vertical or
horizontal pagination.
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,["# Non-scrolling app layouts\n\nNon-scrolling views focus on glanceable information and offer users value with\nlittle or no interaction. Because of that, it can be challenging to build\nresponsive behavior into these layouts.\n\nPreset non-scrolling layout components\n--------------------------------------\n\n### Dialog\n\nA dialog is a transient overlay that occupies the whole screen. It lets users\nperform a single action. \n\n\u003cbr /\u003e\n\n\nConsider the following points:\n\n\u003cbr /\u003e\n\n- Dialogs focus your attention to verify their content is addressed.\n- Dialogs should be direct in communicating information and dedicated to completing a task.\n- Dialogs should appear in response to a user task or an action, with relevant or contextual information. \n\n\u003cbr /\u003e\n\n### Confirmation overlay\n\nThe confirmation overlay displays a confirmation message to the user for a short\nperiod. Use this component to capture the user's attention after an action has\nbeen executed.\n\n\u003cbr /\u003e\n\n### Open on phone\n\nThe open on phone overlay is triggered when the user chooses to continue their\njourney on a phone. The overlay has a progress indicator and tells the user when\nto check their phone.\n\n\u003cbr /\u003e\n\n### Stepper\n\nSteppers provide a full-screen control experience that let users make a\nselection from a range of values. They can control the interaction using the\nbuttons or crown, and the specific level is shown using a curved level\nindicator.\n\n\u003cbr /\u003e\n\n### Time picker\n\nPickers let users choose among a finite number of items in scrollable sections.\nThe **Time Picker** has up to three columns, depending on whether seconds are\navailable or if the clock is a 12-hour or 24-hour clock. Users interact with\neach column at a time, making your selection by leaving the number in focus\nbefore continuing.\n\n\u003cbr /\u003e\n\n### Date picker\n\nPickers let users choose among a finite number of items in scrollable sections.\nThe **Date Picker** has up to three columns, which have an interchangeable order\nbetween date, time, and year, depending on the use case.\n**Date Pickers** require longer strings of content, so only one column is in\nview at a time, giving a hint of what's to the left or right. Users interact\nwith each column at a time, making their selection by leaving the number in\nfocus before continuing.\n\n\u003cbr /\u003e\n\nCustom non-scrolling layout examples\n------------------------------------\n\nNon-scrolling app screens are not limited to the set components. You can combine\na combination of elements to create the layout you want.\n\nYou should be mindful of the limited space on a non-scrolling screen and the use\nof responsive (percentage) margins and padding to use the available screen\nspace. You can also consider applying a breakpoint at 225dp to introduce\nadditional content or make existing content more glanceable when on bigger\nscreen sizes. \n\n### Maps\n\n\u003cbr /\u003e\n\n### Emergency overlay\n\n\u003cbr /\u003e\n\n### Emergency alert\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. For these views in particular, utilizing\nbreakpoints can deliver a particularly rich and valuable experience for all\nusers.\n\nFor many of your UI's buttons, cards, and margins, stretch and fill the space\nfor different screen sizes to take advantage of the available space on the UI\nand also make for a well-balanced layout.\n\nUse the following checklist to verify that responsive parameters are properly\ndefined:\n\n- Create flexible layouts that look reasonable on all screen sizes.\n- Apply the recommended top, bottom, and side margins.\n- Define margins in percentage values in places where content might otherwise be clipped.\n- Utilize layout constraints so that elements make the best possible use of the space within the screen and maintain balance across different device sizes.\n- Accommodate **Time Text** if used, but don't overlap the top section of the page.\n- Consider using edge-hugging buttons to utilize more of the limited space.\n- Consider applying a breakpoint at 225dp to introduce additional content or make existing content more glanceable when on bigger screen sizes.\n\n| **Caution:** A display size shouldn't display less information than ones that are smaller than it. This is especially relevant for custom behaviors added at the breakpoint. A common example of this is when components or text sizes are increased past the breakpoint and end up showing less on the larger screens. Screens should show more value, not less, with increasing size.\n\nMultiple non-scrolling page journeys using pagination\n-----------------------------------------------------\n\nIn scenarios where an experience requires more content but wants to retain a\nnon-scrolling layout, consider a multi-page layout with either vertical or\nhorizontal pagination."]]
