Article

Supporting Multiple Watch Sizes

Customize the layout of your user interface to support all Apple Watch screen sizes.

Overview

With the addition of Apple Watch Series 4, watchOS apps now support four different screen sizes.

Devices

Screen Sizes

Apple Watch Series 1, 2, and 3

38 mm and 42 mm

Apple Watch Series 4

40 mm and 44 mm

Because of the higher resolution on the 40 mm screen, the 40 mm and 42 mm screens provide approximately the same amount of space, and can use the same layout. However, the 44 mm screen offers considerably more space that your app can use to display larger controls and assets.

When a 40 mm or 44 mm device runs an app compiled for watchOS 4 or earlier, the system letterboxes the interface, centering it on the screen. To make full use of all screen sizes, build your app with the watchOS 5 SDK or later. When compiling with these SDKs, you also need to add the 50 pt home screen icon and the 108 pt short look icon for the 44 mm device.

Be sure to consider all four screen sizes. Where possible, use resizeable objects to fill the available space. Resizeable objects create flexible layouts and minimize the amount of customization you need to support multiple watch sizes. If necessary, customize your layout for the new screen sizes, use the content-safe areas and minimum layout margins to avoid clipping important content, and provide device-specific or auto-scaling assets.

Customize Your App’s Layout

In Xcode, you can view your app’s layout in all four devices. You can also customize your layout for a specific size.

A screenshot of Xcode’s controls for viewing and modifying the screen size.

Click the Vary for… button to customize the layout for the selected screen size. You can customize a single screen size, like the 44 mm, or you can provide custom layouts for every screen.

Use Content-Safe Areas and Minimum Layout Margins

The 40 mm and 44 mm watches have rounded corners that may clip scrolling content. Additionally, the items in the status bar do not extend all the way to the edge of the screen.

The system provides content-safe area insets to define the area on screen where it is safe to display content. This is the region below the status bar that avoids the rounded corners. Additionally, the system provides minimum layout margins to help you align your text content with the status bar’s content. The following figures show the content-safe area and minimum layout margins on all four devices.

An illustration showing the content-safe area and layout margin on the 38 mm and 42 mm devices.
An illustration showing the content-safe area and layout margin on the 40 mm and 44 mm devices.

The system’s built-in containers and controls automatically take the content-safe area and minimum layout margins into account when laying out your interface. Therefore, if you design your user interface in Interface Builder, xcode handles everything for you. Scrolling content, like table views, automatically settle within the content safe areas, and text elements respect the layout margins.

If you build a custom user interface with SpriteKit or SceneKit, consider using the content-safe area and minimum layout margins. Use the interface controller’s contentSafeAreaInsets and systemMinimumLayoutMargins properties to access these values, and lay out your interface accordingly.

Create Glanceable Interfaces

Glanceable user interfaces are full-screen, nonscrolling interfaces like the Now Playing view (see Adding a Now Playing View). To create an interface that uses the full screen, enable your interface controller’s Fixed to screen edges attribute.

A screenshot showing the Fixed to screen edges attribute enabled.

Enabling this property turns off scrolling, and allows built-in controls and containers to fill content to the screen edges, regardless of the content-safe area.

When creating a glanceable app, think carefully about your app’s internationalization and dynamic type. You must make sure your content doesn’t get cut off on any screen size, no matter the font size or language.

Manage Assets

Xcode allows you to specify a different version of an image for each screen size. To provide screen-specific images, add a new image set to your asset catalog. Set the Devices attribute to Apple Watch, and the Screen Width attribute to Individual Widths.

A screenshot showing asset slots for each screen size.

You can now drag in different images for each size. When you attempt to load the image using the init(named:) method, the system automatically loads the correct image based on the current device’s screen size.

In watchOS 4 and earlier, if you attempt to load an image and the asset catalog doesn’t include a Universal image or an image for the current device’s screen size, the load fails.

In watchOS 5 and later, the system falls back and loads the closest available asset. For example, if the 44 mm image is missing, the system attempts to load the 40 mm. This continues down the chain from 44 mm to 40 mm to 42 mm to 38 mm to Universal. The system loads the first image it finds.

Alternatively, in watchOS 5 and later, you can provide scalable PDF assets. Add a PDF as a 2x image asset, then set its Auto Scaling attribute to Automatic. When you load the PDF, the system scales the image based on the current device’s screen size as listed in the table. This allows you to provide a single asset for all four screen sizes.

Screen Size

Image Scale

38 mm

91%

40 mm

100%

42 mm

100%

44 mm

110%

See Also

Visual Design

Setting the App’s Tint Color

Set your app’s tint color using the storyboard’s Global Tint property.