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

The primary job of a watch face is to show the time, and the Watch Face Format lets you create both analog and digital clocks using the AnalogClock and DigitalClock elements.

Digital clocks

A basic digital clock can be defined using the DigitalClock and TimeText element within your watch face Scene:

<DigitalClock x="100" y="100" width="200" height="50">
    <TimeText x="0" y="0" width="200" height="50" format="hh:mm">
        <Font family="SYNC_TO_DEVICE" size="16" />
    </TimeText>
</DigitalClock>

The format attribute lets you control how the time is represented using a combination of hours, minutes, and seconds. The exact options differ depending on the version of Watch Face Format being used; version 2 expands the options here.

In the preceding example, Font is set to use the system font.

It can also be useful to show the time for other locations in the world, for example a world clock. This can be achieved through the Localization element:

<DigitalClock x="100" y="100" width="200" height="50">
    <Localization timeZone="Europe/London" />
    ...
</DigitalClock>

Analog clocks

To create an analog clock, use the AnalogClock element. Each of the HourHand, MinuteHand, and SecondHand child elements specifies the resource that should be used in the rendering:

<AnalogClock x="0" y="0" width="200" height="200">
    <HourHand resource="hour_hand" ... />
    <MinuteHand resource="minute_hand" />
    <SecondHand resource="second_hand" />
    <!-- Optionally add a Tick or Sweep child element to define SecondHand behavior -->
</AnalogClock>

Specify the pivot point

Each of the hour, minute, and second resources are rotated as time advances, but it is important to specify the correct point around which each should pivot.

In some situations, the pivot point is not quite at the bottom of the hand, and is centered horizontally. This should be specified as <HourHand … pivotY="(pivot_ratio)" /> where:

$$ pivot\_ratio = \frac{pivot\_height}{full\_height} $$

Color the watch hands

To allow the user to customize the appearance of the watch face, it is common to have a configurable color for the watch hands.

A way to achieve this is through the tintColor on each of the hands to separately tint each hand, or on AnalogClock, to tint all hands the same color.

In addition to enabling users to tint specific colors, you can supply a configuration option to tintColor to allow the user to choose:

<AnalogClock ... tintColor="[CONFIGURATION.handColors.0]" />

Drop shadow

For a realistic watch hand effect, using a drop shadow behind each hand can give the appearance of depth. To achieve this, use two of each hand type, offsetting one behind the other, supplying a separate resource for the shadow:

<!-- Offset the shadow by 5 units in both directions -->
<HourHand resource="hour_hand_shadow" ... x="105" y="105">
<!-- ... -->
<HourHand resource="hour_hand" ... x="100" y="100">

Face decorations

Analog watch faces often have decorations around the face showing the hours or minutes. To achieve this, there are two approaches:

Include a full-screen background image, which contains your predrawn watch face. See working with images.

<PartImage x="0" y="0" width="450" height="450" ...>
    <Image resource="watch_face_dial" />
</PartImage>

Draw separate decorations and position them around the face using rotations.

<Group ... >
    <!-- Content for the "12" marker -->
</Group>
<Group pivotX="..." pivotY="..." angle="30">
    <!-- Content for the "1" marker -->
</Group>

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