Complication

A Complication element defines how a particular Complication Type is displayed on the watch face.

For each type of complication, you can use the following in expressions. This lets you access the data provided to the complication:

  • LONG_TEXT: Intended for longer strings. If an icon or small image is provided, it is recommended to show only one of them.
    • COMPLICATION.MONOCHROMATIC_IMAGE
    • COMPLICATION.SMALL_IMAGE
    • COMPLICATION.TEXT
    • COMPLICATION.TITLE
  • MONOCHROMATIC_IMAGE: Used when text is not needed. The icon is expected to be a single color and can be tinted by the watch face.
    • COMPLICATION.MONOCHROMATIC_IMAGE
    • COMPLICATION.MONOCHROMATIC_IMAGE_AMBIENT
  • PHOTO_IMAGE: This image is expected to be large enough to fill the watch face. It is recommended not to show this in ambient mode.
    • COMPLICATION.PHOTO_IMAGE
  • RANGED_VALUE: Intended for progressive values like battery level or step progress towards a goal.
    • COMPLICATION.MONOCHROMATIC_IMAGE
    • COMPLICATION.MONOCHROMATIC_IMAGE_AMBIENT
    • COMPLICATION.TEXT
    • COMPLICATION.TITLE
    • COMPLICATION.RANGED_VALUE_MIN
    • COMPLICATION.RANGED_VALUE_MAX
    • COMPLICATION.RANGED_VALUE_VALUE
    • COMPLICATION.RANGED_VALUE_COLORS - (a space-separated list of hex colors, for example #FF0000 #00FF00)
    • COMPLICATION.RANGED_VALUE_COLORS_INTERPOLATE - (a boolean specifying whether to interpolate colors)
  • SHORT_TEXT: Recommend showing only one of icon or short title if either or both are provided.
    • COMPLICATION.MONOCHROMATIC_IMAGE
    • COMPLICATION.MONOCHROMATIC_IMAGE_AMBIENT
    • COMPLICATION.TEXT
    • COMPLICATION.TITLE
  • SMALL_IMAGE: A small image has one of two styles: photo style or icon style. Photo style means it is expected to fill the space and can be cropped. Icon style means it shouldn't be cropped and can be padded.
    • COMPLICATION.SMALL_IMAGE
    • COMPLICATION.SMALL_IMAGE_AMBIENT
    • COMPLICATION.IMAGE_STYLE - (PHOTO = 1, ICON = 2)
  • GOAL_PROGRESS: Intended for values where the value starts at zero and is allowed to go past the target value (for example, a step count).
    • COMPLICATION.GOAL_PROGRESS_VALUE
    • COMPLICATION.GOAL_PROGRESS_TARGET_VALUE
    • COMPLICATION.MONOCHROMATIC_IMAGE
    • COMPLICATION.MONOCHROMATIC_IMAGE_AMBIENT
    • COMPLICATION.TEXT
    • COMPLICATION.TITLE
    • COMPLICATION.GOAL_PROGRESS_COLORS - (a space-separated list of hex colors, for example #FF0000 #00FF00)
    • COMPLICATION.GOAL_PROGRESS_COLORS_INTERPOLATE - (a boolean specifying whether to interpolate colors)
  • WEIGHTED_ELEMENTS: Each element consists of a color and a weight. The size of the element when rendered should be proportional to its weight. Weights are not required to sum to any particular value. Watch faces are allowed to recolor the weighted elements.
    • COMPLICATION.WEIGHTED_ELEMENTS_COLORS - (a space-separated list of hex colors, for example #FF0000 #00FF00)
    • COMPLICATION.WEIGHTED_ELEMENTS_WEIGHTS - (a space-separated list of element weights)
    • COMPLICATION.WEIGHTED_ELEMENTS_BACKGROUND_COLOR
    • COMPLICATION.MONOCHROMATIC_IMAGE
    • COMPLICATION.MONOCHROMATIC_IMAGE_AMBIENT
    • COMPLICATION.TEXT
    • COMPLICATION.TITLE

For a complete demonstration, see the example.

Introduced in Wear OS 4.

Syntax

<Complication type="SHORT_TEXT | LONG_TEXT | MONOCHROMATIC_IMAGE | SMALL_IMAGE | PHOTO_IMAGE | RANGED_VALUE | EMPTY">
      <!-- Only the most common inner element is shown here. -->
      <Group>
      </Group>
</Complication>

Example

The following example shows a complication that contains image, title, and text components:

<Complication type="SHORT_TEXT">
    <PartImage x="35" y="16" width="22" height="22" pivotX="0.5" pivotY="0.5"
               name="SomeIcon" alpha="255">
        <Image resource="[COMPLICATION.MONOCHROMATIC_IMAGE]"/>
    </PartImage>
    <PartText x="18" y="39" width="56" height="22" pivotX="0.5" pivotY="0.5"
              name="SomeText" alpha="255">
        <Text align="CENTER" ellipsis="TRUE">
            <Font family="SYNC_TO_DEVICE" size="20" weight="NORMAL"
                  slant="NORMAL" color="#ffffffff">
                <Template>
                    %s
                    <Parameter expression="[COMPLICATION.TEXT]"/>
                </Template>
            </Font>
        </Text>
    </PartText>
    <PartText x="19" y="62" width="54" height="14" pivotX="0.5" pivotY="0.5"
              name="SomeTitle" alpha="255">
        <Text align="CENTER" ellipsis="TRUE">
            <Font family="SYNC_TO_DEVICE" size="12" weight="NORMAL"
                  slant="NORMAL" color="#ffadadad">
                <Template>
                    %s
                    <Parameter expression="[COMPLICATION.TITLE]"/>
                </Template>
            </Font>
        </Text>
    </PartText>
</Complication>

Attributes

The Complication element must contain a type attribute. The element is rendered if the user chooses a matching complication type. See Complication Types for details.

Inner elements

The Complication element can contain any number of the following inner elements: