Design a watch face with Watch Face Studio
design a watch face with watch face studio this guide describes the main tools and ui in watch face studio wfs figure 1 watch face studio ui tools the wfs interface has a button bar that contains various tools figure 2 wfs button bar add component open a dropdown list of components you can add to your watch face forward move the selected component to the front of the canvas backward move the selected component to the back of the canvas group group multiple components together so they can be controlled as one component ungroup ungroup a group of components mask cover all or part of a group of layers based on the shape outline of the bottom-most layer in the group diagnosis the diagnosis dialog box opens, allowing you to see the minimum sdk version and memory usage of the current watch face project publish open the publication dialog to prepare your watch face files for uploading to the play store run on device scan for and connect to an actual watch device connected to the same wifi network as your computer, and preview the watch face on it components add as many different components as you want to your watch face you can also use a customized design source for your components for example, you can display heart rate or step count data with a text component or add a custom image to launch an application watch face canvas the canvas is the bottom layer of the watch face you can set its background color the canvas is cropped to a circle by default to use a rectangular canvas, uncheck the apply circular crop option in the properties tab in this case, the watch face shape is determined by the device on which it is installed figure 3 canvas with circular crop figure 4 canvas without circular crop component types the following components are available for watch faces text text fields hold normal text by default normal text is static and does not change in the properties tab for your text field, you can change the text field from normal text to data text data text changes and is populated based on tags for more information, see tag expressions to create text that curves with the watch face, select the apply curved-text option figure 5 creating curved text determine the curve of your text by setting the width w and height h changing w and h automatically changes the dimension of your text component to determine the position of your text, select a range preset you can also define a custom range by specifying the start point and angular distance set the direction of your text to either clockwise cw or counter-clockwise ccw image import custom images shape add various shapes, including rectangles, rounded rectangles and ellipses you can specify a shape's inner color and opacity, and its border’s thickness, color, and opacity progress bar add a progress bar to your watch face to track various activities you can select from a linear or circular progress bar to determine the position of your progress bar, select a range preset you can also define a custom range by specifying the start point and angular distance set the direction of the progress bar to either clockwise or counter-clockwise animation to create an animation on your watch face using a sequence of images create an animation sequence with a design program, such as adobe flash or adobe premiere in wfs, select add component > animation select the animation sequence images from the file browser, then select open edit the animation by changing the order of the images, removing images, or adding images figure 6 editing an animation to define when you want your animation to play, configure the trigger value to start the animation as soon as the watch face is shown, set the trigger value to watchface on you can also choose from other options, such as tap, every sec, every min, and every hour you can also delay the start by a specific number of seconds figure 7 defining the animation trigger you can also configure various additional animation options auto replay immediately repeats the animation upon completion until an interruption occurs, such as turning the screen off repeat delay sets a delay between iterations of the repeated animation resume playback determines whether to resume the animation or start from the beginning when play is stopped because of an interruption, such as receiving a notification or a phone call hide before playing determines whether to hide the animation until play is triggered hide after finished determines whether to hide the animation when play is completed multimedia to add an animated image file, such as an agif or webp image in wfs, select add component > multimedia select the file from your file browser, then select open to define when you want your animation to play, configure the trigger value keep in mind that the file size, image resolution, and number of frames in the multimedia image can affect device performance and battery consumption multimedia images are loaded asynchronously during operation and can be delayed when playing, depending on the capabilities of the user’s watch and various characteristics of the image analog watch an analog watch provides 6 hands hour, minute, and second hands, and additional hands for special effects, such as shadows figure 8 analog watch all clock hands are supplied with an image that you can change using the swap image menu other components cannot be added inside an analog watch combination, but you can group the analog watch and other components together each clock hand's style is shown as merged in the customization editor to optimize battery use, keep these components to a minimum digital clock you can select from various digital clock shapes digital clock components work based on fixed sync and cannot be edited you can add hours, minutes, and seconds expressions individually, or in predefined combinations figure 9 digital clock each of these 5 digital clock expressions is considered a single component with a single layer hh, mm, and ss represent the hour, minute, and second, respectively you can also enable the leading zero option to display a “0” in front of single-digit values hh can optionally sync to the watch's 12-hour or 24-hour display setting ss is not displayed on devices in always-on mode for the combinations hh mm and hh mm ss, only the hh part has the leading zero option it can also optionally sync to the watch's 12-hour or 24-hour display setting ss is not displayed on devices in always-on mode for hh mm, you can optionally use a blinking colon to represent ticking seconds to optimize battery use, use hh, mm, and hh mm only as needed figure 10 digital clock the time expressions by individual digit, h h , m m , and s s , are single components consisting of 2 layers each properties such as the location and font for each digit can be configured separately for more customization h h offers the leading zero option, and can optionally sync to the watch's 12-hour or 24-hour display setting s s is not displayed on devices set to always-on mode you can optionally use a blinking colon to represent ticking seconds icu date and time figure 11 icu date and time wfs uses the icu date format and offers frequently used date combinations to support date expressions suitable for your locale index figure 12 index you can automatically create as many indexes as you want with your own images and place them anywhere view more figure 13 view more analog hands open the file browser to select an image file to import for each hand analog clock hands have a rotation property, which has various options sync with time zone rotate value movement effect to define the time interval or condition for the analog hand movement, configure the sync with option hour in day minute in hour second in minute day of month month of year day of week day of year conditions moon phase position, moon phase type when the hand is set to sync with second in minute in other words, it is a second hand , the sweep movement effect is available clock this is a clock expression that uses a tag expression in a text component the default display for digital time is hour_1_12_z min_z sec_z date this is a date expression that uses a tag expression in a text component the default display format for dates is day_week_s, mon_s day_1_31_z component management manage your components using the wfs tools you can add, group, ungroup, and order components on your watch face add components add a supported component using the add component + button figure 14 adding components when you add a component, it is placed in a default position on the canvas the component is automatically selected so you can easily modify it group or ungroup components a group is a combination of one or more components all components can be grouped groups can be ungrouped figure 15 grouping components mask or unmask components when you use a mask group, the shape of the bottom-most layer determines the visible area of the mask group the layers above it appear only through the shape outline of the bottom layer for example, if you place a square image in the bottom layer and an image and an animation in the layers above it, the image and animation appear only through the square outline of the bottom layer figure 16 creating a mask to create a mask group select the layers you want to group select mask from the button bar or right-click the layers and select mask to unmask release the mask group select the mask group select unmask from the button bar or right-click the layers and select unmask note when the bottom-most layer of the mask group is deleted, the mask group is automatically released diagnosis you can see the minimum sdk version and memory usage of your watch face project checking memory usage install the memory usage plugin on watch face studio to view the watch face's memory usage see memory usage plugin for more information minimum sdk version information you can see the minimum sdk version android api level of your watch face project the minimum sdk version is automatically determined based on the features or components used if your watch face uses new features supported by the latest version of watch face format, a list of those new features is provided along with the minimum sdk version information see the watch face format guide for more information about the features added to watch face format version 2 watch face format wff version wfs version minimum sdk version version 1 1 4 13 and higher 30 version 2 1 7 and higher 34 table 1 watch face format version and minimum sdk version note the following features of wff version 2 are supported in wfs 1 7 and higher weather icu date and time component last updated weather , and hour and day added to time source analog watch component sync to device added under update frequency, and sweep added under movement effect in second hands settings ranged value complication that supports color ramp preview area the preview area is your main working area when designing your watch face add all watch face elements to the canvas in the preview area on the canvas, drag elements into position and resize, arrange, and rotate them figure 17 preview area layer list the layer list displays the components and groups shown in the preview area each component has its own layer by default figure 18 layer list within the layer list, you can search search for a layer by name show or hide show or hide layers, toggling their visibility in the preview area theme color toggle the theme colors rename rename a layer by double-clicking the layer name note by default, when you add a new component, a new layer is placed at the top of the list layers added within a group are placed at the top of the group by right-clicking a layer, you can lock or unlock lock the layer to its position on the canvas or unlock it so it can be moved group or ungroup group multiple components together so they can be controlled as one component or ungroups a group of components mask or unmask cover all or part of the other layers based on the shape outline of the bottom layer or remove the layer from a mask group swap image move the image file from one layer to another only shown for images layer color define a color label for the layer to differentiate between layers in the layer list conditional lines conditional lines let you show and hide components on a watch face and control the components' behavior use conditional lines to change the appearance of your watch face in response to certain conditions, such as time, step count, battery, or event when you add a component, the time condition is set by default to adjust these conditions, click the condition icon on the desired layer to set your conditional to repeat, right-click the frame area and select loop figure 19 adding conditional lines keep in mind that layers that are not displayed do not reduce performance or affect battery life you can set your watch face to respond to the time, step count, battery status, event or weather, as described in the following sections note each layer responds to only one type of condition for example, if a layer is set to change according to step count, any existing monitoring of other conditions stops time your watch face can change dynamically based on time intervals for example, your watch face can be bright during the day then gradually darken after a set time you can set the time to be measured in hours, minutes, or seconds to add a time condition create the layers to be displayed conditionally in the timeline, for each layer, set the time periods to control when each layer is displayed click and drag the start and end handles to define a time range to create another time range for the same layer, double-click and drag from the start time to the end time to preview your changes, use the run panel and the time control slider to display different watch faces for a 12-hour setting and a 24-hour setting based on the chosen setting on the user’s phone add two digital clock components, the first component for the 12-hour version and the second for the 24-hour version place them in the same position add 12-hour and 24-hour conditions to the components' conditional lines set time periods to show the first digital clock component for the 12-hour layer in the 12-hour format and to show the other layer in the 24-hour format time control the time control slider lets you see your watch face in action use this to preview how your watch face changes throughout the day drag the slider to specific times or view your watch face animations by using the play and fast-forward buttons figure 20 time control and preview step count you can design your watch face to change dynamically according to the user's step count for example, you can create a watch face that changes based on the percentage of the daily step goal that has been achieved battery you can design your watch face to change dynamically according to the watch's available percentage of battery life event you can design your watch face to change dynamically according to the device state, such as low battery or unread notifications to do so, select the desired event and the image or animation you want to display during that event figure 21 event condition weather you can design your watch face to dynamically change according to weather conditions for example, you can set your watch face to lighten on a sunny day and dim on a cloudy day figure 22 weather condition properties tab each component has a range of modifiable properties for example, you can change the color of the numbers on a digital clock or choose whether the watch hands measure hours, minutes, or seconds figure 23 properties tab action options the action options within the properties tab enable interaction with your watch face for example, you can let the user tap a component to change images or open other applications figure 24 action options color apply a specific color to your component or save a theme color for the watch face for complications, the initial color theme is grayscale colors can be specified as either solid or gradient type linear, radial, sweep singular components, such as the progress bar, can also be expressed in gradient type or different colors table 1 components and gradient type options image appearance modify an image's appearance using the following controls hue controls the tone of the color saturate makes the image color more or less vivid lightness causes the image colors to be lighter or darker note because these functions replace the pixels of the added image, they are processed before the other color functions, such as apply theme color text appearance use the text appearance options to define the text alignment and font style to decorate the text, in the project settings, select add bitmap font if you want to use the default font size among the bitmap fonts added to the project, select apply default font size figure 25 modifying text appearance style tab use the style tab to modify the style of the selected layer you can define image styles and theme color palettes that the user can choose from to customize their watch figure 26 style tab image style styles can be added for image-based layers, such as image, multimedia image, index, and hand component layers the watch face supports up to 10 image styles to add an image style to the selected layer, in the style section, add a file of the same type as the existing image in the layer theme color palette theme color palettes can be defined in the style tab each palette can have up to 3 colors the watch face supports up to 30 theme colors you can assign the theme color for the selected layer in different ways from the layer list, cycle through the 3 theme colors with the “apply theme color” icon figure 27 assigning theme color from layer list from the properties tab, select “apply theme color” and define which of the 3 colors to apply from the theme color palette figure 28 assigning theme color from properties tab customization editor the customization editor in wfs enables you to refine, organize, name, and preview the styles you have defined for the watch you can combine components so that they change styles at the same time and define the order in which the styles appear on the device figure 29 customization editor left area allows you to create and manage style sets you can create a style set by merging styles and other components, and add and remove style set elements you can drag and drop to change the order of merged style sets and their display options you can define the names of merged style sets and their options using text ids right area allows you to preview the merged style defined in the left area you can see how the device customization looks when applied you can modify the thumbnail images to be shown on the device for the display options of merged components you can also drag and drop to change the order of the display options figure 30 customization editor you can select the text id for the style name to be displayed on the watch you can also create a new text id and select it a style set with this text id supports localized text according to the device's language settings in the customization screen you can create and modify text ids directly from the customization editor text ids can also be edited from the text id management menu figure 31 defining a style name you can test your style combinations, style display order, and style name in the customization editor preview font style you can add a font style to the digital clock component select a font type for the selected layer and add a style figure 32 add font style you can set font style options in customization editor and adjust the font style options in the run panel to run the watch face figure 33 setting font style run to preview how your watch face looks along a timeline, use the run panel in wfs you can select a device shape and adjust the time, date, device battery level, user step count, user heart rate, and gyro values to test how your watch face looks in different circumstances styles such as unread notifications count, tag expression, and conditional lines, which are configured in the customization editor, can be adjusted additionally, various conditions related to hourly and daily weather forecasts, including temperature unit, temperature, weather condition, chance of rain, and uv index, can also be adjusted the run preview can be set to show the active or always-on ambient mode figure 34 run panel and settings when previewing the always-on mode, wfs displays the current on-pixel ratio and provides an analysis tool that enables you to analyze each screen along a timeline to open the run preview in a separate window, select the “preview watch face” button figure 35 always-on mode preview for information on testing your watch face on an actual device, see test your watch face