Many of the watches within the Wear OS ecosystem have differently-shaped watch faces. When designing for Wear OS, keep in mind that your app surfaces will be displayed on differently-shaped screens.
Principles
Keep the following principles in mind when designing for round and square screens.
Small first
Always design for the smallest supported round device first. Optimize for larger devices and square screens if necessary.
Design for scale
Define outer margins as percentages rather than absolute values, so that margins can scale proportionally on round screens.
Font size
The height of text boxes increase depending on font size. Larger fonts grow the text box and push other elements up or down on the screen depending on the layout.
Supported screen layouts
 |
|
 |
 |
| Small round | Large round | Rectangle | Square |
| 192 dp | 213 dp | 180 dp x 220 dp | 180 dp |
| Design for small round devices first to make sure your layout works within smaller size constraints. This makes it easier to adjust your content for square displays. | For large round layouts, Wear OS can provide overrides to any of the dimensions. | If you can't design for a round layout first, design for a rectangle layout first. This ensures that there will be enough vertical space to scale down to a square shape. | By indicating relative alignment of elements and providing sufficient vertical stretch space, the rectangle layout can also work for square screens without the need for a separate spec. |
Minimum margins
Margins can be smaller on square screens than they are on round screens to optimize the space without elements clipping. Keep your margins to a minimum of 2.5% for square watch faces.
Rectangle and square layouts
Design for a rectangle layout first. Place your components on screen using relative alignment of elements. Provide sufficient vertical stretch space in your design so that the rectangle layout works well with square screens. Then, when creating the square layout, the relative alignment of elements allows your watch face to work well for a square layout without the need for a separate spec.
An example of the same layout spec working for both rectangle and square screen.