Posted by Garan Jenkin – Developer Relations Engineer

Put on OS has a thriving watch face ecosystem that includes a wide range of designs that additionally goals to attenuate battery impression. Builders have embraced the simplicity of making watch faces utilizing Watch Face Format – within the final 12 months, the variety of printed watch faces utilizing Watch Face Format has grown by over 180%^*.

At the moment, we’re persevering with our funding and asserting model 4 of the Watch Face Format, obtainable as a part of Put on OS 6. These updates enable builders to precise even better ranges of creativity by the brand new options we’ve added. And we’re supporting marketplaces, which supplies flexibility and management to builders and extra selection for customers.

On this weblog put up we’ll cowl key new options, take a look at the documentation for extra particulars of adjustments launched in latest variations.

Supporting marketplaces with Watch Face Push

We’re additionally asserting a very new API, the Watch Face Push API, geared toward builders who need to create their very own watch face marketplaces.

Watch Face Push, obtainable on gadgets working Put on OS 6 and above, works solely with watch faces that use the Watch Face Format watch faces.

We’ve partnered with well-known watch face builders – together with Facer, TIMEFLIK, WatchMaker, Pujie, and Recreative – in designing this new API. We’re excited that every one of those builders will probably be bringing their distinctive watch face experiences to Put on OS 6 utilizing Watch Face Push.

Watch faces managed and deployed utilizing Watch Face Push are all written utilizing Watch Face Format. Builders publish these watch faces in the identical means as publishing by Google Play, although there are some extra checks the developer should make that are described within the Watch Face Push steerage.

The Watch Face Push API covers solely the watch a part of this typical market system diagram – because the app developer, you’ve got management and accountability for the telephone app and cloud elements, in addition to for constructing the Put on OS app utilizing Watch Face Push. You’re additionally in command of the phone-watch communications, for which we advocate utilizing the Knowledge Layer APIs.

Including Watch Face Push to your challenge

To start out utilizing Watch Face Push on Put on OS 6, embody the next dependency in your Put on OS app:

// Guarantee newest model is utilized by checking the repository
implementation("androidx.put on.watchface:watchface-push:1.3.0-alpha07")

Declare the required permission in your AndroidManifest.xml:

<uses-permission android:identify="com.google.put on.permission.PUSH_WATCH_FACES" />

Acquire a Watch Face Push shopper:

val supervisor = WatchFacePushManagerFactory.createWatchFacePushManager(context)

You’re now prepared to begin utilizing the Watch Face Push API, for instance to listing the watch faces you’ve got already put in, or add a brand new watch face:

// Listing present watch faces, put in by this app
val listResponse = supervisor.listWatchFaces()

// Add a watch face
supervisor.addWatchFace(watchFaceFileDescriptor, validationToken)

Understanding Watch Face Push

Whereas the fundamentals of the Watch Face Push API are simple to grasp and entry by the WatchFacePushManager interface, it’s vital to think about a number of different components when working with the API in observe to construct an efficient market app, together with:

• Setting lively watch faces – By an extra permission, the app can set the lively watch face. Study learn how to combine this characteristic, in addition to learn how to deal with the completely different permission situations.

To be taught extra about utilizing Watch Face Push, see the steerage and reference documentation.

Updates to Watch Face Format

Photographs

Accessible from Watch Face Format v4

The brand new Photographs aspect permits the watch face to include user-selectable images. The aspect helps each particular person images and a gallery of images. For a gallery of images, builders can select whether or not the images advance routinely or when the person faucets the watch face.

The person is ready to choose the images of their selection by the companion app, making this an effective way to incorporate true personalization in your watch face. To make use of this characteristic, first add the required configuration:

<UserConfigurations>
  <PhotosConfiguration id="myPhoto" configType="SINGLE"/>
</UserConfigurations>

Then use the Photographs aspect inside any PartImage, in the identical means as you’ll for an Picture aspect:

<PartImage ...>
  <Photographs supply="[CONFIGURATION.myPhoto]"
          defaultImageResource="placeholder_photo"/>
</PartImage>

For particulars on learn how to assist a number of images, and learn how to configure the completely different change behaviors, seek advice from the Photographs part of the steerage and reference, in addition to the GitHub samples.

