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 attenuate battery impression. Builders have embraced the simplicity of making watch faces utilizing Watch Face Format – within the final 12 months, the variety of revealed watch faces utilizing Watch Face Format has grown by over 180%*.
At present, 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 enable builders to precise even better ranges of creativity by means of the brand new options we’ve added. And we’re supporting marketplaces, which supplies flexibility and management to builders and extra alternative for customers.
On this weblog publish we’ll cowl key new options, try 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, accessible on gadgets working Put on OS 6 and above, works completely 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 likely be bringing their distinctive watch face experiences to Put on OS 6 utilizing Watch Face Push.
![]()
From left to proper, Facer, Recreative and TIMEFLIK watch faces have been creating market apps to work with watches working Put on OS 6.
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 means of Google Play, although there are some further 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 could have management and duty for the cellphone 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 required permission in your AndroidManifest.xml:
"com.google.put on.permission.PUSH_WATCH_FACES" />
Receive 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 could have already put in, or add a brand new watch face:
// Listing 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 grasp 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 energetic watch faces – By a further permission, the app can set the energetic watch face. Study tips on how to combine this characteristic, in addition to tips on how to deal with the completely different permission eventualities.
To be taught extra about utilizing Watch Face Push, see the steerage and reference documentation.
Updates to Watch Face Format
Images
Out there from Watch Face Format v4
The brand new Images ingredient permits the watch face to include user-selectable images. The ingredient helps each particular person images and a gallery of images. For a gallery of images, builders can select whether or not the images advance robotically or when the person faucets the watch face.
![]()
Configuring images by means of the watch Companion app
The person is ready to choose the images 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 characteristic, first add the required configuration:
"myPhoto" configType="SINGLE"/>
Then use the Images ingredient inside any PartImage, in the identical means as you’ll for an Picture ingredient:
"[CONFIGURATION.myPhoto]"
defaultImageResource="placeholder_photo"/>
For particulars on tips on how to help a number of images, and tips on how to configure the completely different change behaviors, check with the Images part of the steerage and reference, in addition to the GitHub samples.
Transitions
Out there from Watch Face Format v4
Watch Face Format now helps transitions when exiting and getting into ambient mode.
![]()
State transition animation: Instance utilizing an overshoot impact in revealing the seconds digits
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:
"AMBIENT" goal="x" worth="100" interpolation="OVERSHOOT" />
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 using OVERSHOOT provides a playful expertise.
The seconds are carried out in a separate DigitalClock ingredient, which exhibits using the brand new period attribute:
"AMBIENT" goal="alpha" worth="0" period="0.5"/>
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, by utilizing a price of 0.5, the seconds animation is faster – taking half the allowed time, compared to the hours and minutes, which take your entire transition interval.
For extra particulars on utilizing transitions, see the steerage documentation, in addition to the reference documentation for Variant.
Coloration Transforms
Out there from Watch Face Format v4
We’ve prolonged the usefulness of the Remodel ingredient by permitting shade 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 similar to PartDraw and PartText.
The principle exceptions to this addition are the clock components, DigitalClock and AnalogClock, and likewise ComplicationSlot, which don’t at present help Remodel.
Along with extending the listing of transformable attributes to incorporate colours, we’ve additionally added a handful of helpful capabilities for manipulating shade:
- extractColorFromColors(colours, interpolate, worth)
- extractColorFromWeightedColors(colours, weights, interpolate, worth)
- colorArgb(alpha, pink, inexperienced, blue)
- colorRgb(pink, inexperienced, blue)
To see these in motion, let’s contemplate an instance.
The Climate knowledge supply offers the present UV index by means of [WEATHER.UV_INDEX]. When representing the UV index, these values are usually additionally assigned a shade:
![]()
We need to signify this data as an Arc, not solely exhibiting the worth, but in addition utilizing the suitable shade. We will obtain this as follows:
"0" centerY="0" top="420" width="420"
startAngle="165" endAngle="165" course="COUNTER_CLOCKWISE">
"endAngle"
worth="165 - 40 * (clamp(11, 0.0, 11.0) / 11.0)" />
"20" shade="#ffffff" cap="ROUND">
"shade"
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)" />
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 response to that worth.
- The second Remodel makes use of the brand new extractColorFromWeightedColors operate.
- The first argument is our listing 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 signify 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 like this:
![]()
Utilizing the brand new shade capabilities in making use of shade transforms to a Stroke in an Arc.
In addition to with the ability to present uncooked colours and weights to those capabilities, they can be used with values from issues, similar to HR, temperature or steps objective. For instance, to make use of the colour vary laid out in a objective complication:
"shade"
worth="extractColorFromColors(
[COMPLICATION.GOAL_PROGRESS_COLORS],
[COMPLICATION.GOAL_PROGRESS_COLOR_INTERPOLATE],
[COMPLICATION.GOAL_PROGRESS_VALUE] /
[COMPLICATION.GOAL_PROGRESS_TARGET_VALUE]
)"/>
Introducing the Reference ingredient
Out there from Watch Face Format v4
The brand new Reference ingredient lets you check with any transformable attribute from one a part of your watch face scene in different elements 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 shade scheme.
We may carry out the identical shade remodel calculation as on our Arc, utilizing [WEATHER.UV_INDEX], however that is duplicative work which may result in inconsistencies, for instance if we modify the precise shade hues in a single place however not the opposite.
Returning to the Arc definition, let’s create a Reference to the colour:
"0" centerY="0" top="420" width="420"
startAngle="165" endAngle="165" course="COUNTER_CLOCKWISE">
"endAngle"
worth="165 - 40 * (clamp(11, 0.0, 11.0) / 11.0)" />
"20" shade="#ffffff" cap="ROUND">
"shade" title="uv_color" defaultValue="#ffffff" />
"shade"
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)" />
The colour of the Arc is calculated from the comparatively advanced extractColorFromWeightedColors operate. To keep away from repeating this elsewhere in our watch face, we’ve got added a Reference ingredient, which takes as its supply the Stroke shade.
Let’s now take 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 check with this in any expression:
"0" y="225" width="450" top="225">
"225" centerY="0" width="420" top="420"
startAngle="120" endAngle="90"
align="START" course="COUNTER_CLOCKWISE">
"SYNC_TO_DEVICE" measurement="24">
"shade" worth="[REFERENCE.uv_color]" />
%d"[WEATHER.UV_INDEX]" />
Because of this, the colour of the Arc and the UV numeric worth are actually coordinated:
![]()
Coordinating colours throughout components utilizing the Reference ingredient
For extra particulars on tips on how to use the Reference ingredient, check with the Reference steerage.
Textual content autosizing
Out there from Watch Face Format v3
Generally the precise size of the textual content to be proven on the watch face can range, and as a developer you need to stability with the ability to show textual content that’s each legible, but in addition full.
Auto-sizing textual content might help clear up this drawback, and will be enabled by means of the isAutoSize attribute launched to the Textual content ingredient:
"CENTER" isAutoSize="true">
Having set this attribute, textual content will then robotically match the accessible house, beginning on the most measurement laid out in your Font ingredient, and with a minimal measurement of 12.
For example, step depend may vary from tens or a whole bunch by means of to many hundreds, and the brand new isAutoSize attribute allows greatest use of the accessible house for each potential worth:
![]()
Making the perfect use of the accessible textual content house by means of isAutoSize
For extra particulars on isAutoSize, see the Textual content reference.
Android Studio help
For builders working in Android Studio, we’ve added help to make working with Watch Face Format simpler, together with:
- Run configuration help
- Auto-complete and useful resource reference
- Lint checking
That is accessible from Android Studio Canary model 2025.1.1 Canary 10.
Study Extra
To be taught 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 challenge 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 Might 22.
* Google Play knowledge for interval 2025-03-24 to 2025-03-23
