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 create a basic watch face with complications such as step count, heart rate, and battery level. Later, you will improve its functionalities and make it visually dynamic using 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 or newer version, 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:

• Watch Face Studio
• Galaxy Watch4 or newer
• Any supported Wear OS watch

Start your project

1. Create a New Project and input Project Name.

2. A blank studio will show upon clicking Ok.

Add analog hands and index

Watch Face Studio allows you to add 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 > Index
• Time > Analog Hands > Minute
• Time > Analog Hands > Hour

You will see that the hands move 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 a 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.

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

4. In Properties of Seconds, do the following:

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

   b. Align the component to the center.

   

   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.
   f. Type in [SEC]. It means that the value from 0 will increment as the value of the second increases.

   

   g. 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.

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

4. Go to the properties of Hour and change the Text Appearance to 80. Do the same for Minute.
5. Adjust the text size of Date to 15.
6. Adjust the Y Placements of the individual components to look like the image below. When you change a certain component, it won’t affect other components in the group.

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

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

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

   

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

9. Go to Group_DigitalTime placement properties and align 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 with 0 and, in Tags, input or choose [BATT_PER] to use the current battery percentage as the value.
4. Add a Circle Complication Slot and rename it as Battery Icon. Complications are a set of components that can be handled as one group.

5. Set the Type to Fixed and change the Default Provider to Watch battery.
6. Select Short text as Complication Type and choose Icon + Text for layout.

7. Select and move Battery Level and Battery Icon together to the 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 with 0 and, in Tags, input or choose [HR] to use heart rate as value.
4. Set the Max value to 240 since it's the maximum heart rate a person can have.
5. Add a Text component and rename it as Heart Rate Label.

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

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

10. Group Heart Rate, Heart Rate Label, and Heart Rate Text together.
11. Rename the group as Group_HeartRate.
12. Move the Group_HeartRate placement to the 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 with 0 and, in Tags, input or choose [SC_PER] to use the current percentage to the goal of step count.
4. Add a Circle Complication Slot and rename it as Step Count Text.
5. Set the Type to Fixed and change the Default Provider to Step count.
6. Select Short text as Complication Type and choose Text + Title for layout. It will now show "Steps" as Title and step count as Text.

7. Place the Step Count Text in the center horizontally.
8. Select and move Step Count and Step Count Text together to the top right.

Select Group_DigitalTime, Group_BatteryLevel, Group_HeartRate, Group_StepCount, Battery Icon, and Step Count Text. 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 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 can alter your watch face's 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. Duplicate all the circular progress bars (Seconds, Battery Level, Heart Rate, and Step Count).

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

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

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

Change the color of the Battery Level to red if the battery level is equal to 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 from the base value of opacity if the battery level is equal to or less than 20. Otherwise, the base opacity value remains the same.
5. In the Run pane, 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 been 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 from the 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 pane and Health > Steps data to see how the color will change from blue to red.

Change the color of the Heart Rate and Seconds to red if the 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 from the base value of opacity if the heart rate is below or above the normal (60-100). Otherwise, it remains the same.
5. Do the same for Seconds.
6. Test it in the Run pane by adjusting the Health > Heart rate to below 60 or above 100, and you will see how the color will change to red.

Prolong the battery life

Now that you already know what group and tag expressions are, it's about time for you to use both to 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, Battery Icon, and Step Count Text, to a new group called Group_WatchFace.

2. Go to Group_WatchFace Color properties and change the base opacity value to 20
3. In Tags, input [BATT_PER]<=10?0:80 to add 0 to the base value of opacity if the battery level is equal to or less than 10. Otherwise, it adds 80 to the base value, making the watch face 100% visible.
4. Adjust the Device > Watch Battery to 10% or less, and you will see how most components' opacity 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 on the Always-On by following these steps:

1. Go to the Always-On tab, to 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, Battery Icon, and Step Count Text.

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 the same network as your computer.
2. In Watch Face Studio, select Project > Run on device.
3. Select the connected watch device you want to test with.
4. If your device is not detected automatically, click Scan devices to detect your device or enter its IP address manually by clicking the + button.

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:

To learn more about Watch Face Studio, visit:
developer.samsung.com/watch-face-studio