Transitions

Accessible from Watch Face Format v4

Watch Face Format now helps transitions when exiting and getting into ambient mode.

That is achieved by the present Variant tag. For instance, the hours and minutes within the above watch face are animated as follows:

<DigitalClock ...>
  <Variant mode="AMBIENT" goal="x" worth="100" interpolation="OVERSHOOT" />

   <!-- Remainder of "hh:mm" clock definition right here -->
</DigitalClock>

By default, the animation takes the total extent of allowed time for the transition. The brand new interpolation attribute controls the animation impact – on this case using OVERSHOOT provides a playful expertise.

The seconds are carried out in a separate DigitalClock aspect, which reveals using the brand new period attribute:

<DigitalClock ...>
  <Variant mode="AMBIENT" goal="alpha" worth="0" period="0.5"/>
   <!-- Remainder of "ss" clock definition right here -->
</DigitalClock>

The period attribute takes a price between 0.0 and 1.0, with 1.0 representing the total extent of the allowed time. On this instance, through the use of a price of 0.5, the seconds animation is faster – taking half the allowed time, compared to the hours and minutes, which take the complete transition interval.

For extra particulars on utilizing transitions, see the steerage documentation, in addition to the reference documentation for Variant.

Colour Transforms

Accessible from Watch Face Format v4

We’ve prolonged the usefulness of the Rework aspect by permitting coloration to be reworked on the vast majority of components the place it’s an attribute, and likewise permitting tintColor to be reworked on Group and Half^* components corresponding to PartDraw and PartText.

The principle exceptions to this addition are the clock components, DigitalClock and AnalogClock, and likewise ComplicationSlot, which don’t at the moment assist Rework.

Along with extending the listing of transformable attributes to incorporate colours, we’ve additionally added a handful of helpful features for manipulating coloration:

• extractColorFromColors(colours, interpolate, worth)
• extractColorFromWeightedColors(colours, weights, interpolate, worth)
• colorArgb(alpha, purple, inexperienced, blue)
• colorRgb(purple, inexperienced, blue)

To see these in motion, let’s contemplate an instance.

The Climate knowledge supply offers the present UV index by [WEATHER.UV_INDEX]. When representing the UV index, these values are usually additionally assigned a coloration:

We need to characterize this info as an Arc, not solely displaying the worth, but additionally utilizing the suitable coloration. We will obtain this as follows:

<Arc centerX="0" centerY="0" top="420" width="420"
  startAngle="165" endAngle="165" path="COUNTER_CLOCKWISE">
  <Rework goal="endAngle"
    worth="165 - 40 * (clamp(11, 0.0, 11.0) / 11.0)" />
  <Stroke thickness="20" coloration="#ffffff" cap="ROUND">
    <Rework goal="coloration"
      worth="extractColorFromWeightedColors(#97d700 #FCE300 #ff8200 #f65058 #9461c9, 3 3 2 3 1, false, clamp([WEATHER.UV_INDEX] + 0.5, 0.0, 12.0) / 12.0)" />
  </Stroke>
</Arc>

Let’s break this down:

• The primary Rework restricts the UV index to the vary 0.0 to 11.0 and adjusts the sweep of the Arc in response to that worth.
• The second Rework makes use of the brand new extractColorFromWeightedColors perform.
• The first argument is our listing of colours
• The second argument is an inventory of weights – you’ll be able to see from the chart above that inexperienced covers 3 values, whereas orange solely covers 2, so we use weights to characterize this.
• The third argument is whether or not or to not interpolate the colour values. On this case we need to stick strictly to the colour conference for UV index, so that is false.
• Lastly within the fourth argument we coerce the UV worth into the vary 0.0 to 1.0, which is used as an index into our weighted colours.

The consequence seems to be like this:

In addition to having the ability to present uncooked colours and weights to those features, they will also be used with values from issues, corresponding to HR, temperature or steps aim. For instance, to make use of the colour vary laid out in a aim complication:

