Get started with adaptive layouts
Stay organized with collections
Save and categorize content based on your preferences.
The Wear OS ecosystem is made up of devices that have a wide variety of screen
sizes. Utilizing adaptive UI principles is critical to delivering the highest
quality experience for all users.
What is adaptive UI?
Adaptive UIs stretch and change to make the best possible use of all available
screen space, no matter what size screen they're rendered on.
Adaptive UIs change responsively, using components and methods built directly
into the layout logic. These layouts also utilize screen size
breakpoints—applying a different design on different screen sizes—to create an
even richer experience for users.
Key screen sizes
Learn about key reference sizes to keep in mind as you design new experiences
Screen sizes
Types of layouts
When designing for adaptive layouts on the round screen, scrolling and
non-scrolling views each have unique requirements for scaling UI elements and
maintaining a balanced layout and composition.
Scrolling views
All top, bottom, and side margins
should be defined in percentages to avoid clipping and provide
proportional scaling of elements.
Non-scrolling views
All margins should be defined
in percentages and vertical constraints should be defined such that the
main content in the middle can stretch to fill the available area.
Add value through adaptive layouts and design practices
When designing for adaptive layouts on the round screen, scrolling and
non-scrolling views each have unique requirements for scaling UI elements and
maintaining a balanced layout and composition.
The following images are broad suggestions; examples are for illustrative
purposes only. View each component or surface page for detailed, contextual,
responsive guidance.
More content at a glance
Responsive layouts allow for more chips, more cards, more lines of text, and
more buttons to fit on a single screen
More content elements visible
Utilize new layouts, applied at defined screen size breakpoints, to allow for
the introduction of new content when possible, giving the user additional value
on devices with larger screen sizes.
Improved glanceability
Use extra screen space to provide larger containers, larger text, thicker rings,
and more granular data visualization to provide better glanceability for users.
Improved usability
Use extra screen space to provide bigger tap targets, greater visual hierarchy,
and additional space between content items to make interfaces easier and more
comfortable to interact with.
Optimized compositions
Utilize our updated components and templates to offer a better look and feel for
our UIs across all screen sizes.
App quality
Our quality guidelines are organized into three levels. Enable the best possible
experience for your users by meeting guidelines in all three tiers.
Quality guidelines
Ready for all screen sizes
Make sure your app is delivering a quality experience across all screen
sizes. Create layouts that fully use the available app space.
Get started
Responsive and optimized
Deliver more content to users on devices which allow for it, and utilize
responsive layouts that automatically adapt to different screen sizes.
Get started
Adaptive and differentiated
Make the most of additional real estate by utilizing breakpoints to offer
powerful new experiences on larger screens which are not possible on devices
with smaller screens.
Get started
Utilize established canonical layouts
Use established canonical layouts to help your UIs adapt smoothly across a range
of device sizes.
Our canonical layouts have been developed thoughtfully to offer a high quality
experience across all screen sizes.
Canonical layouts
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,["# Get started with adaptive layouts\n\nThe Wear OS ecosystem is made up of devices that have a wide variety of screen\nsizes. Utilizing adaptive UI principles is critical to delivering the highest\nquality experience for all users.\n\nWhat is adaptive UI?\n--------------------\n\nAdaptive UIs stretch and change to make the best possible use of all available\nscreen space, no matter what size screen they're rendered on.\n\nAdaptive UIs change responsively, using components and methods built directly\ninto the layout logic. These layouts also utilize screen size\nbreakpoints---applying a different design on different screen sizes---to create an\neven richer experience for users.\n\nKey screen sizes\n----------------\n\n\nLearn about key reference sizes to keep in mind as you design new experiences\n\n[Screen sizes](/design/ui/wear/guides/foundations/screen-sizes) \n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nTypes of layouts\n----------------\n\nWhen designing for adaptive layouts on the round screen, scrolling and\nnon-scrolling views each have unique requirements for scaling UI elements and\nmaintaining a balanced layout and composition.\n\n\n**Scrolling views**\n\nAll top, bottom, and side margins\nshould be defined in percentages to avoid clipping and provide\nproportional scaling of elements. \n\n**Non-scrolling views**\n\nAll margins should be defined\nin percentages and vertical constraints should be defined such that the\nmain content in the middle can stretch to fill the available area.\n\n\u003cbr /\u003e\n\nAdd value through adaptive layouts and design practices\n-------------------------------------------------------\n\nWhen designing for adaptive layouts on the round screen, scrolling and\nnon-scrolling views each have unique requirements for scaling UI elements and\nmaintaining a balanced layout and composition.\n\nThe following images are broad suggestions; examples are for illustrative\npurposes only. View each component or surface page for detailed, contextual,\nresponsive guidance.\n\n\n**More content at a glance**\n\nResponsive layouts allow for more chips, more cards, more lines of text, and\nmore buttons to fit on a single screen \n\n**More content elements visible**\n\nUtilize new layouts, applied at defined screen size breakpoints, to allow for\nthe introduction of new content when possible, giving the user additional value\non devices with larger screen sizes.\n\n\u003cbr /\u003e\n\n\n**Improved glanceability**\n\nUse extra screen space to provide larger containers, larger text, thicker rings,\nand more granular data visualization to provide better glanceability for users. \n\n**Improved usability**\n\nUse extra screen space to provide bigger tap targets, greater visual hierarchy,\nand additional space between content items to make interfaces easier and more\ncomfortable to interact with.\n\n\u003cbr /\u003e\n\n\n**Optimized compositions**\n\nUtilize our updated components and templates to offer a better look and feel for\nour UIs across all screen sizes. \n\n\u003cbr /\u003e\n\nApp quality\n-----------\n\n\nOur quality guidelines are organized into three levels. Enable the best possible\nexperience for your users by meeting guidelines in all three tiers.\n\n[Quality guidelines](/docs/quality-guidelines/wear-app-quality) \n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n*** ** * ** ***\n\n\n**Ready for all screen sizes**\n\nMake sure your app is delivering a quality experience across all screen\nsizes. Create layouts that fully use the available app space.\n\n[Get started](/design/ui/wear/guides/foundations/larger-screens-ready) \n**Responsive and optimized**\n\nDeliver more content to users on devices which allow for it, and utilize\nresponsive layouts that automatically adapt to different screen sizes.\n\n[Get started](/design/ui/wear/guides/foundations/larger-screens-optimized) \n**Adaptive and differentiated**\n\nMake the most of additional real estate by utilizing breakpoints to offer\npowerful new experiences on larger screens which are not possible on devices\nwith smaller screens.\n\n[Get started](/design/ui/wear/guides/foundations/larger-screens-differentiated)\n\n\u003cbr /\u003e\n\n*** ** * ** ***\n\nUtilize established canonical layouts\n-------------------------------------\n\n\nUse established canonical layouts to help your UIs adapt smoothly across a range\nof device sizes.\n\nOur canonical layouts have been developed thoughtfully to offer a high quality\nexperience across all screen sizes.\n\n[Canonical layouts](/design/ui/wear/guides/foundations/canonical-adaptive-layouts) \n\n\u003cbr /\u003e"]]
