Customize styles of a watch face with Watch Face Studio

Objective

Learn how to easily customize the style of a watch face using the Customization Editor in Watch Face Studio. Know how to make your watch face respond to your step count using Conditional Lines.

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.

The Style in Watch Face Studio allows you 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. The Customization Editor in WFS enables you to refine, organize, name, and preview the styles you have defined for the watch.

Conditional lines let you show and hide components on your watch face and control the behavior of the components. Use conditional lines to change the look of your watch face in response to certain conditions, such as the time and event, such as unread notifications.

Set up your environment

You will need the following:

• Watch Face Studio
• Galaxy Watch4 or newer
• Smart watch running on Wear OS3 or higher

Sample Project

Here is a sample project for this Code Lab. Download it and start your learning experience!

Start your project

1. Download the sample project file, and click Open Project in Watch Face Studio.

2. Locate the downloaded sample project, and then click Open.

Add styles to the watch hands and index

Styles can be added for image-based layers such as icons, index, and hand component layers. The watch face supports up to 10 image styles. In the Style tab, add a file of the same type as the existing image in the layer.

1. Select the watch hand named Min_Hand.

2. Click on the Style tab.

3. Click the + button to add more minute hands. Simply select the first three images.

4. Repeat the previous steps for the hour hand and index:

Create style sets

1. Go to the Style tab and click on Customization Editor.

2. Select Min_Hand, Hour_Hand, and Index_Line. Merge these by using right-click on your mouse.

3. Change the name of the style sets using Text ID. Click on Text ID of the previously merged style set. Then, click the Add new button.

4. Set the ID name to ID_Time and the Default value to Time. Then, click OK.

5. Now, you can change the name of your style set. Click again on the Text ID and search for the ID name that you just set.

Here, the name and default value for your style set are changed:

6. Finally, repeat the same thing for the background. Merge the other components to make a single background. Using the Text ID, change the name of the style set to ID_Background and the default value to Background.

Modify the theme color palette

The theme color palette is a set of colors that you can use on a specific design component. Each palette can have up to three colors. The watch face supports up to 30 theme colors. Here, you add a new set of colors for the Month component.

1. Go to the Style tab. Under the Theme Color Palette, click the + button.
2. Choose a color from the palette.

3. You can change the other two colors by clicking on the color box.

Preview your watch face using customization editor

At this point, you have created custom styles for the watch hands and index, background, and color. You can use the Run pane and Customization Editor to preview how the watch face looks like when changing different styles:

1. Open the Run pane in a separate window and click Customization Editor. In the Customization Editor, you can see the three tabs: Background, Color, and Time.
2. Go to each tab and preview the different custom styles that you’ve created.

Use conditional lines for step count

Use the conditional lines to make the step count on your watch face respond to certain conditions. Here, you want to show different images depending on the step count percentage: 0% to 20%, 21% to 80%, and 81% to 100%.

1. Click on the + button and select Steps as a conditional line. Click on the Steps icon to view the default conditional lines for all components.

2. Select the SC_Initial component. Then, double-click on the layer of its conditional line. A warning prompts you that any existing conditional lines will be overwritten, simply click OK.

3. Now, you can start changing the conditional line for the SC_Initial component. Drag the start of the bar to 0% and drag the end of the bar to 20%. This sets the condition that the SC_Initial image visually appears on the watch face when the step percentage is from 0% to 20%.

4. For the SC_Moderate component, set the conditional line from 21% to 80%, and for the SC_Good component, set it from 81% to 100%. This makes the SC_Moderate and SC_Good images to visually appear on the mentioned step count percentages.

Test the watch face

In the Run pane, click the Preview Watch Face icon and you can run the created watch face with different custom designs:

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 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 a watch face using Style and Conditional lines in Watch Face Studio by yourself! If you face any trouble, you may download this file:

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