Create a Watch Face Using Tag Expressions


Objective

Learn how to create a watch face that responds based on the date, time, step count, heart rate, and battery level using Tag Expressions in Watch Face Studio.

In this Code Lab, you will start by creating a basic watch face with complications such as step count, heart rate, and battery level. Later on, you will improve its functionalities and make it visually dynamic by utilizing tag expressions.

Overview

Watch Face Studio is a graphic authoring tool that enables you to create watch faces for Wear OS. It offers a simple and intuitive way to add images and components, and to configure the watch movement without any coding. Watch Face Studio supports watch faces for the Galaxy Watch4 and other watch devices that run on the same platform.

Tag expressions are conditions in Watch Face Studio that allows you to customize watch face through dynamic configuration of its movement and data.

Set up your environment

You will need the following:

Start your project

  1. Create a New Project.

  1. A blank studio will show upon clicking Create.

Add analog hands and index

Watch Face Studio allows you to add different components like text, image, shape, analog hands, and index in a watch face. For your watch to have the look and feel of an analog watch, add the following components:

  • Time > Analog Hands > Hour (watch_hour_gentle)
  • Time > Analog Hands > Minute (watch_min_gentle)
  • Time > Index (index_gentle)

You will see that the hands are moving automatically and in sync with the device time. Select all the newly added components and click Group. Rename the group as Group_AnalogTime.

Use a progress bar for seconds

A component like progress bar can be used to show how much of the process is completed and how much is left. In this step, you will use it to show how far or close the next minute is. To use a progress bar as seconds:

  1. Click Add Component and select Progress bar.

  1. Rename the component to Seconds.
  2. Move Seconds behind Group_AnalogTime.

  1. In Properties of Seconds, do the following:

    a. Adjust the Dimension (Width and Height) to 395.

    b. Adjust the Placement (X and Y) to 27.5.

    c. Drag the Background slider to 0%.

    d. Make sure that the Type is a circular progress bar, otherwise change it.

    e. In Range Setting, change Value to 0 and click Tags beside it to open the Tags window. Type in [SEC]. It means that the value from 0 will increment as the value of second increases.

    f. Set Max value to 59 since it is the maximum value of [SEC].

Format and position a digital clock

In this step, you will learn how grouping works and affects its components. You will also learn how to format the date and time using tags. To format and position a Digital Clock, you need to:

  1. Add a Digital Clock > Time twice. Rename them as Hour and Minute respectively.
  2. Add a Digital Clock > Date and rename the component as Date.

  1. Put them in one group and rename it as Group_DigitalTime.

  1. Go to the properties of Hour and change the Text Appearance to 80. Do the same for Minute.
  2. Adjust the text size of Date to 15.
  3. Adjust the Y Placements of the individual components, so that they will look like the image below. When you make changes to a certain component, it won’t affect other components in the group.

  1. Format Hour to only show the time in hour:

    a. Go to its properties and click Tags button in Text Field.

    b. Replace text field value with [HOUR_0_23_Z] to show current hour with leading zero.

  2. Do the same for Minute but replace text field value with [MIN_Z] to show current minute in an hour with leading zero.

  3. Go to Group_DigitalTime placement properties and center it horizontally. After that, place it to the left. You will see the components adjusted as a group.

Utilize health features and battery level

Watch Face Studio also allows you to utilize data like step count, heart rate, and battery level. Follow the steps below to show these real-time data using tags on texts or progress bar:

Battery Level

  1. Add a circular progress bar and rename the component as Battery Level.
  2. Drag the Background slider to 0%.
  3. Go to Value properties. Replace the value to 0 and, in Tags, input or choose [BATT_PER] to use current battery percentage as value.
  4. Add a Short Text Complication and rename it as Battery Icon. Complications are set of components that can be handled as one group.

  1. In the Layout properties, click + and select Icon + Text.
  2. In the Complication Settings, change the Default Provider to Watch battery and set the Type to Fixed.

  1. Group Battery Level and Battery Icon together.
  2. Rename the group as Group_BatteryLevel.
  3. Move the Group_BatteryLevel placement to bottom right.


