Custom Watch Face for Android Wear (Analog and Digital)

Share
Custom Watch Face for Android Wear (Analog and Digital)

Source Code (on GitHub): https://goo.gl/FQDlEq
PlayStore Link: https://goo.gl/0rVD1z

Creating a custom watch face for Android Wear is very cool and makes you feel unique. In this tutorial I’ll take you through the steps of how I made a rounded watch face (for both analog and digital) for my LG G R Android Wear-powered smartwatch.

So let’s see how it’s done…

Designing a Custom Watch Face

Create a new project.

Give the Application a name and the location.

In “Target Android Device,” select “Phone and Tablet” and “Wear.” (I selected API 16 for Phone and Tablet, API 21 as the minimum SDK for Android Wear.)

Then I added a Black Activity for Phone/Tablet and Watch Face for Wear with analog style.

At this point, if you attempt to run the app you’ll only see blank activity on your phone and nothing on your smartwatch. (This is assuming that you had previously run an Android app via Android Studio.)

Hello World Testing

In order to test the watch face you have to enable the debug mode on your smartwatch as you do for your phone. (https://developer.android.com/training/wearables/apps/bt-debugging.html)

Once you have connected the watch to Android Studio you can run the watch face, selecting “Wear” near the “Run” button.

Now it’s time to add a custom layout and the code to the watch face…

Development

The watch face is basically a class that extends a CanvasWatchFaceService.

If you don’t have specific needs, you can write your layout via code like I did. The watch face is made by an engine (that extends a CanvasWatchFaceService.Engine, similar to Wallpaper Service).

In that engine you can paint on the SurfaceHolder passed to the OnCreate method.

Check this file: https://github.com/gazzumatteo/DuckMa-WatchFace/blob/master/wear/src/main/java/com/duckma/watchface/MyWatchFace.java

You can define all the bitmap you need to display in the OnCreate (SurfaceHolder) method. Then in OnDraw (Canvas canvas, Rect bounds) you draw the scaled background in order to fit the screen.

Similar to an Android App, you have to put the background image in a drawable folder and the XML values in “values” folder.

Result

1-8QXeF0XEEfeqBR8lFYqtXQ

1-oaOjqxlKjjHB_9qUZhO22g

Build a Package and Publish

In order to build an Android Application Package (APK) that can be published on the store, you you must package the wearable app inside of a handheld app (because users cannot browse and install apps directly on the wearable).

In order to do this, populate the blank MainActivity created at the beginning (under module mobile in Android Studio).

In the build.gradle of the mobile module, you have to declare the dependencies of the Wear app:
‘wearApp project(‘:wear’)’

Take a look at the build.gradle in the mobile module: https://github.com/gazzumatteo/DuckMa-WatchFace/blob/master/mobile/build.gradle

If you encounter issues when creating the APK, be sure you followed these instructions correctly: https://developer.android.com/training/wearables/apps/packaging.html

Now you’ve got your custom watch face for your Android Wear!

0 comments

Leave a comment