App layouts
Stay organized with collections
Save and categorize content based on your preferences.
When designing apps for Wear OS, be intentional about the layouts you choose for
each experience. Because Wear OS runs on circular displays and clipping is more
common than on handheld devices, there are two categories of canonical layouts
that you should consider when designing your app.
Non-scrolling layouts 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:
- Test on a combination of languages, font scaling, devices, and variable
content.
- Use non-scrollable layouts only when the content is known or controlled
ahead of time, or if you must use a specific design.
- Apply the recommended top, bottom, and side margins to the layout.
- Define margins in percentage values in places where content might otherwise
be clipped.
- Arrange elements to make the best possible use of the space within the
screen and maintain balance across different device sizes.
For pages that contain more information than can fit on a single screen, or
which are required to support longer and more immersive journeys, use a scroll
view.
- 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.
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 show additional options, improve
glanceability, or make content fit better on screen. The following example
shows how, on larger screens, the bottom two buttons are widened:
Figma design kits
Visit the design kit downloads page to explore design layouts with built-in
components, options, and recommendations to create different app and tile
designs that follow best practices.
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-05-20 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-05-20 UTC."],[],[],null,["# App layouts\n\nWhen designing apps for Wear OS, be intentional about the layouts you choose for\neach experience. Because Wear OS runs on circular displays and clipping is more\ncommon than on handheld devices, there are two categories of canonical layouts\nthat you should consider when designing your app.\n\nNon-scrolling app layouts\n-------------------------\n\nNon-scrolling layouts 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\n### Build for responsive non-scrolling views\n\n- Test on a combination of languages, font scaling, devices, and variable content.\n- Use non-scrollable layouts only when the content is known or controlled ahead of time, or if you must use a specific design.\n- Apply the [recommended top, bottom, and side margins](/design/ui/wear/guides/components/dialogs#adaptive-layouts) to the layout.\n- Define margins in percentage values in places where content might otherwise be clipped.\n- Arrange elements to make the best possible use of the space within the screen and maintain balance across different device sizes.\n\nScrolling app layouts\n---------------------\n\nFor pages that contain more information than can fit on a single screen, or\nwhich are required to support longer and more immersive journeys, use a scroll\nview.\n\n### Build for responsive scroll views\n\n- Apply the [recommended top, bottom, and side margins](/design/ui/wear/guides/components/dialogs#adaptive-layouts).\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\n### How to build for adaptive scroll views using a screen size breakpoint\n\nScroll views that use responsive design practices usually adapt to a range of\nscreen sizes. However, in some special cases, you can use a breakpoint to\noverride dimensions and augment layouts which show additional options, improve\nglanceability, or make content fit better on screen. The following example\nshows how, on larger screens, the bottom two buttons are widened:\n\nFigma design kits\n-----------------\n\n[Visit the design kit downloads page](/design/ui/wear/guides/foundations/download) to explore design layouts with built-in\ncomponents, options, and recommendations to create different app and tile\ndesigns that follow best practices."]]
