Making a Smartwatch Wear Face with Watch Face Studio⌚
I am recently trying out the Android ecosystem, and Smartwatches is a big part of it. Smartwatches have been here for a while, but I feel developers are less excited about it. There is a large market and scope so it is nice Samsung and Google are together focused on providing an easy entry to this market.
What is this Watch Face?
A watch face is a service packaged in a Wear OS app. When a user selects an available watch face, the watch face is displayed and the service callback methods are invoked. When a user installs a Wear app that has watch faces, the watch faces are available on the watch using the watch face selector.
Watch Face is in high demand and there are limited developers. Making a watch face is really simple with the Watch Face Studio by the Samsung Developer. It is really easy and one who has some experience in designing and UI/UX will find it ready easy to pick up and make production-grade wear face.
We will be making a simple watch face in just 4 min
Firstly download and install Watch Studio, from this link.
Watch Face Studio is a graphical authoring tool that enables you to create watch faces for the Wear OS smartwatch ecosystem. This includes watches like the Galaxy Watch4, which runs Wear OS Powered by Samsung. It offers a simple and intuitive way to add images and components and to configure the watch movement. You can also test the watch face on a connected device.
Watch Face Studio supports watch faces for the Galaxy Watch 4 and other watch devices that run Wear OS targeting API level 28+.
After installation when you open you get this interface
Click on the new project and give it a name
This will create a blank canvas like this, Here you can see two screens we add components to the larger circle and see the preview in the smaller one. In the Normal Tab, you add the UI when the user is interacting, in the Always On Tab, you will hide the components that shouldn’t be visible always.
- Let's add a simple digital clock first. Click on the Add Component button on the top centre select the things you want to add then, drag around and set it accordingly.
- Similarly, if you want to add Step Counter it is already pre-configured you don’t have to do anything. First, select Short Text from the Add Component Drop Down. Then select the whole Short Text Component and in Properties Tab scroll down you can make changes accordingly in the Default Provider select the data you want to show.
Note: If you see 0 steps just scroll in the RUN and set the dummy steps accordingly.
RUN is used to simulate different conditions like step count, notification, battery charge etc.
In the same way, add other components, I guess the UI is quite intuitive it will not be an issue at all.
- Not let’s see how to set the Normal and Always On tab it is really simple to hover on the ned of the time to change the visibility that's it.
- To Preview, click the preview icon in RUN Tab.
- To Run click on the button Run on Device on the top right corner. For this you can use Android Studio Emulator add a Wear OS emulator, can connect your smartwatch to your PC and run.
- To Build, click on the Build button it will make the signed apk for you.
Wow, you have built your first watch face see it is really easy🎡
Some References:
- https://developer.samsung.com/watch-face-studio/overview.html
- https://developer.android.com/training/wearables/wfs
- https://www.youtube.com/watch?v=yvjt2DpDmgo
For any doubts and suggestions, you can reach out on my Instagram, LinkedIn. Follow me for Kotlin content and more. Happy Coding!
I will well appreciate one of these 👏
Other Related Topic You May Like:
