Skip to main content
Samsung Developer Program

Design a Clock

Use these simple steps to create analog and digital clocks for your watch faces.

Design an analog clock

  1. Under Component, click Background. Select a background image from the files provided by Galaxy Watch Designer or import your custom image.

    Note: Hover over a file to view a larger version.


  2. Click Index to choose an index file or import your custom image.

Alternatively, you can create and customize an index file using the Properties window.

  1. Use an image file that represents a small part of the index. 
  2. Enter Placement and Index Setting values to create the index.

  3. Click Watch Hand, and select an hour hand.
  4. Align the watch hand pivot with the pivot point. The pivot point is the star-like shape in the center of the watch face around which the watch hands rotate.

  5. From Properties, configure the following:
    • (Optional) Dimensions: The watch hand width and height.
    • (Optional) Placement: X, Y position of the watch hand.
    • Rotation Properties:
      • Sync with: the appropriate value. For the hour hand, sync with Hour in Day.
      • Time zone: Sync with Device or select a time zone.
      • Rotate: For the Hour hand, the default setting is 2, meaning the hour hand will complete an entire rotation twice a day. Change the setting to 1 for the hour hand to rotate once a day for a 24-hour hand.
  6. To create minute and second hands, repeat steps 3, 4, and 5.
    • You can use the Movement Effect dropdown to select different motion options for the second hand (Second in Minute). Select Normal (default), Sweep for a smooth motion, or Tension for a more realistic watch movement effect.

Design a digital clock

  1. Under Component, click Background
  2. Click Digital Clock.
  3. From Properties > Type, select an ICU format (for more information see Formatting Dates and Times in the ICU User Guide).
    • From the dropdown, select h : mm : a for 12-hour format or enter HH : mm : ss for 24-hour format.
  4. (Optional) From Properties > Appearance, you can add different fonts as Truetype fonts or custom image bitmap fonts.
    • Truetype font: Select the Truetype radio button, and choose a font from the dropdown.
    • Bitmap font: Select the Bitmap radio button. In the Bitmap Font Setting screen, click the + icon that corresponds to the character you want to change under DigitSymbolOther, or Custom, and upload a BMP image to replace that character.
  • Was this article helpful?