<Rework goal="coloration"
    worth="extractColorFromColors(
        [COMPLICATION.GOAL_PROGRESS_COLORS],
        [COMPLICATION.GOAL_PROGRESS_COLOR_INTERPOLATE],
        [COMPLICATION.GOAL_PROGRESS_VALUE] /    
            [COMPLICATION.GOAL_PROGRESS_TARGET_VALUE]
)"/>

Introducing the Reference aspect

Accessible from Watch Face Format v4

The brand new Reference aspect means that you can seek advice from any transformable attribute from one a part of your watch face scene in different components of the scene tree.

In our UV index instance above, we’d additionally just like the textual content labels to make use of the identical coloration scheme.

We might carry out the identical coloration rework calculation as on our Arc, utilizing [WEATHER.UV_INDEX], however that is duplicative work which might result in inconsistencies, for instance if we modify the precise coloration hues in a single place however not the opposite.

Returning to the Arc definition, let’s create a Reference to the colour:

<Arc centerX="0" centerY="0" top="420" width="420"
  startAngle="165" endAngle="165" path="COUNTER_CLOCKWISE">
  <Rework goal="endAngle"
    worth="165 - 40 * (clamp(11, 0.0, 11.0) / 11.0)" />
  <Stroke thickness="20" coloration="#ffffff" cap="ROUND">
    <Reference supply="coloration" identify="uv_color" defaultValue="#ffffff" />
    <Rework goal="coloration"
      worth="extractColorFromWeightedColors(#97d700 #FCE300 #ff8200 #f65058 #9461c9, 3 3 2 3 1, false, clamp([WEATHER.UV_INDEX] + 0.5, 0.0, 12.0) / 12.0)" />
  </Stroke>
</Arc>

The colour of the Arc is calculated from the comparatively complicated extractColorFromWeightedColors perform. To keep away from repeating this elsewhere in our watch face, we’ve added a Reference aspect, which takes as its supply the Stroke coloration.

Let’s now have a look at how we are able to devour this worth in a PartText elsewhere within the watch face. We gave the Reference the identify uv_color, so we are able to merely seek advice from this in any expression:

<PartText x="0" y="225" width="450" top="225">
  <TextCircular centerX="225" centerY="0" width="420" top="420"
    startAngle="120" endAngle="90"
    align="START" path="COUNTER_CLOCKWISE">
    <Font household="SYNC_TO_DEVICE" measurement="24">
      <Rework goal="coloration" worth="[REFERENCE.uv_color]" />
      <Template>%d<Parameter expression="[WEATHER.UV_INDEX]" /></Template>
    </Font>
  </TextCircular>
</PartText>
<!-- Comparable PartText right here for the "UV:" label -->

In consequence, the colour of the Arc and the UV numeric worth at the moment are coordinated:

For extra particulars on learn how to use the Reference aspect, seek advice from the Reference steerage.

Textual content autosizing

Accessible from Watch Face Format v3

Typically the precise size of the textual content to be proven on the watch face can differ, and as a developer you need to steadiness having the ability to show textual content that’s each legible, but additionally full.

Auto-sizing textual content may also help remedy this drawback, and may be enabled by the isAutoSize attribute launched to the Textual content aspect:

<Textual content align="CENTER" isAutoSize="true">

Having set this attribute, textual content will then routinely match the obtainable area, beginning on the most measurement laid out in your Font aspect, and with a minimal measurement of 12.

For instance, step depend might vary from tens or a whole bunch by to many hundreds, and the brand new isAutoSize attribute permits finest use of the obtainable area for each attainable worth:

For extra particulars on isAutoSize, see the Textual content reference.

Android Studio assist

For builders working in Android Studio, we’ve added assist to make working with Watch Face Format simpler, together with:

• Run configuration assist
• Auto-complete and useful resource reference
• Lint checking

That is obtainable from Android Studio Canary model 2025.1.1 Canary 10.

Be taught Extra

To be taught extra about constructing watch faces, please check out the next assets:

We’ve additionally just lately launched a codelab for Watch Face Format and have up to date samples on GitHub to showcase new options. The subject tracker is out there for offering suggestions.

We’re excited to see the watch face experiences that you just create and share!

Discover this announcement and all Google I/O 2025 updates on io.google beginning Could 22.

^* Google Play knowledge for interval 2025-03-24 to 2025-03-23