Creating an Android Wear Watch Face

Creating an Android Wear Watch Face

In this lab, we are going to walk you through how to create a basic Android Wear watch face, complete with battery level indicator.

At the end of our lab, you should have something that looks like the image above.

In December 2014, with the release of Android 5.0 (Lollipop) Google also released the official Watch Face API for Android Wear. Prior to this there were hacks which enabled you to do so, however Lollipop adds official support.

 

Creating the project

We are going to be using Android Studio. We’ll assume you already have it installed. If not you can get it here.

Start by creating a new project, giving it an application name, company domain and package name. Once you have done that the next step is to choose the platform you want the app to run on. In this case the only one we need to select is Wear and API 21 as shown below.

Create_New_Project_and_Android_Studio_and_Slack

 

For the next step choose to Add No Activity .

Create_New_Project

 

Click Finish.

 

Creating the classes

The next step is to create the Watch Face class. To do so open the Project View and right click on your package name (under app/java). From the context menu, select New -> Wear -> Watch Face.

 

Screenshot_26_03_2015_12_36_pm

Now give your Service a name (for this tutorial we’ll call it “MyWatchFace”) and select the Analog style.

New_Android_Activity

 

This will create a class containing all the necessary code to create a simple watch face.

 

Adding in a background

The next thing we are going to do is give the watch a background. This will require some adjustments to the pre-existing code. You’ll also need an image that you wish to use as the background, and add it to the project as a drawable.

Google recommends that you use an image of 320 x 320.

At the top of the inner class Engine declare a variable called:

Import any necessary classes:

Select_Classes_to_Import

Locate the onCreate method within the code. Locate the line:

Beneath it add in:

Replace codingfurylogo with the name of the drawable you imported for the background.

Next, locate the onDraw method. In we are going to set it to draw our background image.

Above the comment // Draw the background. add:

Now remove the line:

Run the project. You can do this on an Android Wear device if you have one, but the Android Studio emulator will suffice also. Instructions for setting these up can be found here (see the section Set Up an Android Wear Emulator or Device).

When running the project for the first time, Android Studio might ask you to specify the default activity. Select “Do not launch activity“.

Once you have the watch face installed and the device running, select your new watch face. To do this, tap on your watch and hold for a few seconds. You should be presented with a carousel of watch faces. Select the one you have just installed. It may appear as My Analog.

As you can see, it still looks quite boring!

screen

Adding detail

Lets change the colour of the hands and perhaps add some dashes to represent the hours.

At the top of the Engine inner class add in 4 paint variables.

Remove the following variable declaration:

Now go to the onCreate method. Because we just removed the variable mHandPaint, a line of code won’t compile. Remove it.

Once you have done that add in:

Add any imports as necessary.

The next step is to locate the method onAmbientModeChanged. Now, remove the invalid code referencing the variable we removed earlier. Within the if statement, add the following:

Now go to the onDraw method. Here are three variables which are red (the removed variable again). Replace the first one with mSecondPaint, second with mMinutePaint and the third mHourPaint.

You should also add code that draws ticks, one for each of the 12 hours of the day, around the edge of the watch face. To do so we will work out the innerTickRadius. Once we have done that we will create a for loop from 1 to 12 drawing each of the ticks on the canvas.

Once you have done that run your code. The watch face should now look something like this:

Android watch face with hands

 

Adding watch battery percentage

Some useful information to the user might include how much battery power they have left on their watch. Let’s add the remaining battery level to the screen!

By the end of this section the watch face should look something like this:

batterypercentage

 

Creating the broadcast receiver

The first thing that we need to do is create the broadcast receiver in order to obtain the battery level from the watch.

Go to the inner class Engine.

First begin by adding the String and Paint variables at the top of the class underneath the other variables we’ve added.

Find the broadcast receiver code for the time zone (beginning with final BroadcastReceiver mTimeZoneReceiver…). After you have done so insert the following code beneath it:

Add any imports as necessary.

Once you have done this go to the onCreate method and locate the rest of the paint initialisations.

Here we are going to create the paint we are going to use to draw on the percentage. We will make it red, and set the text size to 29sp.

Making it ambient mode compatible

Locate the method called onAmbientModeChanged.

Here we are going to add in code that turns off antialiasing for the text when ambient mode is active, if fewer colour bits are supported when in ambient mode.

Within the if statement (if(mLowBitAmbient)..) add the following line of code:

Drawing the text on the screen

Within the onDraw method find the if statement checking that the watch is not in ambient mode (if(mAmbient)…). In here place the following code:

Registering and unregistering broadcast receivers

Find the method registerReceiver(). Within this method we are going to do initialise a BroadcastReceiver for the battery level. Essentially, we are registering for notifications from the OS so we know when the battery level has been updated.

First, we need to modify the existing code. The registerReceiver method should already look like this:

We need to change it so the flag check doesn’t return from the method. Modify it to the following:

Now add the following code underneath, to register the battery level receiver:

Intent.ACTION_BATTERY_CHANGED will alert the watch face with a new value every time the battery level updates.

Unregistering the receiver is very similar only this time it is going to be within the unregisterReceiver method. Find the existing code:

Change it to the following:

Now add the following code underneath:

Now run your project.

You should have a basic, customised watch face that tells you the time and your watch’s battery level. There’s much more we could have covered, but this is all we had time for!

watchimage