Customize Flex Window using Good Lock plugin on Watch Face Studio


Objective

Learn to customize a clock face for your Flex Window using Watch Face Studio's Good Lock plugin called ClockFace.

Overview

Watch Face Studio (WFS) is a graphic authoring tool that enables you to create watch faces for Wear OS smartwatches. Using Good Lock plugins, you can also create a cover screen design for Galaxy Z Flip4 and Z Flip5.

WFS Good Lock plugins enable Watch Face Studio to create customization elements for a specific Good Lock application. Good Lock is a family of applications that allows users to customize various aspects of their Galaxy mobile device, such as the lock screen, home screen, and clock face.

ClockFace plugin, one of the Good Lock plugins, allows you to create clock faces that you can use on a mobile device through the ClockFace module of Good Lock app. ClockFace enables users to customize the clock face on their mobile device's lock screen, Always On Display (AOD), and cover screen. It is part of the Good Lock family of applications.

For detailed information, see Good Lock Plugin.

Set up your environment

You will need the following:

Sample Project

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

Flex Window Customization Sample Project
(473.53 KB)

Initial Setup

  1. From the Main Menu ☰, choose Preferences.
  2. Go to the Plugins tab and click the Install Plugin button. You can click the Download Plugin button to download the installation file.
  3. Locate the installation file and click OK after adding clockface plugin to Plugins list.

  1. Install the Good Lock app in Galaxy Z Flip5.
  2. Then, download and install the ClockFace module from Good Lock app.

Start your project

To load the sample project in Watch Face Studio:

  1. Click Open Project.

  1. Locate the downloaded file, then click Open.

The sample project is a premade watch face design with preloaded images, including a background, trees, clouds, and more. It also contains analog hands and a progress bar to represent step count.

In the Style tab, you can see the watch face's different theme color palette. You can see other options for background, analog hands, and color when you click the Customization Editor button.

Create a rectangular clock face design from a circular watch face

The usual shape of a watch face design that you can create in Watch Face Studio is circular. Using the ClockFace plugin, you can set the project type as CoverScreen, which allows the creation of rectangular designs for Galaxy Z Flip4 and Z Flip5's cover screen.

The sample project is a circular watch face. To change the design to rectangle:

  1. Click the Watch Face Studio logo to go back to the dashboard.

  2. Click the three dots menu next to the sample project you added to show additional options.

  3. Select Create project from.

  1. Enter your Project Name, keep CoverScreen as Type, and select Galaxy Z Flip5 for Size.

  1. Some features of a watch face design made for a smartwatch, such as showing step count data, might not work for the Flex Window. It is suggested to delete unsupported features when you modify the project.

  1. After clicking OK in the dialog box, you can now see a new project with a rectangle canvas.

  1. Right-click on the Step_Count group and choose Delete to remove all components related to step count.

Redesign the project for Flex Window

You need to adjust some components of the newly created project to fit with the Flex Window. To do this:

  1. Resize all images as a group. Select the Background group.
  2. Hold down the SHIFT key. Move the mouse pointer over one of the corner handles, then click and drag the mouse to resize the images. Or, you can change the dimension's width and height of the Background group in the Properties tab.
  3. Adjust the X and Y placements to reposition the images.

Replace analog hands with digital clock

Depending on your preference, you can display analog hands or digital clocks on your Flex Window.

But for this Code Lab activity, change the time display with a digital clock:

  1. Remove the Time group, which includes analog hands and an index.
  2. Click Add Component > Digital Clock > Time.
  3. In Text Appearance properties, change font type and size.
  4. Edit the tag expression in Text Field with [HOUR_1_12_Z]:[MIN_Z] to only show the current time in 12-hour format and minutes.
  5. To indicate whether the time is AM or PM, add a Text component and adjust font type and size.
  6. In Text Field, enter the [AMPM] tag as value.
  7. Lastly, move the Month component anywhere in the canvas and adjust its text appearance.

Display the clock design on Flex Window

To install and display the cover screen design on your Flex Window, you need to:

  1. Connect the Galaxy Z Flip5 to the computer using USB or WIFI
  2. In Watch Face Studio, select Project > Run on device.
  3. Select the connected Galaxy Z Flip5 you want to test with.
  4. If your device is not detected automatically, click Scan devices to see your device or enter its IP address manually by clicking the + button.
  5. Open the Good Lock app on your device and click the ClockFace module.
  6. Choose Cover screen as Clock style and select your clock design.
  7. Choose the edit button to customize the style or tap the check button to apply the design.

You're done!

Congratulations! You have successfully achieved the goal of this Code Lab. Now, you can customize a clock face for your Flex Window by yourself! If you face any trouble, you may download this file:

Flex Window Customization Complete Project
(420.44 KB)

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