Heart rate

  1. Add a circular progress bar and rename the component as Heart Rate.
  2. Drag the Background slider to 0%.
  3. Go to Value properties. Replace the value to 0 and, in Tags, input or choose [HR] to use heart rate as value.
  4. Set Max value to 220 since it’s the maximum heart rate a person can have.
  5. Add a Text component and rename it as Heart Rate Label.

  1. In the Text Field, input Heart Rate and change the text size to 12.
  2. Change the Y Placement to 195.

  1. Add another text component and rename it as Heart Rate Text.
  2. In the Text Field, input [HR] and change the text size to 30.

  1. Group Heart Rate, Heart Rate Label, and Heart Rate Text together.
  2. Rename the group as Group_HeartRate.
  3. In Action properties of Group_HeartRate, select Apply Action with Tap interaction and Measure Heartrate as Action. Heart Rate will be measured when the components in the Group_HeartRate is tapped in the device.

  1. Move the Group_HeartRate placement to center right.


Step count

  1. Add a circular progress bar and rename the component as Step Count.
  2. Drag the Background slider to 0%.
  3. Go to Value properties. Replace the value to 0 and, in Tags, input or choose [SC_PER] to use the current percentage to goal of step count.
  4. Add a Short Text Complication and rename it as Step Count Text.
  5. In the Layout properties, click + and select Text + Title.
  6. Select Step count as the Default Provider and set its Type to Fixed. It will now show "Steps" as Title and step count as Text.

  1. Place the Step Count Text in the center vertically.
  2. Group Step Count and Step Count Text together.
  3. Rename the group as Group_StepCount.
  4. Move the Group_StepCount placement to top right.

Select Group_DigitalTime, Group_BatteryLevel, Group_HeartRate, and Group_StepCount folders and drag them behind Group_AnalogHands and Seconds. By doing this, the analog hands would overlap the components.

Make use of tag expressions

You already have three progress bars that show data of battery level, heart rate, and step count. This time, you will make these features more functional by changing the progress bars' color to red and add a blinking effect to a component using tag expressions.

Tag expressions are conditions that allow you to change the rotation, placement, behavior, and opacity of a component based on tag values. It has the power to alter your watch face appearance dynamically as the tag value changes. Tag expressions support different types of operators – arithmetic, relational, logical, and ternary.

For this step, you will apply tag expressions on the color opacity. But first, you will have to:

  1. Make a duplicate of all the circular progress bars (Seconds, Battery Level, Heart Rate, and Step Count).

  1. Move all the duplicates in a new group called Group_ColorChange.
  2. Make sure that Group_ColorChange is behind all other groups.
  3. Change individual component’s color to #FFFFFF or white.
  4. Duplicate this group and rename as Group_Background. Move it behind Group_ColorChange.

  1. Drag the Background slider to 16% and remove tags in Value properties of each component of Group_Background.
  2. Change Group_ColorChange color to #FF001E or red.
  3. Group_ColorChange will be used as components underneath when you set the opacity of the main components to 0 using tag expressions.
  4. Group_Background will serve as gap filler of each progress bar.

Below are conditions that will trigger the opacity of main components to become 0 and reveal the duplicated red components:

Change the color of Battery Level to red if the battery level is equal or less than 20%

  1. Go to Group_BatteryLevel and select Battery Level.
  2. Navigate to Color properties.
  3. Check if the color opacity value is 100. This will serve as the base value.
  4. In Tags, input [BATT_PER]<=20?-100:0 to subtract 100 to base value of opacity if the battery level is equal or less than to 20. Otherwise, the base opacity value remains the same.
  5. In the Run tab, adjust the Device > Watch Battery to 20% or less, and you will see how the color will change to red.

