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.
Principles
Keep the following principles in mind when designing for different devices.
Small first
Always design for the smallest supported round-screen emulator first: 192 dp. 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 size
The height of a text box changes depending on font scaling and whether the text in the box is bold. Larger fonts grow the box and push other elements up or down on the screen depending on the layout.
Examples of common screen sizes
The following screen sizes are particularly common choices for Wear OS devices:
Small round | Large round |
192 dp | 213 dp |