{"id":277236,"date":"2025-05-24T13:39:33","date_gmt":"2025-05-24T13:39:33","guid":{"rendered":"https:\/\/michigandigitalnews.com\/index.php\/2025\/05\/24\/whats-new-in-watch-faces\/"},"modified":"2025-06-25T17:08:18","modified_gmt":"2025-06-25T17:08:18","slug":"whats-new-in-watch-faces","status":"publish","type":"post","link":"https:\/\/michigandigitalnews.com\/index.php\/2025\/05\/24\/whats-new-in-watch-faces\/","title":{"rendered":"What\u2019s new in Watch Faces"},"content":{"rendered":"<p> [ad_1]<br \/>\n<\/p>\n<div wp_automatic_readability=\"247.10900473934\">\n<meta content=\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEirC-HW9M-XO6PNfCB1lyyhuvOBFr1SiGMc2rxIIr7k2wd-E86U4_YBbRNfaXG2w2Tu8xgJ0xhrD_UXRK1uIRw8EyY-ldztQVSf4EnCJL2l3Rvj9lhVU9siNOzcpwLJmKDvjueoCya42LGR7_qig0fgf77n8q7Ck6ZCQ96ct0mk6O5Y5WgiFmG5Y6T68NA\/s1600\/new-watch-faces-google-io-meta.png\" name=\"twitter:image\"\/><br \/>\n<img decoding=\"async\" src=\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEirC-HW9M-XO6PNfCB1lyyhuvOBFr1SiGMc2rxIIr7k2wd-E86U4_YBbRNfaXG2w2Tu8xgJ0xhrD_UXRK1uIRw8EyY-ldztQVSf4EnCJL2l3Rvj9lhVU9siNOzcpwLJmKDvjueoCya42LGR7_qig0fgf77n8q7Ck6ZCQ96ct0mk6O5Y5WgiFmG5Y6T68NA\/s1600\/new-watch-faces-google-io-meta.png\" style=\"display: none;\"\/><\/p>\n<p><em>Posted by Garan Jenkin \u2013 Developer Relations Engineer<\/em><\/p>\n<p><a href=\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEi28VnjatnNxirnQXdiRTZmI54gtyzRQsvpwvRlU7FfVHiKEwJU13alqfiJMQAU5jJXrZUAv5jzs5wOYb7QYLpy_iekmqL-l74IAzZ0GtHhaVZ2zUhapb8jVGvWgEt5f7et1qteUIsO7Ou4vaQ0N9q7BfVtie30bGq2onZubnDNyeE28q2vRKuLhLH6Qrg\/s1600\/new-in-watch-faces-google-io-hero.png\"><img decoding=\"async\" border=\"0\" data-original-height=\"800\" data-original-width=\"100%\" src=\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEi28VnjatnNxirnQXdiRTZmI54gtyzRQsvpwvRlU7FfVHiKEwJU13alqfiJMQAU5jJXrZUAv5jzs5wOYb7QYLpy_iekmqL-l74IAzZ0GtHhaVZ2zUhapb8jVGvWgEt5f7et1qteUIsO7Ou4vaQ0N9q7BfVtie30bGq2onZubnDNyeE28q2vRKuLhLH6Qrg\/s1600\/new-in-watch-faces-google-io-hero.png\"\/><\/a><\/p>\n<p>Wear OS has a thriving watch face ecosystem featuring a variety of designs that also aims to minimize battery impact. Developers have embraced the simplicity of creating watch faces using <a href=\"https:\/\/developer.android.com\/training\/wearables\/wff\" target=\"_blank\" rel=\"noopener\">Watch Face Format<\/a> \u2013 in the last year, the number of published watch faces <b>using Watch Face Format has grown by over 180%<sup>*<\/sup><\/b>.<\/p>\n<p>Today, we\u2019re continuing our investment and announcing version 4 of the Watch Face Format, available as part of Wear OS 6. These updates allow developers to express even greater levels of creativity through the new features we\u2019ve added. And we\u2019re supporting marketplaces, which gives flexibility and control to developers and more choice for users.<\/p>\n<p>In this blog post we&#8217;ll cover key new features, check out the <a href=\"https:\/\/developer.android.com\/training\/wearables\/wff\/features#v3\" target=\"_blank\" rel=\"noopener\">documentation<\/a> for more details of changes introduced in recent versions.<\/p>\n<h2><span style=\"font-size: x-large;\">Supporting marketplaces with Watch Face Push<\/span><\/h2>\n<p>We\u2019re also announcing a completely new API, the <a href=\"https:\/\/developer.android.com\/training\/wearables\/watch-face-push\" target=\"_blank\" rel=\"noopener\">Watch Face Push API<\/a>, aimed at developers who want to create their own watch face marketplaces.<\/p>\n<p>Watch Face Push, available on devices running Wear OS 6 and above, works exclusively with watch faces that use the Watch Face Format watch faces.<\/p>\n<p>We\u2019ve partnered with well-known watch face developers \u2013 including <b><a href=\"https:\/\/www.facer.io\/\" target=\"_blank\" rel=\"noopener\">Facer<\/a><\/b>, <b><a href=\"https:\/\/timeflik.com\/\" target=\"_blank\" rel=\"noopener\">TIMEFLIK<\/a><\/b>, <b><a href=\"https:\/\/getwatchmaker.com\/\" target=\"_blank\" rel=\"noopener\">WatchMaker<\/a><\/b>, <b><a href=\"https:\/\/pujie.io\/\" target=\"_blank\" rel=\"noopener\">Pujie<\/a><\/b>, and <b><a href=\"https:\/\/www.recreative-watch.com\/\" target=\"_blank\" rel=\"noopener\">Recreative<\/a><\/b> \u2013 in designing this new API. We\u2019re excited that all of these developers will be bringing their unique watch face experiences to Wear OS 6 using Watch Face Push.<\/p>\n<p><image><\/p>\n<div style=\"text-align: center;\"><img decoding=\"async\" alt=\"Three mobile devices representing watch face marketplace apps for watches running Wear OS 6\" border=\"0\" id=\"imgCaption\" src=\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEjDyv-8Vl_8RJzaYVc-o3mfLUHi7xiutV4SEszm4wVbpGFMrZnE3zu_80k9tHrgbYfPfD-yDd5msNiDQ94a7IegsxAQlF1KWH2cbR64hfxXuZYmTBOEmsjIN2hcB3IKLm3EjyQK4lwO1zowTcq6NNm5pw1ElqyaeItQEPeVTjPstCscCPEamE3l3tTzVqI\/s16000\/watch-faces--wear-os-6-google-io.png\"\/><\/div>\n<p><imgcaption><center><em>From left to right, <b><a href=\"https:\/\/www.facer.io\/\" target=\"_blank\" rel=\"noopener\">Facer<\/a><\/b>, <b><a href=\"https:\/\/www.recreative-watch.com\/\" target=\"_blank\" rel=\"noopener\">Recreative<\/a><\/b> and <b><a href=\"https:\/\/timeflik.com\/\" target=\"_blank\" rel=\"noopener\">TIMEFLIK<\/a><\/b> watch faces have been developing marketplace apps to work with watches running Wear OS 6.<br \/>\n<\/em><\/center><\/imgcaption><\/image><\/p>\n<p>Watch faces managed and deployed using Watch Face Push are all written using Watch Face Format. Developers publish these watch faces in the same way as publishing through Google Play, though there are some additional checks the developer must make which are described in the Watch Face Push guidance.<\/p>\n<p><image><\/p>\n<div style=\"text-align: center;\"><img decoding=\"async\" alt=\"A flow diagram demonstrating the flow of information from Cloud-based storage to the user's phone where the app is installed, then transferred to be installed on a wearable device using the Wear OS App via the Watch Face Push API\" border=\"0\" id=\"imgCaption\" src=\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEi-nC-EsEWiCVL3UdRHPm_dFpM7wZH6ObVUZeAxydYT0D2ZEGaXPV_A3vdHC_NIRTK8KBy-tphrX24Per1OANsQrGXFlfGFqcedZLdqslGmXtai_ALgXbTg7KLI72C1kl8we_DqVabvw89Nltq9_NoPUJpZpnGvTLpniv5shD5aDCjkrg1dDHYixW6xp8A\/s16000\/watch-face-api-architecture-wear-os-6-google-io.png\"\/><\/div>\n<p><\/image><\/p>\n<p>The Watch Face Push API covers only the watch part of this typical marketplace system diagram &#8211; as the app developer, you have control and responsibility for the phone app and cloud components, as well as for building the Wear OS app using Watch Face Push. You\u2019re also in control of the phone-watch communications, for which we recommend using the <a href=\"https:\/\/developer.android.com\/training\/wearables\/data\/messages\" target=\"_blank\" rel=\"noopener\">Data Layer APIs<\/a>.<\/p>\n<h2><span style=\"font-size: x-large;\">Adding Watch Face Push to your project<\/span><\/h2>\n<p>To start using Watch Face Push on Wear OS 6, include the following dependency in your Wear OS app:<\/p>\n<p><!--Kotlin--><\/p>\n<div style=\"background: rgb(248, 248, 248); border: 0px; overflow: auto; width: auto;\" wp_automatic_readability=\"8\">\n<pre style=\"line-height: 125%; margin: 0px;\"><span style=\"color: #408080; font-style: italic;\">\/\/ Ensure latest version is used by checking the repository<\/span>\nimplementation(<span style=\"color: #ba2121;\">\"androidx.wear.watchface:watchface-push:1.3.0-alpha07\"<\/span>)\n<\/pre>\n<\/div>\n<p>Declare the necessary permission in your <span style=\"color: #0d904f; font-family: courier;\">AndroidManifest.xml:<\/span><\/p>\n<p><!--Kotlin--><\/p>\n<div style=\"background: rgb(248, 248, 248); border: 0px; overflow: auto; width: auto;\" wp_automatic_readability=\"7\">\n<pre style=\"line-height: 125%; margin: 0px;\"><uses-permission android:name=\"&lt;span\" style=\"color: #ba2121;\">\"com.google.wear.permission.PUSH_WATCH_FACES\" \/&gt;\n<\/uses-permission><\/pre>\n<\/div>\n<p>Obtain a Watch Face Push client:<\/p>\n<p><!--Kotlin--><\/p>\n<div style=\"background: rgb(248, 248, 248); border: 0px; overflow: auto; width: auto;\" wp_automatic_readability=\"7\">\n<pre style=\"line-height: 125%; margin: 0px;\"><span style=\"color: green; font-weight: bold;\">val<\/span> manager = WatchFacePushManagerFactory.createWatchFacePushManager(context)\n<\/pre>\n<\/div>\n<p>You\u2019re now ready to start using the Watch Face Push API, for example to list the watch faces you have already installed, or add a new watch face:<\/p>\n<p><!--Kotlin--><\/p>\n<div style=\"background: rgb(248, 248, 248); border: 0px; overflow: auto; width: auto;\" wp_automatic_readability=\"10\">\n<pre style=\"line-height: 125%; margin: 0px;\"><span style=\"color: #408080; font-style: italic;\">\/\/ List existing watch faces, installed by this app<\/span>\n<span style=\"color: green; font-weight: bold;\">val<\/span> listResponse = manager.listWatchFaces()\n\n<span style=\"color: #408080; font-style: italic;\">\/\/ Add a watch face<\/span>\nmanager.addWatchFace(watchFaceFileDescriptor, validationToken)\n<\/pre>\n<\/div>\n<p><\/p>\n<h2><span style=\"font-size: x-large;\">Understanding Watch Face Push<\/span><\/h2>\n<p>While the basics of the Watch Face Push API are easy to understand and access through the <span style=\"color: #0d904f; font-family: courier;\">WatchFacePushManager<\/span> interface, it\u2019s important to consider several other factors when working with the API in practice to build an effective marketplace app, including:<\/p>\n<ul>\n<ul>\n<li><b>Setting active watch faces<\/b> &#8211; Through an additional permission, the app can set the active watch face. Learn about <a href=\"https:\/\/developer.android.com\/training\/wearables\/watch-face-push#set-active-watchface\" target=\"_blank\" rel=\"noopener\">how to integrate this feature<\/a>, as well as how to handle the different permission scenarios.<\/li>\n<\/ul>\n<\/ul>\n<p>To learn more about using Watch Face Push, see the <a href=\"https:\/\/developer.android.com\/training\/wearables\/watch-face-push\" target=\"_blank\" rel=\"noopener\">guidance<\/a> and <a href=\"https:\/\/developer.android.com\/reference\/kotlin\/androidx\/wear\/watchface\/push\/package-summary\" target=\"_blank\" rel=\"noopener\">reference<\/a> documentation.<\/p>\n<h2><span style=\"font-size: x-large;\">Updates to Watch Face Format<\/span><\/h2>\n<h3><span style=\"font-size: large;\">Photos<\/span><\/h3>\n<p><i>Available from Watch Face Format v4<\/i><\/p>\n<p>The new <span style=\"color: #0d904f; font-family: courier;\">Photos<\/span> element allows the watch face to contain user-selectable photos. The element supports both  individual photos and a gallery of photos. For a gallery of photos, developers can choose whether the photos advance automatically or when the user taps the watch face.<\/p>\n<p><image><\/p>\n<div style=\"text-align: center;\"><img decoding=\"async\" alt=\"a wearable device and small screen mobile device side by side demonstrating how a user may configure photos for the watch face through the Companion app on the mobile device\" border=\"0\" id=\"imgCaption\" src=\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEilder6xB2opL02d5KbNW3AdFtHTqOtj31HGLSMHq7w86SZxR2q9KFCxstnXRhKlGZbjPuY_lUh3LTQD-EevrVx007pIo-skWBqHdFBgwGRZl7L1_LJwxBxQ5bAOxqAOehBMXeseM-2nvsXzFLua0aTy1HuyXAXRSnwB3rLwxjX-RronN2P9Ms8qUagmis\/s1600\/android-new-in-watch-faces-google-io-2025.png\"\/><\/div>\n<p><imgcaption><center><em>Configuring photos through the watch Companion app<\/em><\/center><\/imgcaption><\/image><\/p>\n<p>The user is able to select the photos of their choice through the companion app, making this a great way to include true personalization in your watch face. To use this feature, first add the necessary configuration:<\/p>\n<p><!--Kotlin--><\/p>\n<div style=\"background: rgb(248, 248, 248); border: 0px; overflow: auto; width: auto;\" wp_automatic_readability=\"7\">\n<pre style=\"line-height: 125%; margin: 0px;\"><userconfigurations>\n  <photosconfiguration id=\"&lt;span\" style=\"color: #ba2121;\">\"myPhoto\" configType=<span style=\"color: #ba2121;\">\"SINGLE\"<\/span>\/&gt;\n<\/photosconfiguration><\/userconfigurations>\n<\/pre>\n<\/div>\n<p>Then use the <span style=\"color: #0d904f; font-family: courier;\">Photos<\/span> element within any <span style=\"color: #0d904f; font-family: courier;\">PartImage<\/span>, in the same way as you would for an <span style=\"color: #0d904f; font-family: courier;\">Image element<\/span>:<\/p>\n<p><!--Kotlin--><\/p>\n<div style=\"background: rgb(248, 248, 248); border: 0px; overflow: auto; width: auto;\" wp_automatic_readability=\"7\">\n<pre style=\"line-height: 125%; margin: 0px;\"><partimage ...=\"\">\n  <photos source=\"&lt;span\" style=\"color: #ba2121;\">\"[CONFIGURATION.myPhoto]\"\n          defaultImageResource=<span style=\"color: #ba2121;\">\"placeholder_photo\"<\/span>\/&gt;\n<\/photos><\/partimage>\n<\/pre>\n<\/div>\n<p>For details on how to support multiple photos, and how to configure the different change behaviors, refer to the Photos section of the <a href=\"https:\/\/developer.android.com\/training\/wearables\/wff\/personalization\/photos\" target=\"_blank\" rel=\"noopener\">guidance<\/a> and <a href=\"https:\/\/developer.android.com\/reference\/wear-os\/wff\/group\/part\/image\/photos\" target=\"_blank\" rel=\"noopener\">reference<\/a>, as well as the <a href=\"https:\/\/github.com\/android\/wear-os-samples\/\" target=\"_blank\" rel=\"noopener\">GitHub samples<\/a>.<\/p>\n<h2><span style=\"font-size: x-large;\">Transitions<\/span><\/h2>\n<p><i>Available from Watch Face Format v4<\/i><\/p>\n<p>Watch Face Format now supports transitions when exiting and entering ambient mode.<\/p>\n<p><image><\/p>\n<div style=\"text-align: center;\"><img decoding=\"async\" alt=\"moving image demonstrating an overshoot effect adjusting the time on a watch face to reveal the seconds digit\" border=\"0\" height=\"200\" id=\"imgCaption\" src=\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEijb2JauAR197bVq1WgtiCZMFJfYsD0W41h5c0JruKUTCwlERsk7hTECkaMENR0AglGj2m7NiwrfDpfR12li_UC1eF57Wg-wfaFgh393YPdJIYtAM0gfu8oApRpjKRAxlJ6eEg6KkMNFMhqFPC5QmCnZqGws2lCVTAGzIRz3AKmE22YEdelXkcL1Tru2KU\/w200-h200\/overshoot-effect-watch-faces-wear-os-google-io.gif\" width=\"200\"\/><\/div>\n<p><imgcaption><center><em>State transition animation: Example using an overshoot effect in revealing the seconds digits<\/em><\/center><\/imgcaption><\/image><\/p>\n<p>This is achieved through the existing <span style=\"color: #0d904f; font-family: courier;\">Variant<\/span> tag. For example, the hours and minutes in the above watch face are animated as follows:<\/p>\n<p><!-- Kotlin --><\/p>\n<div style=\"background: #f8f8f8; overflow:auto;width:auto;border:0;\" wp_automatic_readability=\"7\">\n<pre style=\"margin: 0; line-height: 125%\"><digitalclock ...=\"\">\n  <variant mode=\"&lt;span\" style=\"color: #BA2121\">\"AMBIENT\" target=<span style=\"color: #BA2121\">\"x\"<\/span> value=<span style=\"color: #BA2121\">\"100\"<\/span> interpolation=<span style=\"color: #BA2121\">\"OVERSHOOT\"<\/span> \/&gt;\n\n   <!-- Rest of <span style=\"color: #BA2121\">&quot;hh:mm&quot;<\/span> clock definition here -->\n<\/variant><\/digitalclock>\n<\/pre>\n<\/div>\n<p>By default, the animation takes the full extent of allowed time for the transition.  The new <span style=\"color: #0d904f; font-family: courier;\">interpolation<\/span> attribute controls the animation effect &#8211; in this case the use of <span style=\"color: #0d904f; font-family: courier;\">OVERSHOOT<\/span> adds a playful experience.<\/p>\n<p>The seconds are implemented in a separate <span style=\"color: #0d904f; font-family: courier;\">DigitalClock<\/span> element, which shows the use of the new <span style=\"color: #0d904f; font-family: courier;\">duration<\/span> attribute:<\/p>\n<p><!--Kotlin--><\/p>\n<div style=\"background: rgb(248, 248, 248); border: 0px; overflow: auto; width: auto;\" wp_automatic_readability=\"7\">\n<pre style=\"line-height: 125%; margin: 0px;\"><digitalclock ...=\"\">\n  <variant mode=\"&lt;span\" style=\"color: #ba2121;\">\"AMBIENT\" target=<span style=\"color: #ba2121;\">\"alpha\"<\/span> value=<span style=\"color: #ba2121;\">\"0\"<\/span> duration=<span style=\"color: #ba2121;\">\"0.5\"<\/span>\/&gt;\n   <!-- Rest of <span style=\"color: #ba2121;\">\"ss\"<\/span> clock definition here -->\n<\/variant><\/digitalclock>\n<\/pre>\n<\/div>\n<p>The <span style=\"color: #0d904f; font-family: courier;\">duration<\/span> attribute takes a value between <span style=\"color: #0d904f; font-family: courier;\">0.0<\/span> and <span style=\"color: #0d904f; font-family: courier;\">1.0<\/span>, with <span style=\"color: #0d904f; font-family: courier;\">1.0<\/span> representing the full extent of the allowed time. In this example, by using a value of <span style=\"color: #0d904f; font-family: courier;\">0.5<\/span>, the seconds animation is quicker &#8211; taking half the allowed time, in comparison to the hours and minutes, which take the entire transition period.<\/p>\n<p>For more details on using transitions, see the <a href=\"https:\/\/developer.android.com\/training\/wearables\/wff\/transform\" target=\"_blank\" rel=\"noopener\">guidance documentation<\/a>, as well as the reference documentation for <span style=\"font-family: courier;\">Variant<\/span>.<\/p>\n<h2><span style=\"font-size: x-large;\">Color Transforms<\/span><\/h2>\n<p><i>Available from Watch Face Format v4<\/i><\/p>\n<p>We\u2019ve extended the usefulness of the <span style=\"color: #0d904f; font-family: courier;\">Transform<\/span> element by allowing <span style=\"color: #0d904f; font-family: courier;\">color<\/span> to be transformed on the majority of elements where it is an attribute, and also allowing <span style=\"color: #0d904f; font-family: courier;\">tintColor<\/span> to be transformed on <span style=\"color: #0d904f; font-family: courier;\">Group<\/span> and <span style=\"color: #0d904f; font-family: courier;\">Part<sup>*<\/sup><\/span> elements such as <span style=\"color: #0d904f; font-family: courier;\">PartDraw<\/span> and <span style=\"color: #0d904f; font-family: courier;\">PartText<\/span>.<\/p>\n<p>The main exceptions to this addition are the clock elements, <span style=\"color: #0d904f; font-family: courier;\">DigitalClock<\/span> and <span style=\"color: #0d904f; font-family: courier;\">AnalogClock<\/span>, and also <span style=\"color: #0d904f; font-family: courier;\">ComplicationSlot<\/span>, which do not currently support <span style=\"color: #0d904f; font-family: courier;\">Transform<\/span>.<\/p>\n<p>In addition to extending the list of transformable attributes to include colors, we\u2019ve also added a handful of useful functions for manipulating color:<\/p>\n<ul>\n<ul>\n<li><a href=\"https:\/\/developer.android.com\/reference\/wear-os\/wff\/common\/attributes\/arithmetic-expression#functions\" target=\"_blank\" rel=\"noopener\">extractColorFromColors(colors, interpolate, value)<\/a><\/li>\n<li><a href=\"https:\/\/developer.android.com\/reference\/wear-os\/wff\/common\/attributes\/arithmetic-expression#functions\" target=\"_blank\" rel=\"noopener\">extractColorFromWeightedColors(colors, weights, interpolate, value)<\/a><\/li>\n<li><a href=\"https:\/\/developer.android.com\/reference\/wear-os\/wff\/common\/attributes\/arithmetic-expression#functions\" target=\"_blank\" rel=\"noopener\">colorArgb(alpha, red, green, blue)<\/a><\/li>\n<li><a href=\"https:\/\/developer.android.com\/reference\/wear-os\/wff\/common\/attributes\/arithmetic-expression#functions\" target=\"_blank\" rel=\"noopener\">colorRgb(red, green, blue)<\/a><\/li>\n<\/ul>\n<\/ul>\n<p>To see these in action, let\u2019s consider an example.<\/p>\n<p>The Weather data source provides the current UV index through <span style=\"color: #0d904f; font-family: courier;\">[WEATHER.UV_INDEX]<\/span>. When representing the UV index, these values are <a href=\"https:\/\/en.wikipedia.org\/wiki\/Ultraviolet_index#Index_usage\" target=\"_blank\" rel=\"noopener\">typically also assigned a color<\/a>:<\/p>\n<p><image><\/p>\n<div style=\"text-align: center;\"><img fetchpriority=\"high\" decoding=\"async\" alt=\"moving image demonstrating an overshoot effect adjusting the time on a watch face to reveal the seconds digit\" border=\"0\" height=\"133\" id=\"imgCaption\" src=\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEgrs-GtIIjtk4sAcUWts5EDvOAeUjL61GYn9_fzOWfytLc4Sgwp5E8_24u_jEycjAMKWmG0LDBJoxWhQ7goco_Qz6bF48X11jeF-8tR86on-XATSqDSchseVMNUAPY1l7xIQlQ1tX-q6Eo0D2Rhc4wJcxBWw-WWoCxm5PHZZVO34_8njX95JRSXvNM0Bzc\/w640-h133\/uv-index-values-wear-os-6-google-io.png\" width=\"640\"\/><\/div>\n<p><\/image><\/p>\n<p>We want to represent this information as an <span style=\"color: #0d904f; font-family: courier;\">Arc<\/span>, not only showing the value, but also using the appropriate color. We can achieve this as follows:<\/p>\n<p><!--Kotlin--><\/p>\n<div style=\"background: rgb(248, 248, 248); border: 0px; overflow: auto; width: auto;\" wp_automatic_readability=\"17\">\n<pre style=\"line-height: 125%; margin: 0px;\"><arc centerx=\"&lt;span\" style=\"color: #ba2121;\">\"0\" centerY=<span style=\"color: #ba2121;\">\"0\"<\/span> height=<span style=\"color: #ba2121;\">\"420\"<\/span> width=<span style=\"color: #ba2121;\">\"420\"<\/span>\n  startAngle=<span style=\"color: #ba2121;\">\"165\"<\/span> endAngle=<span style=\"color: #ba2121;\">\"165\"<\/span> direction=<span style=\"color: #ba2121;\">\"COUNTER_CLOCKWISE\"<\/span>&gt;\n  <transform target=\"&lt;span\" style=\"color: #ba2121;\">\"endAngle\"\n    value=<span style=\"color: #ba2121;\">\"165 - 40 * (clamp(11, 0.0, 11.0) \/ 11.0)\"<\/span> \/&gt;\n  <stroke thickness=\"&lt;span\" style=\"color: #ba2121;\">\"20\" color=<span style=\"color: #ba2121;\">\"#ffffff\"<\/span> cap=<span style=\"color: #ba2121;\">\"ROUND\"<\/span>&gt;\n    <transform target=\"&lt;span\" style=\"color: #ba2121;\">\"color\"\n      value=<span style=\"color: #ba2121;\">\"extractColorFromWeightedColors(#97d700 #FCE300 #ff8200 #f65058 #9461c9, 3 3 2 3 1, false, clamp([WEATHER.UV_INDEX] + 0.5, 0.0, 12.0) \/ 12.0)\"<\/span> \/&gt;\n  <\/transform><\/stroke>\n<\/transform><\/arc>\n<\/pre>\n<\/div>\n<p>Let\u2019s break this down:<\/p>\n<ul>\n<ul>\n<li>The first <span style=\"color: #0d904f; font-family: courier;\">Transform<\/span> restricts the UV index to the range 0.0 to 11.0 and adjusts the sweep of the <span style=\"color: #0d904f; font-family: courier;\">Arc<\/span> according to that value.<\/li>\n<\/ul>\n<ul>\n<li>The second <span style=\"color: #0d904f; font-family: courier;\">Transform<\/span> uses the new <span style=\"color: #0d904f; font-family: courier;\">extractColorFromWeightedColors<\/span> function.<\/li>\n<ul>\n<ul>\n<li>The <b>first<\/b> argument is our list of colors<\/li>\n<\/ul>\n<ul>\n<li>The <b>second<\/b> argument is a list of weights &#8211; you can see from the chart above that green covers 3 values, whereas orange only covers 2, so we use weights to represent this.<\/li>\n<\/ul>\n<ul>\n<li>The <b>third<\/b> argument is whether or not to interpolate the color values. In this case we want to stick strictly to the color convention for UV index, so this is false.<\/li>\n<\/ul>\n<ul>\n<li>Finally in the <b>fourth<\/b> argument we coerce the UV value into the range <span style=\"color: #0d904f; font-family: courier;\">0.0<\/span> to <span style=\"color: #0d904f; font-family: courier;\">1.0<\/span>, which is used as an index into our weighted colors.<\/li>\n<\/ul>\n<\/ul>\n<\/ul>\n<\/ul>\n<p>The result looks like this:<\/p>\n<p><image><\/p>\n<div style=\"text-align: center;\"><img decoding=\"async\" alt=\"side by side quadrants of watch face examples showing using the new color functions in applying color transforms to a Stroke in an Arc\" border=\"0\" id=\"imgCaption\" src=\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEiHABmwTjM-OTP9l1KZxgmHrXVkgu5lCkaJ_fUhgM6vso6ZERq2j_p24x_WVxDAyx7nBGPmGrRatZqwgZEeJgLxBF42SDxUSEyPbYtezXMablU9US-dEO4_oiAA7RjR9ZD_m1NZPxwCRytT4WRXbwGG5Iti2yP99b5gzXu2eEzgIpiKVfqWkYIfsfOyAUk\/s16000\/color-function-transformation-stroke-arc-watch-face-wear-os.png\"\/><\/div>\n<p><imgcaption><center><em>Using the new color functions in applying color transforms to a <span style=\"color: #0d904f; font-family: courier;\">Stroke<\/span> in an <span style=\"color: #0d904f; font-family: courier;\">Arc.<\/span><\/em><\/center><\/imgcaption><\/image><\/p>\n<p>As well as being able to provide raw colors and weights to these functions, they can also be used with values from complications, such as HR, temperature or steps goal. For example, to use the color range specified in a goal complication:<\/p>\n<p><!--Kotlin--><\/p>\n<div style=\"background: rgb(248, 248, 248); border: 0px; overflow: auto; width: auto;\" wp_automatic_readability=\"11\">\n<pre style=\"line-height: 125%; margin: 0px;\"><transform target=\"&lt;span\" style=\"color: #ba2121;\">\"color\"\n    value=<span style=\"color: #ba2121;\">\"extractColorFromColors(<\/span>\n<span style=\"color: #7d9029;\">        [COMPLICATION.GOAL_PROGRESS_COLORS]<\/span>,\n<span style=\"color: #7d9029;\">        [COMPLICATION.GOAL_PROGRESS_COLOR_INTERPOLATE]<\/span>,\n<span style=\"color: #7d9029;\">        [COMPLICATION.GOAL_PROGRESS_VALUE]<\/span> \/    \n<span style=\"color: #7d9029;\">            [COMPLICATION.GOAL_PROGRESS_TARGET_VALUE]<\/span>\n)<span style=\"color: #ba2121;\">\"\/&gt;<\/span>\n<\/transform><\/pre>\n<\/div>\n<p><\/p>\n<h2><span style=\"font-size: x-large;\">Introducing the <span style=\"color: #0d904f; font-family: courier;\">Reference<\/span> element<\/span><\/h2>\n<p><i>Available from Watch Face Format v4<\/i><\/p>\n<p>The new <span style=\"color: #0d904f; font-family: courier;\">Reference<\/span> element allows you to refer to any transformable attribute from one part of your watch face scene in other parts of the scene tree.<\/p>\n<p>In our UV index example above, we\u2019d also like the text labels to use the same color scheme.<\/p>\n<p>We could perform the same color transform calculation as on our <span style=\"color: #0d904f; font-family: courier;\">Arc<\/span>, using <span style=\"color: #0d904f; font-family: courier;\">[WEATHER.UV_INDEX]<\/span>, but this is duplicative work which could lead to inconsistencies, for example if we change the exact color hues in one place but not the other.<\/p>\n<p>Returning to the <span style=\"color: #0d904f; font-family: courier;\">Arc<\/span> definition, let\u2019s create a <span style=\"color: #0d904f; font-family: courier;\">Reference<\/span> to the color:<\/p>\n<p><!--Kotlin--><\/p>\n<div style=\"background: rgb(248, 248, 248); border: 0px; overflow: auto; width: auto;\" wp_automatic_readability=\"17\">\n<pre style=\"line-height: 125%; margin: 0px;\"><arc centerx=\"&lt;span\" style=\"color: #ba2121;\">\"0\" centerY=<span style=\"color: #ba2121;\">\"0\"<\/span> height=<span style=\"color: #ba2121;\">\"420\"<\/span> width=<span style=\"color: #ba2121;\">\"420\"<\/span>\n  startAngle=<span style=\"color: #ba2121;\">\"165\"<\/span> endAngle=<span style=\"color: #ba2121;\">\"165\"<\/span> direction=<span style=\"color: #ba2121;\">\"COUNTER_CLOCKWISE\"<\/span>&gt;\n  <transform target=\"&lt;span\" style=\"color: #ba2121;\">\"endAngle\"\n    value=<span style=\"color: #ba2121;\">\"165 - 40 * (clamp(11, 0.0, 11.0) \/ 11.0)\"<\/span> \/&gt;\n  <stroke thickness=\"&lt;span\" style=\"color: #ba2121;\">\"20\" color=<span style=\"color: #ba2121;\">\"#ffffff\"<\/span> cap=<span style=\"color: #ba2121;\">\"ROUND\"<\/span>&gt;\n    <reference source=\"&lt;span\" style=\"color: #ba2121;\">\"color\" name=<span style=\"color: #ba2121;\">\"uv_color\"<\/span> defaultValue=<span style=\"color: #ba2121;\">\"#ffffff\"<\/span> \/&gt;\n    <transform target=\"&lt;span\" style=\"color: #ba2121;\">\"color\"\n      value=<span style=\"color: #ba2121;\">\"extractColorFromWeightedColors(#97d700 #FCE300 #ff8200 #f65058 #9461c9, 3 3 2 3 1, false, clamp([WEATHER.UV_INDEX] + 0.5, 0.0, 12.0) \/ 12.0)\"<\/span> \/&gt;\n  <\/transform><\/reference><\/stroke>\n<\/transform><\/arc>\n<\/pre>\n<\/div>\n<p>The color of the <span style=\"color: #0d904f; font-family: courier;\">Arc<\/span> is calculated from the relatively complex <span style=\"color: #0d904f; font-family: courier;\">extractColorFromWeightedColors<\/span> function. To avoid repeating this elsewhere in our watch face, we have added a <span style=\"color: #0d904f; font-family: courier;\">Reference<\/span> element, which takes as its source the <span style=\"color: #0d904f; font-family: courier;\">Stroke<\/span> color.<\/p>\n<p>Let\u2019s now look at how we can consume this value in a <span style=\"color: #0d904f; font-family: courier;\">PartText<\/span> elsewhere in the watch face. We gave the <span style=\"color: #0d904f; font-family: courier;\">Reference<\/span> the name <span style=\"color: #0d904f; font-family: courier;\">uv_color<\/span>, so we can simply refer to this in any expression:<\/p>\n<p><!--Kotlin--><\/p>\n<div style=\"background: rgb(248, 248, 248); border: 0px; overflow: auto; width: auto;\" wp_automatic_readability=\"9\">\n<pre style=\"line-height: 125%; margin: 0px;\"><parttext x=\"&lt;span\" style=\"color: #ba2121;\">\"0\" y=<span style=\"color: #ba2121;\">\"225\"<\/span> width=<span style=\"color: #ba2121;\">\"450\"<\/span> height=<span style=\"color: #ba2121;\">\"225\"<\/span>&gt;\n  <textcircular centerx=\"&lt;span\" style=\"color: #ba2121;\">\"225\" centerY=<span style=\"color: #ba2121;\">\"0\"<\/span> width=<span style=\"color: #ba2121;\">\"420\"<\/span> height=<span style=\"color: #ba2121;\">\"420\"<\/span>\n    startAngle=<span style=\"color: #ba2121;\">\"120\"<\/span> endAngle=<span style=\"color: #ba2121;\">\"90\"<\/span>\n    align=<span style=\"color: #ba2121;\">\"START\"<\/span> direction=<span style=\"color: #ba2121;\">\"COUNTER_CLOCKWISE\"<\/span>&gt;\n    <font family=\"&lt;span\" style=\"color: #ba2121;\">\"SYNC_TO_DEVICE\" size=<span style=\"color: #ba2121;\">\"24\"<\/span>&gt;\n      <transform target=\"&lt;span\" style=\"color: #ba2121;\">\"color\" value=<span style=\"color: #ba2121;\">\"[REFERENCE.uv_color]\"<\/span> \/&gt;\n      <template>%d<parameter expression=\"&lt;span\" style=\"color: #ba2121;\">\"[WEATHER.UV_INDEX]\" \/&gt;<\/parameter><\/template>\n    <\/transform><\/font>\n  <\/textcircular>\n<\/parttext>\n<!-- Similar PartText here <span style=\"color: green; font-weight: bold;\">for<\/span> the <span style=\"color: #ba2121;\">\"UV:\"<\/span> label -->\n<\/pre>\n<\/div>\n<p>As a result, the color of the Arc and the UV numeric value are now coordinated:<\/p>\n<p><image><\/p>\n<div style=\"text-align: center;\"><img decoding=\"async\" alt=\"side by side quadrants of watch face examples showing Coordinating colors across elements using the Reference element\" border=\"0\" id=\"imgCaption\" src=\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhsUlGBDxKyi4nJYQBbx2jb4lIR8DmxABazY7D_FkMKvbvNBJArGM8NY2d9iz489F0IX5kP077pOZrP4t1M2mtt5HYS3AOGksQ-UWxwUH3qVTNDo09iiS4JRl3xV35rHxThXGbC9dCBXitFlXkudX8wOHnCNO1PPvPOjHMxchBIEiFjZbQOK4R1FHwAQpM\/s1600\/reference-element-watch-faces-wear-os-google-io.png\"\/><\/div>\n<p><imgcaption><center><em>Coordinating colors across elements using the <span style=\"color: #0d904f; font-family: courier;\">Reference<\/span> element<\/em><\/center><\/imgcaption><\/image><\/p>\n<p>For more details on how to use the <span style=\"font-family: courier;\"><a href=\"https:\/\/developer.android.com\/reference\/wear-os\/wff\/common\/reference\" target=\"_blank\" rel=\"noopener\">Reference<\/a><\/span> element, refer to the <span style=\"font-family: courier;\"><a href=\"https:\/\/developer.android.com\/reference\/wear-os\/wff\/common\/reference\/reference\" target=\"_blank\" rel=\"noopener\">Reference<\/a><\/span> guidance.<\/p>\n<h2><span style=\"font-size: x-large;\">Text autosizing<\/span><\/h2>\n<p><i>Available from Watch Face Format v3<\/i><\/p>\n<p>Sometimes the exact length of the text to be shown on the watch face can vary, and as a developer you want to balance being able to display text that is both legible, but also complete.<\/p>\n<p>Auto-sizing text can help solve this problem, and can be enabled through the <span style=\"color: #0d904f; font-family: courier;\">isAutoSize<\/span> attribute introduced to the <span style=\"color: #0d904f; font-family: courier;\">Text<\/span> element:<\/p>\n<p><!--Kotlin--><\/p>\n<div style=\"background: rgb(248, 248, 248); border: 0px; overflow: auto; width: auto;\" wp_automatic_readability=\"7\">\n<pre style=\"line-height: 125%; margin: 0px;\"><text align=\"&lt;span\" style=\"color: #ba2121;\">\"CENTER\" isAutoSize=<span style=\"color: #ba2121;\">\"true\"<\/span>&gt;\n<\/text><\/pre>\n<\/div>\n<p>Having set this attribute, text will then automatically fit the available space, starting at the maximum size specified in your <span style=\"color: #0d904f; font-family: courier;\">Font<\/span> element, and with a minimum size of 12.<\/p>\n<p>As an example, step count could range from tens or hundreds through to many thousands, and the new <span style=\"color: #0d904f; font-family: courier;\">isAutoSize<\/span> attribute enables best use of the available space for every possible value:<\/p>\n<p><image><\/p>\n<div style=\"text-align: center;\"><img decoding=\"async\" alt=\"side by side examples of text sizing adjustments on watch face using isAutosize\" border=\"0\" id=\"imgCaption\" src=\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEjACl9z-Sc8H9w2dRpYiPlIwrpNQU5BVaqkE1JoqHqFRVkyX69J8W8g0weZWCt-bhREsOVLN4PXGjtIiLW4IV2aCEuMcqf62MYB_PUh7_wZs8vqG1PtKA80dt0jWjzgn7AL_d3hePpDBjqHj7hyphenhyphenI3SexgPqGKFq7PET7XXFxUuS8VxRkPRYNNeydBdGPnM\/s1600\/isAutosize-wear-os-watch-faces-google-io.png\"\/><\/div>\n<p><imgcaption><center><em>Making the best use of the available text space through <span style=\"color: #0d904f; font-family: courier;\">isAutoSize<\/span><\/em><\/center><\/imgcaption><\/image><\/p>\n<p>For more details on <span style=\"color: #0d904f; font-family: courier;\">isAutoSize<\/span>, see the <a href=\"https:\/\/developer.android.com\/reference\/wear-os\/wff\/group\/part\/text\/text?version=4\" target=\"_blank\" rel=\"noopener\"><span style=\"font-family: courier;\">Text<\/span> reference<\/a>.<\/p>\n<h2><span style=\"font-size: x-large;\">Android Studio support<\/span><\/h2>\n<p>For developers working in Android Studio, we\u2019ve added support to make working with Watch Face Format easier, including:<\/p>\n<ul>\n<ul>\n<li>Run configuration support<\/li>\n<li>Auto-complete and resource reference<\/li>\n<li>Lint checking<\/li>\n<\/ul>\n<\/ul>\n<p>This is available from <a href=\"https:\/\/developer.android.com\/studio\/preview\" target=\"_blank\" rel=\"noopener\">Android Studio Canary version 2025.1.1 Canary 10<\/a>.<\/p>\n<h2><span style=\"font-size: x-large;\">Learn More<\/span><\/h2>\n<p>To learn more about building watch faces, please take a look at the following resources:<\/p>\n<p>We\u2019ve also recently launched a <a href=\"https:\/\/developer.android.com\/codelabs\/watch-face-format\" target=\"_blank\" rel=\"noopener\">codelab for Watch Face Format<\/a> and have <a href=\"https:\/\/github.com\/android\/wear-os-samples\/tree\/main\/WatchFaceFormat\" target=\"_blank\" rel=\"noopener\">updated samples<\/a> on GitHub to showcase new features. The <a href=\"https:\/\/issuetracker.google.com\/issues\/new?component=1112371\" target=\"_blank\" rel=\"noopener\">issue tracker<\/a> is available for providing feedback.<\/p>\n<p>We&#8217;re excited to see the watch face experiences that you create and share!<\/p>\n<p>Explore this announcement and all Google I\/O 2025 updates on <a href=\"https:\/\/io.google\/2025\/?utm_source=blogpost&amp;utm_medium=pr&amp;utm_campaign=event&amp;utm_content=\" target=\"_blank\" rel=\"noopener\">io.google<\/a> starting May 22.<\/p>\n<p><\/p>\n<p><i><small><sup>*<\/sup> Google Play data for period 2025-03-24 to 2025-03-23<\/small><\/i><\/p>\n<\/div>\n<p>[ad_2]<br \/>\n<br \/><a href=\"http:\/\/android-developers.googleblog.com\/2025\/05\/whats-new-in-watch-faces.html\">Source link <\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>[ad_1] Posted by Garan Jenkin \u2013 Developer Relations Engineer Wear OS has a thriving watch face ecosystem featuring a variety of designs that also aims<\/p>\n","protected":false},"author":1,"featured_media":277237,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"categories":[146],"tags":[],"_links":{"self":[{"href":"https:\/\/michigandigitalnews.com\/index.php\/wp-json\/wp\/v2\/posts\/277236"}],"collection":[{"href":"https:\/\/michigandigitalnews.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/michigandigitalnews.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/michigandigitalnews.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/michigandigitalnews.com\/index.php\/wp-json\/wp\/v2\/comments?post=277236"}],"version-history":[{"count":0,"href":"https:\/\/michigandigitalnews.com\/index.php\/wp-json\/wp\/v2\/posts\/277236\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/michigandigitalnews.com\/index.php\/wp-json\/wp\/v2\/media\/277237"}],"wp:attachment":[{"href":"https:\/\/michigandigitalnews.com\/index.php\/wp-json\/wp\/v2\/media?parent=277236"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/michigandigitalnews.com\/index.php\/wp-json\/wp\/v2\/categories?post=277236"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/michigandigitalnews.com\/index.php\/wp-json\/wp\/v2\/tags?post=277236"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}