Design: Samsung Galaxy Watch Face made Easy!

Today, I attended a workshop about creating Galaxy Watch Faces and I was so surprised at how easy it was! I ended up veering away from using the workshop assets to creating a design to my liking.

Now, I’m going to pass that knowledge and make you acknowledge that it’s super easy too! ʕ•́ᴥ•̀ʔっ♡ Game?

Our Goal

To create a watch face design!

Heads up, I’m using a windows environment (I know.. I know..). However, you can still follow this simple tutorial. You just need to install the requirements for your environment appropriately.

Requirements

  • Samsung Account: You’ll need this to download the desktop application
  • Galaxy Watch Studio: Where we’re going to create our watch faces
  • *JDK 8 or 14: If you can run Galaxy Watch Studio right after installation, no need to set this up, if you need too, click here.

Best part? Everything is free! Now, assuming everything has been installed correctly…

Let’s Start!

  1. Fire up your Galaxy Watch Studio!
Galaxy Watch Studio welcome screen

The app will welcome you with a straightforward “Do you want to create a new watch face, load recently created, or start from a preset?” dialog.

We’ll be creating one from scratch to show you how capable the functionalities of the Galaxy Watch Studio has in creating your very own desired watch face!

Choose ‘New’ and name your project.

2. Familiarize!

It’s important to explore! Part of exploring is getting familiar with the tools to make it easier for us. I’m listing down the simplest parts needed to complete one project:

  • 1 — Upper and Left toolbar: Background, Index, Watch Hands, Digital Clock, Image, Text, Animation, Others
  • 2 — Workspace
  • 3 — Properties Tab (Pretty much where we customize things like color, text, size etc.)
  • 4 — Preview Window
  • 5 — Object Tab: Timeline, Battery %, Steps %, 12H/24H, Km/Mile

I bet when you saw the window you wanted to dive right in, no? Don’t worry, I felt the same thing, but stay with me for a little longer.

3. Start with a Background

I don’t know about you, but I’d really like to start with a background! It’ll set the theme for the whole watch face!

By default, if you look at the left tab and click the Background icon, there’s already a few assets. One of them was what I used for the watch face found near the title.

I’ll be uploading an image for this sample. Check it out!

Have you watched Black Clover yet? If not, after this tutorial, I beg you to watch it!

You don’t have to worry if you have an image too big for the watch face. It automatically gets cropped out! Nice right?

4. Index, Watch hands and everything nice

I already added the index, step count and battery percentage at the least. All of those are found in the left toolbar, go ahead and explore.

The most important part in this discussion is how we’ll make the watch hands move (or any object).

Let’s select the watch hand object from the Object tab. Below, I clicked the Hour hand.

Notice the properties tab changing it’s content? Scroll on that tab to see more. We will be focusing on the Rotation Properties.

The Sync with property sets an object rotation phase.

In this case, selecting the HR hand, we would like to use the Hour in a Day option. Min hand, Minute in Hours and Sec hand, Second in Minute.

Another one of my favorite property is the Moving Effect!

5. Now, Going Live!

Now that we’ve set up the rotation properties of the watch hands, we are more or less almost done.

In the Preview Window, click the “Play” button. If you did step number 4 correctly, you should now be seeing a moving watch clock!

Play around with the sliders and see what happens!

That’s it! Your watch face design is finished!

6. Bonus: Choosing your watch

Seeing what your watch face would really look like on a specific watch model is not necessary but a really great feature to have! This is something Galaxy Watch Studio did really well!

To enable viewing the watch, click on the last button where the play button is also found (1).

We can now enjoy the mix n’ match of casings and band colors ❤
To do this, click on the dropdown (2) found just at the bottom of your watch preview.

And now…

We’re officially done designing our first watch face! Hooray!

If you think you are up for the challenge, check out the Watch Face Application Window! Submit your design for review to have it officially published!

Software Engineer in Samsung Research and Development Philippines