Change the color of Step Count to red if the goal hasn’t reached yet and the time is already 18:00 (6:00 pm) or beyond

  1. Go to Group_StepCount and select Step Count.
  2. Navigate to Color properties.
  3. Check if the color opacity value is 100. This will serve as the base value.
  4. In Tags, input ([SC]<[SC_GOAL])*([HOUR_0_23]>=18)?-100:0 to subtract 100 to base value of opacity if the step count is less than the goal, and if the value of hour in a day is 18 or beyond. Otherwise, the base opacity value remains the same.
  5. Play with the time control bar in the Run tab and Health > Steps data to see how the color will change from blue to red.

Change the color of Heart Rate and Seconds to red if heart rate is below or above the normal

  1. Go to Group_HeartRate and select Heart Rate.
  2. Navigate to Color properties.
  3. Check if the color opacity value is 100. This will serve as the base value.
  4. In Tags, input ([HR]<60)+([HR]>100)?-100:0 to subtract 100 to base value of opacity if heart rate is below or above the normal (60-100). Otherwise, it remains the same.
  5. Do the same for Group_AnalogTime > Seconds.
  6. Test it in the Run tab by adjusting the Health > Heart rate to below 60 or above 100 and you will see how the color will change to red.

Since you added a Tap action to measure heart rate, it is a good user experience to see if this function works. HR_IS_MEASURING is a Boolean tag, which returns 1 (YES) or 0 (NO) if the heart rate is currently measuring or not. To add this to the project:

  1. Select Group_HeartRate > Heart Rate.
  2. Go to Value properties and, in Tags, change [HR] to [HR_IS_MEASURING]==1? ([SEC]%2==1?220:0):[HR]. This will cause the progress bar to flash on (max value) and off (min value) every second while heart rate is measuring. Once it is done measuring, it will display the heart rate data.
  3. Do the same for Group_ColorChange > Heart Rate copy.

Prolong the battery life

Now that you already grasp the idea of what group and tag expression are, it’s about time for you to use both for your advantage. It is observed that the darker a watch face design is, the longer the battery life can be. To help the watch stay powered even when there’s a little battery left, you will need to decrease the opacity of the watch face when the Battery Level is equal to or less than 10%. To do this, you have to:

  1. Select and combine all created groups and components, except for Group AnalogTime, to a new group called Group_WatchFace.

  1. Go to Group_WatchFace Color properties and change the base opacity value to 20
  2. In Tags, input [BATT_PER]<=10?0:80 to add 0 to the base value of opacity if the battery level is equal or less than to 10. Otherwise, it adds 80 to the base value, making the whole watch face 100% visible.
  3. Adjust the Device > Watch Battery to 10% or less, and you will see how the opacity of most of the components decreased.

Choose components for Always-On

Always-On Display is a feature that allows your Galaxy Watch to show the time without checking on it by pressing a button or lifting your hand. In Watch Face Studio, you can choose which group or component to display onto the Always-On by following these steps:

  1. Go to the Always-On tab, and you will see the same set of components you added and grouped.
  2. Click the eye icon next to the group name to hide or make it visible.
  3. Hide Group_WatchFace.

At this point, your Always-On Display will display a basic analog watch face whenever your watch is in idle mode.

Test the watch face

To test your watch face, you need to:

  1. Connect a watch device to your computer:

    a. Make sure that the device is connected to the same network as your computer.

    b. In Watch Face Studio, click Scan to automatically detect your device.

    c. If your device is not automatically detected, you can enter its IP address manually.

    d. Select the device to connect to.

  2. In Watch Face Studio, select Project > Run on device.

  3. Select the connected watch device you want to test with.

You're done!

Congratulations! You have successfully achieved the goal of this Code Lab. Now, you can create and design a watch face using tag expressions by yourself! If you're having trouble, you may download this file:

Tag Expression Complete Project
(710.01 KB)

Learn more by going to: www.developer.samsung.com/watch-face-studio