Work with text
Stay organized with collections Save and categorize content based on your preferences.

For digital clocks, you should aim to use DigitalClock where possible. For all other text or clocks that cannot be represented using DigitalClock, PartText is the container for text-based rendering.

Depending on whether you want to show circular or regular text, the PartText should contain either a Text or a TextCircular element.

Work with fonts and bitmap fonts

Using custom fonts allows your watch face to stand out with its own style.

There are two ways to use custom fonts, both within TimeText and PartText containers.

Specify a custom font family in the Font element. A range of common formats are supported, which must be placed in res/font

For example, using the Pacifico font from Google Fonts, and placing the asset as res/font/pacifico.ttf:
```
<PartText x="0" y="100" width="450" height="250">
  <Text align="CENTER">
    <Font family="pacifico" size="96">Hello!</Font>
  </Text>
</PartText>
```

Alternatively, define a BitmapFont supplying bitmap images in res/drawable:

<WatchFace width="450" height="450" clipShape="CIRCLE">
<BitmapFonts>
    <BitmapFont name="myhandwriting">
    <Character name="1" resource="digit1" width="50" height="100" />
    <Character name="2" resource="digit2" width="50" height="100" />
    <Character name="3" resource="digit3" width="50" height="100" />
    <Character name="4" resource="digit4" width="50" height="100" />
    <!-- ... -->
    <!-- Treat "12" specially, instead of a 1 followed by a 2-->
    <Word name="12" resource="digit12" width="80" height="100" />
    </BitmapFont>
</BitmapFonts>
<!-- ... -->

Note how sequences of characters can be given a special treatment. For example, if "12" was to be represented with a joined 1 and 2, this could be achieved using a Word element.

To use the defined font:

<TimeText ... format="hh:mm">
  <BitmapFont family="myhandwriting" size="48" color="#ff0000" />
</TimeText>

Text effects

Watch Face Format provides several text effects which can be applied, such as OutGlow and Shadow. To use these, apply them as subelements of the Font element:

<Font family="pacifico" size="96" color="#e2a0ff">
  <OutGlow color="#e8ffb7" radius="30">Hello!</OutGlow>
</Font>

Work with templates

Instead of static text, you may need to construct your text from data sources or expressions.

The Template element lets you do this:

<PartText x="100" y="150" width="300" height="120" >
  <Text align="CENTER">
    <Font family="pacifico" size="60" weight="BOLD" color="#ffffff">
      <Template>Day: %s<Parameter expression="[DAY_OF_WEEK_S]" /></Template>
    </Font>
  </Text>
</PartText>

Work with resources

If your static text is instead defined in a resource, such as in res/values/strings.xml, then it can be referenced as follows:

<PartText x="100" y="150" width="300" height="120" >
  <Text align="CENTER">
    <!-- greeting defined in res/values/strings.xml -->
    <Font family="pacifico" size="60" weight="BOLD" color="#ffffff">greeting</Font>
  </Text>
</PartText>

This also lets you localize your watch face using different resource qualifiers.

Handle spacing

There can be some challenges with working with spacing and text:

<!-- greeting defined in res/values/strings.xml -->
<!-- Works correctly: -->
<Font family="pacifico" size="60" weight="BOLD" color="#ffffff">greeting</Font>

<!-- Does not render in the right place because of whitespace -->
<Font family="pacifico" size="60" weight="BOLD" color="#ffffff">
    greeting
</Font>

This is because the spacing matters in XML. To avoid this situation, wrap your Font contents in a CDATA element:

<!-- Works correctly -->
<Font family="pacifico" size="60" weight="BOLD" color="#ffffff">
  <![CDATA[greeting]]>
</Font>

Another example can be seen when trying to center justify text:

<!-- Does not render as expected - leading spaces are a problem -->
<PartText x="100" y="150" width="250" height="120" >
  <Text align="CENTER">
    <Font family="pacifico" size="60" weight="BOLD" color="#ffffff">
       Hello
    </Font>
  </Text>
</PartText>

<!-- Works correctly -->
<PartText x="100" y="150" width="250" height="120" >
    <Text align="CENTER">
    <Font family="pacifico" size="60" weight="BOLD" color="#ffffff">
        <![CDATA[Hello]]>
    </Font>
    </Text>
</PartText>

Multiline text

To create multiline text, use the maxLines attribute on Text:

<PartText x="75" y="100" width="300" height="350" >
  <Text align="CENTER" maxLines="2">
    <Font family="pacifico" size="60" weight="BOLD" color="#ffffff">
      <![CDATA[Hello Wear OS world]]>
    </Font>
  </Text>
</PartText>

Work with text Stay organized with collections Save and categorize content based on your preferences.