Design a watch face with customizable edge complication slots and digital clock

Objective

Learn how to add customizable edge complication slots and a digital clock on your watch face using Watch Face Studio.

Overview

Watch Face Studio is a graphical authoring tool designed to help users create watch faces for the Wear OS smartwatch ecosystem, including the Galaxy Watch4 and its newer versions. It offers intuitive and user-friendly features for designing visually appealing and customizable watch faces without requiring coding skills.

With Watch Face Studio, users can incorporate various components into their watch faces, such as digital clocks. These clocks can be designed with different variations and further customized through the Galaxy Watch interface.

In addition to digital clocks and other watch face components, users can integrate complications into their designs. Complications display information from data sources, such as battery indicators or step counts, directly on the watch face. You can display additional information on the watch face by adding a complication slot. A complication slot consists of complication components and a slot bound. The components implement the layout, while the slot bound acts as a cutout through which the complication component appears. There are five types of complication slots: circle, line, small box, large box, and edge. This Code Lab focuses on adding edge complication slots to your watch face.

Starting from Watch Face Studio 1.8.7 (Beta), users can define all supported font styles for digital clocks that can be customized on the physical watch. The studio also added a feature allowing users to design watch faces with edge complication slots.

Set up your environment

You will need the following:

• Watch Face Studio (latest version)
• Galaxy Watch4 or newer
• Smartwatch running on Wear OS (API 34 or higher)

Sample Project

Here is a sample project for you to start coding in 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.

2. Locate the downloaded file and click Open.

3. The sample project includes a background image that you can customize by adjusting the hue, saturation, lightness, or opacity to suit your preference.

Add edge complications to the watch face

There are two types of edge complication slots that you can add to the watch face: Duo and Quadrant. Both appear along the edge of the watch face.

• Duo edge complication slot - composed of right and left edge complications
• Quadrant edge complication slot - composed of right top, right bottom, left bottom, and left top edge complications

You can only select one type per project.

To fit the design of the sample project, add a quadrant edge complication slot.

1. Click Add Component.
2. Then, in the Complication Slot section, select Edge > Quadrant.

3. From the layer list, expand the Quadrant Edge complication layer.
4. Select the Right Top Edge Complication and the Left Bottom Edge Complication.
5. Right-click and choose Delete.

Configure complications

After adding the edge complication slots, you can configure its settings:

1. From the layer list, click the Right Bottom Edge Complication to edit its properties.

2. In the Properties pane, go to Complication Settings and choose the following:

   • Type: Fixed
   • Default Provider: Watch battery
   • Complication Type: Range value
   • Range value (complication layout): Progress bar + Icon + Text

3. To test the complication, go to the Run pane and adjust the Watch Battery slider. The bar indicator updates based on the value of the watch battery.

4. Next, go to the properties of the Left Top Edge Complication and choose the following for Complication Settings:

   • Type: Editable
   • Supported Types: Short text
   • Default Provider: Step count
   • Short text (complication layout): Icon + Text + Title

5. To test the complication, go to the Run pane and adjust the Step count slider. The complication text changes as you change the value of the slider.

6. You can also adjust the properties of each complication component. For example, when you open the properties of Title, you can change its text color.

Add a variable digital clock

There are two ways to display a digital clock on watch faces: using a variable digital clock and a non-variable digital clock.

To understand the concept of these two types, start by adding a variable digital clock component to display hours and a colon:

1. Go to Add Component > Digital Clock > Variable.

2. Select Colon and (H)(H) for the hour.

3. Adjust the placement and rotation angle of both components to complement the design.

With a variable digital clock, you can customize each subcomponent creatively. For example, you can make the font of the first digit of the hour (H10) bigger than the second digit (H) or place them in different positions.

4. Adjust the properties of the first and second digits of the hour to have the same font size but with slightly different color tints:

   • H10

     • Color: #f5f680ff
     • Font Size: 70

   • H

     • Color: #fde997ff
     • Font Size: 70

On the other hand, a non-variable digital clock is less flexible but acts as a single component, making it ideal for simpler watch faces. To add a non-variable digital clock to display minutes:

5. Go to Add Component > Digital Clock > MM.

6. Adjust its placement, rotation angle, and text color to complement the design.

Use bitmap font for minutes

Watch Face Studio supports the use of TrueType and bitmap fonts.

By default, all text-based components, such as digital clocks, use TrueType fonts. TrueType is the most common font format, utilizing vector-based outlines to define characters. Bitmap fonts, on the other hand, consist of fixed-size, pixel-based representations of characters, which have smaller file sizes and render directly as pixels, offering faster performance on low-power devices.

In Watch Face Studio, bitmap fonts are used to replace predefined dynamic content, such as dates, time, and weather, in text and digital clock components. This allows you to incorporate custom visual elements that align with your creative vision while maintaining functionality.

To use bitmap font on your watch face, follow these steps:

1. Select MM from the layer list.
2. Go to Properties > Font Setting and select Bitmap Font.

3. Click the gear icon to open the Bitmap Font Setting for Bitmap font 1.

4. Set the default font size to 50.
5. Click the + icon to add and assign bitmap images for each digit.

6. Locate your bitmap images, select the image for the corresponding digit, and click Open.

7. Once you're done adding and assigning bitmap images for each digit, click OK to display the bitmap font as minutes.

Make the font style of the digital clock customizable

To make the digital clock more customizable, you can apply styles.

Use the Style tab to define font styles for a digital clock layer. This provides users with more customization options for their watch face.

1. From the layer list, choose Variable_HH > H10 and go to the Style tab.
2. Click the + button in TrueType Font to add font styles.

3. Add fonts with bold font weights such as Montserrat-Bold, Oswald-Bold, and Roboto-Bold.

4. Then, click the Customization Editor button.

5. In the Style Set pane, click the Text ID button beside ID_SYSTEM_STYLE_SET.

6. Click the Add new button to add a new Text ID.

7. Then, input the following:

   • ID: ID_H10_FONT
   • Default value: 1st Digit Hour Font

8. Then, select the newly added Text ID. This helps users identify which components they are changing when customizing the style on a physical watch.

9. Repeat the same process for H, and this time, add fonts with a Medium font weight. For the Text ID, input the following:

   • ID: ID_H_FONT
   • Default value: 2nd Digit Hour Font

10. Next, add styles to a layer that uses a bitmap font. Select MM from the layer list and go to the Style tab.
11. Click the + button in Bitmap Font, then select Add Bitmap Font to add and assign bitmap images for each digit.

12. Set default font size to 50. Click Ok and input the name of your bitmap font.

13. Then, click the Customization Editor button and modify the Text ID of the newly added style set using the following values:

• ID: ID_MM_FONT
• Default value: Minute Font

14. To test the font styles you set, go to the Run pane and choose font styles from the dropdown menu. This allows you to preview how the selected styles will appear on the watch face.

Test the watch face

In the Run pane:

1. Click the Preview Watch Face icon.

2. Move the Step count and Watch Battery sliders to see data changes in the edge complications.

3. As previously mentioned, to observe changes in the digital clock, adjust the time slider and select the font styles from the dropdown menu in the Style section.

To test your watch face on a smartwatch, you need to:

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 enter its IP address manually by clicking the + button.

5. When the watch face is launched, touch and hold the watch screen to access the edit mode.

6. Tap Customize to choose font styles and complications.

You're done!

Congratulations! You have successfully achieved the goal of this Code Lab. Now, you can design a watch face with customizable edge complication slots and digital clock using Watch Face Studio! If you’re having trouble, you may download this file:

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