Skip to main content
Samsung Developer Program

Develop your Galaxy Watch face

Design, produce, and distribute your own Galaxy Watch faces without complex code scripting. The Galaxy Watch Designer (GWD) interface is easy to use, giving you the ability to arrange your screen by dragging and dropping components into place.

This section describes the basic layout of the main design window, as shown in the following illustrations. not-the-mainScreen.png

A. Component bar

The Component bar lists the components to use for your watch face. You can add as many components as you want to any of your designs. Click on any component to select a preloaded Galaxy Watch Designer component, or click Import Image to load an external, customized file.

component_import-image.PNG

You can add new JPG, PNG, and font files from external sources to the Resources folder on your local drive. Use the + button to import files, and use the button to delete a file. Click the folder button to create subfolders under res to help keep your uploaded files organized.

Galaxy Watch Designer includes these components:

  • Background: Watch face or watch band backgrounds.
  • Index: Watch face or watch band indexes. The index consists of marks used as gradation for hours and minutes in an analog watch.
  • Watch Hand: Moving pointers on the watch that indicate data, such as the hour and minute, in an analog watch.
  • Digital Clock: Displays the time in digits.
  • Image: Images to use on top of the watch face background.
  • Text: Text that describes complications or other aspects of your watch. Click Text to show icons of the different elements you can add to your watch face, and then click on any icon to add information about the specified element.
  • Animation: Sequenced images that provide animation (see Add Animation).
  • Complications: Complications are samples made from GWD component combinations. You can place any complication as-is from GWD onto your watch face, or customize each of its separate components as you want. For more information, see Add Complications.

B. Preview window

Design your watch face in the Preview window. Add elements from the Components section to your design in the Preview window, and use drag-and-drop functionality to rearrange them on your watch face. 

propertiesWindow.PNG

C. Properties window

You can configure each component from the Properties window. Click on the component itself to bring up the specific Properties information and customize its values. The above example shows properties for the Watch Hand component named Second.

D. Resource window

From the Resource window, you can import many different types of files (such as PNG, JPG, GIF, font) to use as components.

Use the search bar to browse and find files, and use the + button to import files to your local device. Use the - button to delete a file.

E. Layers

When you add a component, you create a new layer to your watch face, which you can rename and configure as you want. From the Layer window, you can manage, order, or remove any layer image on your watch face.

Each layer monitors one layer condition at a time. If a layer is activated to change according to one condition, any existing monitoring done by that layer will stop.

Layer ordering is important. Each layer supersedes the layers that are located beneath it, with the topmost layer read and implemented first. Subsequent layers and their actions are read and implemented in order of occurrence. 

 

 

F. Conditional lines

Use conditional lines to make your designs more dynamic with components that change their appearance based on certain conditions. From the Conditional lines area, you can show or hide objects in the preview by choosing show or hide in the appropriate frames.

layerandConditionalLineWindow.PNG

Prepare the main window 

This section provides optional steps to prepare your main window before you begin designing. 

  • First, note the circle in the main window. Your watch face design and its elements must fit into this circle. If they do not fit, you must resize them or use alternate elements.

From the View tab:

  • Enable Show Coordinate Axis. The coordinate axis provides horizontal and vertical axes to help you align and center components.
  • Enable Show Pivot, which you can use to set your watch hands.
  • Was this article helpful?