Complication Bounding Areas


Complication bounding areas are used to define the rendering area for a Complication. An outline of the bounding area is shown in the watch face editor. Any content outside of the bounding area is cropped.

The bounding area also determines the region where the user can select the complication from the watch face.

Introduced in Wear OS 4.

BoundingBox

A BoundingBox element defines a rectangular bounding area for the complication.

Syntax

<BoundingBox x="integer" y="integer" width="integer" height="integer"
                outlinePadding="float" />

Attributes

The BoundingBox element has the following attributes:

Required attributes

The following attributes are required:

x, y, width, height
A collection of integers that specify the element's size and position.

Optional attributes

The following attributes are optional:

outlinePadding
A float that specifies padding to apply to the outside of the bounding area. This is used to create a larger outline in the watch face editor. Defaults to 0.

BoundingRoundBox

A BoundingRoundBox element defines a rectangular bounding area with rounded corners for the complication.

Syntax

<BoundingRoundBox x="integer" y="integer" width="integer" height="integer"
                outlinePadding="float" cornerRadius="float" />

Attributes

The BoundingRoundBox element has the following attributes:

Required attributes

The following attributes are required:

x, y, width, height
A collection of integers that specify the element's size and position.

Optional attributes

The following attributes are optional:

cornerRadius

The radius of a circle. This value defines the extent to which the corners of the rectangle are rounded.

outlinePadding
A float that specifies padding to apply to the outside of the bounding area. This is used to create a larger outline in the watch face editor. Defaults to 0.

BoundingOval

A BoundingOval element defines a round bounding area for the complication.

Syntax

<BoundingOval x="integer" y="integer" width="integer" height="integer"
                outlinePadding="float" />

Attributes

The BoundingOval element has the following attributes:

Required attributes

The following attributes are required:

x, y, width, height
A collection of integers that specify the element's size and position.

Optional attributes

The following attributes are optional:

outlinePadding
A float that specifies padding to apply to the outside of the bounding area. This is used to create a larger outline in the watch face editor. Defaults to 0.

BoundingArc

A BoundingArc element defines a arc shaped bounding area for the complication.

Syntax

<BoundingArc centerX="float" centerY="float" width="float"
                height="float" thickness="float" isRoundEdge="boolean"
                startAngle="float" endAngle="float"
                direction="CLOCKWISE | COUNTER_CLOCKWISE"
                outlinePadding="float" />

Attributes

The BoundingArc element has the following attributes:

Required attributes

The following attributes are required:

centerX, centerY, width, height
A collection of attributes which define a containing oval for the arc. The arc is scaled to fit inside the specified oval. All attributes are defined as floats.
thickness
The thickness of the arc expressed as a float.
startAngle
Starting angle (in degrees) where the arc begins. An angle of 0 degrees corresponds to the 12 o'clock position on the watch.
endAngle
End angle, where the arc finishes.

Optional attributes

The following attributes are optional:

isRoundEdge
Determines whether the cap at the end of the arc is flat or rounded. Defaults to FALSE.
direction
The rotation direction of the arc. Defaults to CLOCKWISE.
outlinePadding
A float that specifies padding to apply to the outside of the bounding area. This is used to create a larger outline in the watch face editor. Defaults to 0.