What’s new in Watch Faces

Posted by Garan Jenkin – Developer Relations Engineer

Put on OS has a thriving watch face ecosystem that includes quite a lot of designs that additionally goals to reduce battery affect. Builders have embraced the simplicity of making watch faces utilizing Watch Face Format – within the final yr, the variety of printed watch faces utilizing Watch Face Format has grown by over 180%^*.

Right this moment, we’re persevering with our funding and asserting model 4 of the Watch Face Format, accessible as a part of Put on OS 6. These updates permit builders to precise even larger ranges of creativity by means of the brand new options we’ve added. And we’re supporting marketplaces, which provides flexibility and management to builders and extra alternative for customers.

On this weblog put up we’ll cowl key new options, try the documentation for extra particulars of adjustments launched in current variations.

Supporting marketplaces with Watch Face Push

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

Watch Face Push, accessible on units operating 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 manner as publishing by means of Google Play, although there are some further checks the developer should make that are described within the Watch Face Push steering.

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

Including Watch Face Push to your undertaking

To start out utilizing Watch Face Push on Put on OS 6, embrace 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 mandatory permission in your AndroidManifest.xml:

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

Get hold of 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 record the watch faces you’ve already put in, or add a brand new watch face:

// Checklist current 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 straightforward to know and entry by means of the WatchFacePushManager interface, it’s vital to think about a number of different elements when working with the API in apply to construct an efficient market app, together with:

• Setting lively watch faces – Via a further permission, the app can set the lively watch face. Find out about methods to combine this function, in addition to methods to deal with the totally different permission eventualities.

To study extra about utilizing Watch Face Push, see the steering and reference documentation.

Updates to Watch Face Format

Pictures

Accessible from Watch Face Format v4

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

The person is ready to choose the photographs of their alternative by means of the companion app, making this a good way to incorporate true personalization in your watch face. To make use of this function, first add the mandatory configuration:

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

Then use the Pictures component inside any PartImage, in the identical manner as you’ll for an Picture component:

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

For particulars on methods to assist a number of photographs, and methods to configure the totally different change behaviors, discuss with the Pictures part of the steering 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 means of 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 complete extent of allowed time for the transition. The brand new interpolation attribute controls the animation impact – on this case the usage of OVERSHOOT provides a playful expertise.

The seconds are carried out in a separate DigitalClock component, which reveals the usage of 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 complete 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 whole transition interval.

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

Colour Transforms

Accessible from Watch Face Format v4

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

The primary exceptions to this addition are the clock components, DigitalClock and AnalogClock, and likewise ComplicationSlot, which don’t presently assist Remodel.

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

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

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

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

We need to symbolize this info as an Arc, not solely exhibiting the worth, but additionally utilizing the suitable coloration. We are able to obtain this as follows:

<Arc centerX="0" centerY="0" top="420" width="420"
  startAngle="165" endAngle="165" path="COUNTER_CLOCKWISE">
  <Remodel goal="endAngle"
    worth="165 - 40 * (clamp(11, 0.0, 11.0) / 11.0)" />
  <Stroke thickness="20" coloration="#ffffff" cap="ROUND">
    <Remodel 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 Remodel restricts the UV index to the vary 0.0 to 11.0 and adjusts the sweep of the Arc in line with that worth.
• The second Remodel makes use of the brand new extractColorFromWeightedColors operate.
• The first argument is our record of colours
• The second argument is a listing of weights – you possibly can see from the chart above that inexperienced covers 3 values, whereas orange solely covers 2, so we use weights to symbolize 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 end result appears to be like like this:

In addition to with the ability to present uncooked colours and weights to those capabilities, they may also be used with values from problems, similar to HR, temperature or steps objective. For instance, to make use of the colour vary laid out in a objective complication:

<Remodel 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 component

Accessible from Watch Face Format v4

The brand new Reference component lets you discuss with 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 may carry out the identical coloration rework calculation as on our Arc, utilizing [WEATHER.UV_INDEX], however that is duplicative work which may result in inconsistencies, for instance if we alter 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">
  <Remodel goal="endAngle"
    worth="165 - 40 * (clamp(11, 0.0, 11.0) / 11.0)" />
  <Stroke thickness="20" coloration="#ffffff" cap="ROUND">
    <Reference supply="coloration" title="uv_color" defaultValue="#ffffff" />
    <Remodel 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 operate. To keep away from repeating this elsewhere in our watch face, we now have added a Reference component, which takes as its supply the Stroke coloration.

Let’s now have a look at how we will eat this worth in a PartText elsewhere within the watch face. We gave the Reference the title uv_color, so we will merely discuss with 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" dimension="24">
      <Remodel 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 -->

Consequently, the colour of the Arc and the UV numeric worth are actually coordinated:

For extra particulars on methods to use the Reference component, discuss with the Reference steering.

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 range, and as a developer you need to steadiness with the ability to show textual content that’s each legible, but additionally full.

Auto-sizing textual content may also help remedy this downside, and might be enabled by means of the isAutoSize attribute launched to the Textual content component:

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

Having set this attribute, textual content will then robotically match the accessible area, beginning on the most dimension laid out in your Font component, and with a minimal dimension of 12.

For instance, step rely may vary from tens or lots of by means of to many hundreds, and the brand new isAutoSize attribute allows greatest use of the accessible area for each doable 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 accessible from Android Studio Canary model 2025.1.1 Canary 10.

Be taught Extra

To study extra about constructing watch faces, please check out the next sources:

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

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

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

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