Screen shapes

Stay organized with collections Save and categorize content based on your preferences.

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.