Address watch face issues

Creating a custom watch face for Wear OS by Google is substantially different from creating notifications and wearable-specific activities. This class shows you how to resolve some issues that you may encounter as you implement your first few watch faces.

Detect the shape of the screen

Wear OS devices can come with square, rectangle, and round screens. Devices with round screens can contain an inset (or "chin") at the bottom of the screen. Your watch face should adapt to and take advantage of the particular shape of the screen.

Wear OS lets your watch face determine the screen shape at runtime. To detect whether the screen is square or round, override the onApplyWindowInsets() method in the CanvasWatchFaceService.Engine class as follows:

Kotlin

private inner class Engine : CanvasWatchFaceService.Engine() {
    internal var mIsRound: Boolean = false
    internal var chinSize: Int = 0

    override fun onApplyWindowInsets(insets: WindowInsets) {
        super.onApplyWindowInsets(insets)
        mIsRound = insets.isRound
        chinSize = insets.systemWindowInsetBottom
    }
    ...
}

Java

private class Engine extends CanvasWatchFaceService.Engine {
    boolean mIsRound;
    int chinSize;

    @Override
    public void onApplyWindowInsets(WindowInsets insets) {
        super.onApplyWindowInsets(insets);
        mIsRound = insets.isRound();
        chinSize = insets.getSystemWindowInsetBottom();
    }
    ...
}

To adapt your design when you draw your watch face, check the value of the mIsRound and mChinSize member variables.

Note: By default, watch faces on rectangular devices are run in a square emulation mode to support watch faces built for circular and square devices. To learn how to override this behavior, see Support rectangular devices.

Configure the system indicators

To ensure that the system indicators remain visible, you can configure their position on the screen and whether they need background protection when you create a WatchFaceStyle instance:

  • To set the position of the status bar, use the setStatusBarGravity() method.
  • To protect the status bar and hotword with a semi-transparent gray background, use the setViewProtectionMode() method. This is usually necessary if your watch face has a light background, since the system indicators are white.

For more information about the system indicators, see Configure the system UI.

Use relative measurements

Wear OS devices from different manufacturers feature screens with a variety of sizes and resolutions. Your watch face should adapt to these variations by using relative measurements instead of absolute pixel values.

When you draw your watch face, obtain the size of the canvas with the Canvas.getWidth() and Canvas.getHeight() methods and set the positions of your graphic elements using values that are some fraction of the detected screen size. If you resize the elements of your watch face in response to a peek card, use values that are some fraction of the remaining space above the card to redraw your watch face.