Working with Screen Sizes

PDF for offline use
Related Links:

Let us know how you feel about this


0/250

last updated: 2016-09

Apple Watch is available in two screen sizes:

  • 38mm

    • 136 x 170 logical pixels (272 x 340 physical pixels)
  • 42mm

    • 156 x 195 logical pixels (312 x 390 physical pixels).

You should take screen size into account when designing and testing your apps.

watchOS Interface Designer

By default the Xamarin Studio Designer will display watch interface controllers at Any Apple Watch.

Use the size menu to edit and preview your storyboard at either of the available screen sizes: 38mm or 42mm:

The larger screen size will sometimes render content that would be truncated/hidden on the smaller screen. Be sure to test on both sizes.

Interface Design

Your app should display the same content on the screen, regardless of size, and should expand or contract elements as appropriate. In the Xamarin Studio Designer, in the Attribute Inspector, you should use Relative to Container or Size to Fit Content in preference to fixed sizes.

Because the watch screen is surrounded by a black bezel, providing padding around your interface is not recommended. Let elements rest against the edge of the screen and let the bezel form a natural border around the app.

watchOS Simulator

When testing on the simulator you can easily switch between the two screen sizes using the Hardware > Device menu.

Image Resources

You should use multiple image assets if a single asset does not look good at different sizes. Image asset catalogs allow for seperate bitmaps to be specified for each size:

// specify the asset name, the correct size will automatically be loaded
staticImage.SetImage(UIImage.FromBundle("Walkway"));

Alternatively, use code to determin the screen size and load different images altogether:

bool large = WKInterfaceDevice.CurrentDevice.ScreenBounds.Size.Width > 136.0;
// Load image depending on screen size
using (var image = UIImage.FromBundle (large ? "42mm-Walkway" : "38mm-Walkway"))
{
   myImage.SetImage (image);

}

Read more about using the image control.

Xamarin Workbook

If it's not already installed, install the Xamarin Workbooks app first. The workbook file should download automatically, but if it doesn't, just click to start the workbook download manually.