Android Wear Development for beginners
Because we all have to start somewhere right?
A few months ago, I developed an Android Wear app for one of my Udacity Android Developer Nanodegree projects and blogged about it. That was my first time developing for Android Wear.
I recently delved into Android Wear development again, this time to try out the new Complications API. With this API, a user can set up complications on a watch face. What they need to do during the setup is to select the part of the screen they want the complication displayed on (depending on the options provided by the developer e.g. left, right, top, bottom) and then for each option, select the complication they want displayed from a list of apps.
All went well until the app crashed when my device was supposed to display the list of apps for the selected complication location on the screen. That screen can only be displayed on devices running Android Wear 2.0. Unperturbed, I decided to modify the code into an analog watch face for Radar.
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).
Locate the Gradle file for the mobile app and add the wear module to it as a dependency.
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.
There’s also a BroadcastReceiver that automatically detects the timezone and updates the canvas with the current time. The onCreate() method contains a WatchFaceStyleBuilder for setting up the screen. All the components to be drawn on the screen are also initialized here. The values for the mLowBitAmbient and mBurnInProtection variables are set in onPropertiesChanged(). onAmbientModeChanged() determines whether or not antialias is set on the screen components. All the components are drawn to the screen in the onDraw() method. The current time is also set here since we want to display the current time anytime the screen is displayed. onVisibilityChanged() registers the time zone receiver and updates the canvas. It also updates the timer. The timer only runs when the watch face is visible or in ambient mode. If the timer should be running and it’s not running, it is started, otherwise, it is stopped.
This covers what it takes to create a basic watch face. You can decide to extend functionality by displaying useful information on the screen for your users, e.g. current battery level. Creating a digital watch face is not so different. Instead of ticking clock hands, you customize the display of time in digits.
If you decide to upload your watch face to Google Play, you need to sign the mobile and wear module in release mode and upload only the mobile-release apk since the wearable module is packaged with it.
The code for the Radar Watch Face is on Github. Please raise issues, star it, send pull requests or even suggest features. Efeturi Money thinks that maybe it will also be good for Radar to have an app too. A little bird tells me he’s interested in building it.
Thought this was great? Please don’t forget to “Recommend” and “Share”.
