Create multiple premade watch face designs in a single project

Objective

Learn how to create various watch face designs within a single project using the Premade feature in Watch Face Studio, allowing users to select and customize them from the Galaxy Wearable app.

Overview

Watch Face Studio (WFS) is a graphic authoring tool designed for creating watch faces compatible with the Wear OS ecosystem, including Galaxy Watch4 and later models.

One of the features of WFS that enables you to create innovative watch face designs is the Style feature. This feature allows you to modify layer styles, define customizable image styles, and use theme color palettes. The Customization Editor helps you refine, organize, name, and preview these styles for user customization.

In Customization Editor, you can combine styles and components to create Premade designs. A Premade specifies a set of configuration values, grouped as a preset. Users can choose from the created premade designs in the companion app.

Set up your environment

You will need the following:

• Watch Face Studio (Version 1.9.5 or higher)
• Galaxy Watch or smartwatch running on Wear OS 5 or higher

Sample Project

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

Start your project

To load the sample project in Watch Face Studio:

1. Click Open Project in Watch Face Studio.

2. Locate and extract the downloaded sample project.

3. Select the WFS file, then click Open.

4. Go to the Style tab and click on the Customization Editor button.

5. Currently, only the default watch face design (with a sunflower as the background image, a white step count icon, no complications, and no theme color) is present in the premade collection.

6. Click OK to return to the canvas.

Add background image and step count icon styles

In WFS 1.9.5, you can add preset images to use for premade design.

The sample project includes three flower images (sunflower, cherry, and lotus) as the background and four different colored step count icons. You can add more background and icon images by following the steps below:

1. Select the Flower layer from the layer list.

2. From the Style tab, click the + icon to add a new image.

3. Navigate to the Resources > Flowers folder included in the downloaded sample project.

4. Select the Magnolia.png image.

5. Repeat the steps above to add the Lavender.png image.

6. Next, select the SC_Icon layer.

7. From the Style tab, click the + icon to add a new image.

8. Then, add SC_Indigo.png and SC_Red.png from Resources > Step Count folder.

Assign theme colors to selected layers

You can configure the theme color palette for a premade design.

The sample project includes 21 predefined theme colors, offering a variety of options to enhance the visual appeal of your watch faces. Each palette can have up to three colors, and each color can be assigned to different layers.

To assign a theme color, follow these steps:

1. Select the BG_Circle layer from the layer list.

2. Toggle the Theme Color icon once to assign the first color of each palette to BG_Circle.

3. Repeat the steps for the following layers, but this time toggle the icon twice to assign the second color and three times to assign the third color:

   • Date = third color
   • Time = second color
   • Middle_Circle = first color

Add complication

Complications are a popular component for displaying short information on watch faces and are also supported with the Premade feature. When you add a complication component to your design, you can assign its complication provider (such as watch battery, date, heart rate, etc.) to a premade design. Follow the steps below to add a complication to your watch face:

1. Go to Add Component and choose Line Complication Slot.

2. Rename the newly added layer to Complication.

3. Under the Complication Settings properties, choose Text in the Short text layout.

4. Adjust the component's placement as below:

5. Expand the Complication layer.

6. Select the subcomponent Text and toggle the theme color icon twice to apply the second color.

7. In Font Setting properties of Text, choose center alignment.

Prepare premade watch face designs

You can now set different combinations of background image, step count icon, theme color, and complication provider as a premade design.

1. Open the Preview Watch Face window from the Run panel to preview the premade design.

2. Next, go to the Style tab and click the Customization Editor button.

3. Press the + button from the Premade tab or click the Set as Premade button to add a premade design.

4. In the Style section, choose a flower option as the background, a theme color option, and the color of the step count icon.

5. Then, choose the complication provider you want the premade design to use.

6. Click Add to include the design in the premade collections.

Each premade design has the following options:

• Rename: Change or assign a name to the premade design so the user can identify it easily.
• Duplicate: Copy the premade design for quick modification.
• Edit: Modify the style of the premade design.
• Delete: Remove the premade design from the collection.

Customize watch with premade designs

Follow the steps below to test and customize your watch face on a smartwatch:

1. Connect your watch to the same network as your computer.

2. In Watch Face Studio, select Run on Device.

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

4. If your watch is not detected automatically, click Scan devices to detect your device or manually enter its IP address by clicking the + button.

5. When the watch face is launched on the smartwatch, open the companion app on the connected mobile device.

6. Go to Watch faces, and click Customize to modify the current watch face.

7. In the Premade tab, select any design you want and click Save.

8. You can further customize the premade design by choosing options in the Flower, Color, SC_Icon and Complication tabs.

You're done!

Congratulations! You have successfully achieved the goal of this Code Lab. Now, you can create a set of premade watch face designs in Watch Face Studio! If you're having trouble, you may download this file:

To learn more, visit:

developer.samsung.com/watch-face-studio