The development process for Android Wear apps is slightly different from building regular Android apps. This is because the wearable app needs to be embedded into a mobile app for it to run. It’s the apk file for the mobile app that’s then uploaded to Google Play. When the mobile app is installed, it automatically installs the wearable app on any watches connected to the device.

For this to work, the mobile and wearable apps both need to have the same package name and they need to be signed. The Manifest file for the mobile app also needs to contain all the permissions present in the wear Manifest file. The wearable module is attached to the mobile module through the Gradle file.

Let’s get started…

Open Android Studio and Start a new Android Studio project. Fill in your Application name and Company Domain and then select the Next button.

We need to have both a mobile and a wearable module so we’ll select both choices here and click the Next button to continue setting up our environment.

Since this is tutorial is for a basic watch face, we won’t need to display any screen in the mobile app. Hence, we select the Add No Activity option and click the Next button.

And then select the Watch Face option and click Next.

Here, we get to choose what kind of watch face style we want, whether Analog or Digital. In this tutorial, we’ll be working with the Analog face. You can decide whether or not to make the watch face interactive. We want to keep things very simple so we will skip that option and select the Finish button.

Those options load up Android Studio with two modules for the mobile and wear apps. The wearable module already contains code for displaying a default analog watch face. Some of the APIs in the code template are already deprecated (Time and resources.getColor(int)) and I replaced them in my own app with Calendar and ContextCompat.getColor(context, int).

Two modules for the mobile and wear app

Locate the Gradle file for the mobile app and add the wear module to it as a dependency.

wearApp project(‘:wear’)

Next, locate MyWatchFace service in the wear module. Note that the service has already been added by Android Studio to the wear module manifest file. Right now, if you connect a wear device or a wear emulator to Android Studio and your mobile device and run the wear app, you should see a very basic watch face.

A typical MyWatchFace service class consists of two inner classes and a method; the onCreateEngine() method, EngineHandler class and the inner Engine class that extends CanvasWatchFaceService.Engine. We’ll be paying extra attention to the inner Engine class.

The Engine class has a couple of Paint variables for drawing to the screen. The screen is a canvas so the different components have to be painted on it. In my Radar App Watch Face on Github, I had a lot more items on the screen than what’s currently in the code template. There was the purple background, the hour hand, minute hand, second hand, ‘radar’ text, hour text and the hour and minute ticks which all needed to be drawn on the screen.

Next, there are boolean variables which determines whether or not the wear device is in ambient mode, low ambient mode or has burn-in protection. In Ambient mode, the watch face stays on and functions like a normal watch face instead of the screen being turned off completely when not in use. There are three different Ambient modes in Android Wear. The first is the regular ambient mode where the display is dimmed but it still supports antialiased text. There’s the low-bit Ambient mode that limits the colors displayed. There’s also the burn-in protection mode that shifts the screen contents a few pixels so the same pixels aren’t being used over and over.

Android Wear developers have to factor this in when building a watch face and make alternate arrangements for when the device is in Ambient mode. This can be done by making the screen background black and making all the other displayed colors white instead. Developers can also go further and stop all frequently occurring activity. In my watch face below, the seconds hand is not displayed when the app is in Ambient mode and the background is black.