The Wear OS ecosystem consists of devices with a wide variety of screen sizes. Using adaptive UI principles is critical to delivering the highest quality experience for everyone. 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 everyone.
Essential terms
Responsive design: A design approach in which layouts dynamically format and position elements such as buttons, text fields, and dialogs for an optimal user experience. Automatically offer users additional value on larger screens by utilizing responsive design practices. Whether it's more text visible at a glance, more actions on screen, or larger, more accessible tap targets, responsive practices provide an enhanced experience for users of large screens.
Adaptive design: A design approach in which the interface changes based on known user, device, or environmental conditions. Adaptive design in Material includes layout and component adaptations.
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.
Adaptive scrolling layouts
All top, bottom, and side margins should be defined in percentages to avoid clipping and provide proportional scaling of elements.
Adaptive non-scrolling layouts
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.
Key screen sizes
Many of the watches within the Wear OS ecosystem have different screen sizes. When designing for Wear OS, keep in mind that your app surfaces are displayed on these different screen sizes. Keep the following principles in mind when designing for different devices.
Small first
Always design for small supported round-screen emulator first: 204dp - 216dp. If the layout is dense render it at 192dp to ensure nothing breaks - be sure to also test it as 192dp with larger font sizes. Then, optimize for larger devices.
Design for scale
Define outer margins as percentages rather than absolute values, so that margins can scale proportionally on round screens and avoid clipping any UI elements.
Font sizes
The height of a UI element might change in a non-linear way, depending on font scaling and accessibility settings such as bold text.
The following screen sizes are particularly common choices for Wear OS devices. It's beneficial to use 225dp as a breakpoint between smaller screens and larger screens.
192dp to 224dp
225dp to 240+dp
Design quality tiers
We are also leaning into shape language in a much more expansive and meaningful way by utilizing flexible container shapes to apply rounding/sharpening of corner radius to support shape morphing lists and button states. We are also introducing edge-hugging buttons as a new component and iconic design pattern for round devices on Wear OS. Our quality guidelines are organized into three tiers. Enable the best possible experience for your users by meeting guidelines in all three tiers.
Ready for all screen sizes
Ensure your app is delivering a quality experience across all screen sizes. Create layouts that fully utilize the available app space.
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.
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.