Skip to main content
Samsung Developer Program

Gear Watch Face Designer - Developer Guide

The Gear Watch Designer tool is a one-stop shop for designers who want to develop and distribute their own watch faces. This tool is available for Windows and Mac users only.

The fully functional Watch Face sample application described in this guide is located in Github: 
https://github.com/Samsung-US-Develo.../WatchFace-GWD

Download and Install Gear Watch Designer

Download and install the Gear Watch Designer from http://developer.samsung.com/gear/design/watch-designer.

Prepare Watch Face Files

We will develop a watch face with the following features:

  • A watch face with three watch hands (hour, minute, and second).
  • Battery indicator
  • Low-bit color for Always-On mode.

Images:

  • background.png - Watch face background
  • hour_hand.png - Watch hour hand
  • minute_hand.png - Watch minute hand
  • seconds_hand.png - Watch second hand
  • battery_01.png - Shown when battery percentage is between 0% - 10%
  • battery_02.png - Shown when battery percentage is between 10% - 20%
  • battery_03.png - Shown when battery percentage is between 20% - 30%
  • battery_04.png - Shown when battery percentage is between 30% - 40%
  • battery_05.png - Shown when battery percentage is between 40% - 50%
  • battery_06.png - Shown when battery percentage is between 50% - 60%
  • battery_07.png - Shown when battery percentage is between 60% - 70%
  • battery_08.png - Shown when battery percentage is between 70% - 80%
  • battery_09.png - Shown when battery percentage is between 80% - 90%
  • battery_10.png - Shown when battery percentage is between 90% - 100%
  • battery_gauge_action.png - Transparent image for binding tap action.

Copy all images to the Gear Watch Designer folder, which typically is located at C:\Program Files (x86)\GearWatchDesigner\res

Create a New Project

1. From the Gear Watch Designer tool, open File > New Project.

2. Select New, and enter a project name. Click OK.

3. From the Component panel on the left side, Click Background > Import Image, and select the background.png image.

4. From Index, select a watch index.

5. Click the Watch Hand icon from the Component panel, and select the hour_hand.png image for the hour hand.

6. Set the X,Y position and pivot point. To change the pivot point, right-click hour_hand.png, and select View > Show Pivot.

7. From Properties on the right side, synchronize the Hour hand with Hour in Day in the Rotation Properties window.

8. From Watch Hand, select the minute_hand.png image for the minute hand and the seconds_hand.png image for the second hand.

9. Synchronize the Minutes hand with Minutes in Hours in the Rotation Properties window, and synchronize the Seconds hand with Second in Minute in the Rotation Properties window.

10. From the Component window on the left, select Image icon, and select all 10 battery indicator images. Each image is shown for a 10% interval of battery percentage.

11. Use your mouse or the toolbar alignment buttons to align battery indicators.

12. Open the Battery tab by clicking the + button on the right side of the Timeline tab.

13. Click over the frame. Right-click the image that corresponds to battery_01.png to activate it.

After you activate the image, you will see the following:

14. Select the frame from 10 to 100, right-click over the selected frame, and select Hide. This causes the frame to show only when battery power is at less than 10 percent.

15. Use the process described in step 14 to set visibility for all images that indicate battery power, using the appropriate image for each 10% change in battery power. Enable each image to show for 10 frames.

16. Add battery_gauge_action.png. When you tap this image, it launches the Battery Status Page.

a. Select this image in the layer window, and click the button in the top right corner of the Properties window (see the red rectangle in the following image).

b. Click “Set as Button” to add an “Action” tab in the Properties window.

c. Open the Action tab.

d. Set “Action” to “Open App,” and select “Battery Status” in the “Open App” field.

Create an Always-On Version of Watch Face

The Gear Watch Designer automatically generates an Always-On version of your watch face. Because the Always-On state is set as low power mode, color representation is restricted. Samsung recommends that you create a design that uses no more than 15% of available pixels in Always-On states.

There are two different color schemes:

  • Low-bit color - The Always-On state only uses cyan, magenta, yellow, red, green, blue, and white at full brightness. Gray scales and gradients cannot be used.
  • High color – The high-color state has no color limitations, so the corresponding active versions of your watch face can be replicated more closely. High color Always-On states are available only for Gear S3 or newer devices.

You can design your own Always-On watch face with a limited number of features and functions to accommodate color restriction.

Create a Low-Bit Color Watch Face 

1. Click Project > Always-on state.

2. Select Low-bit color.

3. Click the Always-on tab on right top corner and select Low-bit color to generate a low-bit color watch face.

This generates a low-bit color watch face. You can also modify the Always-On watch face per your own design. In the following example, we changed the background to a dark color and remove the battery indicator.

a. Change the background to a gray-scale image:

b. Remove all battery images.

Similarly, you can create a high-bit color watch face for Always-On mode.

4. Click the button shown in the red square below to run the Watch Face On emulator.

5. You can check any type of watch face (Normal, Low, and High color) on the emulator. Click the button shown below to switch watch faces:

6. Go to Project > Run on Device to run the watch face on the target device. If you have not generated the Author and Distributor certificates, do so now (see the Certification section).

Certification

To become a Gear Watch Face designer, you need two certificates:

  • Author Certificate
  • Distributor Certificate

Both certificates can be created through the Gear Watch Designer.

Generate an Author Certificate 

1. Open Project > Author Certificate.

2. Select Generate a new certificate signing request to create a new certificate, and click Next.

3. Complete the required information, and press Next.

4. Sign in using your Samsung developer account.

5. Your Author certificate is generated on successful sign-in.

Generate a Distributor Certificate 

1. Connect Gear Watch via Wi-Fi. For instructions on how to connect your Gear Watch to your system using Wi-Fi to your system, go to http://developer.samsung.com/gear/develop/testing-your-app-on-gear.

2. Open Project > Distributor Certificate.

3. After you connect Gear Watch to your PC, the Connected Device ID appears, as shown below. Sign in with your Samsung developer account.

4. Your Distributor certificate is generated on successful sign-in.

    • Was this article helpful?