The Beginning — Watch Face — Wear OS

NOTE: I wrote this blog 4 years ago, but I just realized it is now outdated. I will update it as soon as possible.

Steps to create a simple Analog Watch Face from scratch for Wear OS

Start a new project

1. Open Android Studio and click Start a new Android Studio project
2. Select the tab Wear OS, select No Activity and click Next
3. In the Configure Your Project dialog, enter your project details and click Finish

Create Watch Face Service class

Create a Java service class extending CanvasWatchFaceService and add inside an Engine class extending CanvasWatchFaceService.Engine and add override methods as follows.

In AndroidManifest.xml, create a service tag inside the application tag as follows.

As we added the service tag in Manifest, now we need to add watch_face.xml in the XML directory and the preview drawable in the drawable directory. The preview drawable will be shown with other watch faces in the Wear OS device and the Phone connected with the Wear OS device.

preview.png

Here comes the actual coding part, we can divide this into seven segments. And I am also going to show the sample code as an individual segment.

1. Background
2. Circle/Dial
3. Rotation calculation
4. Hours hand
5. Minutes hand
6. Seconds hand
7. Update the timer only when active
8. Change display in ambient mode

1. Background

We can use a color or drawable as a background. In this example, we are using an image as the background. The method scaleBitmap() is used to scale the bitmap based on the Watch’s dimension.

bg.png

2. Circle/Dial

First, we are initializing the paint and draw it from the onDraw() method. Steps to create hours, minutes, and seconds hand almost the same except the rotation calculation, that we see in the next segment.

3. Rotation calculation

To calculate the rotation of each hand we need the current time. To get the current time, we are using the Calendar class. We have a receiver called mTimeZoneReceiver to get the default timezone.

4. Hours hand

As same as creating a circle/dial, we are initializing the paint and draw it from the onDraw() method. We can customize the width and length as we needed.

5. Minutes hand

6. Seconds hand

7. Update timer only when active

Updating the timer all the time may drain the battery, so we need to update the timer only when the watch face is active. We are using onVisibilityChanged() to achieve that. We are registering and unregistering the mTimeZoneReceiver based on the visibility change. Using mUpdateTimeHandler we are updating the timer for every second only when the watch face is visible.

8. Change display in ambient mode

Some users may be enabled always on screen in the watch. In that case, the face watch will be active all the time and it may drain the battery. So, we can resolve this problem by changing the display for ambient mode by using the onAmbientModeChanged() callback. In the following example at ambient mode, the circle and seconds hand is disabled, the hour and minute hand anti-alias are set to false.

Gitlab

Medium / WatchFace

That’s all

You have created and built an analog watch face for Wear OS.

Happy Coding

Let’s learn to create more apps for Wear OS in the next posts. Happy Coding.