Tip:
Highlight text to annotate it
X
HOI LAM: Custom watch faces have been
one of the most eagerly anticipated features
for Android Wear.
With the latest release, watch face development
is now officially supported.
I'm Hoi Lam from Google, and this
is an introduction to developing watch faces.
Your watch face is a service that runs in the background.
I'm going to run you through the three straightforward steps
to craft your own.
First, I'll go through how to create your watch face
project, second, how to customize it
for both interactive and ambient mode.
Last but not least-- additional APIs
to help you create a watch face that
will be legible in all conditions.
So how do you get started?
The easiest way is by opening up one of the watch face
samples located under this directory.
There's a digital watch face and an analog watch
face to get you started.
Within the project, you will see two key methods which impact
the set up and rendering loop.
In onCreate, we typically set up instance variables,
which include loading bitmap objects
or initiating paint objects for drawing
on the watch face or canvas.
In onDraw, we render each one of the frames
that we display on the watch face.
Since we're drawing on a canvas, we can use the standard bitmap
or shape drawing functionalities.
It's important to keep performance in mind,
since this code runs on every frame.
After creating the project, you're
now ready to customize the watch face
for the two main modes-- interactive and ambient.
In the interactive mode, the watch face
will often be in full color with fluid animation.
This is typically when the user is paying attention
to their watch.
In ambient mode, the graphics should use a limited color
palette.
And it's only updated once a minute.
So what are some of the main customization options that
are available in these two modes?
In interactive mode, the template
defaults to updating once a second.
If you need it to update more frequently-- say,
because you want to play an animation--
you'll need to do three things.
First, you need to remove mUpdateTimeHandler.
Otherwise, the onDraw method will only
be called once a second.
Second, you need to trigger the onDraw method the first time
the watch face is visible.
This is done by invalidating the frame under the method
onVisibilityChange.
Lastly, you'll need to invalidate a frame
at the end of the onDraw method.
This will kick off the onDraw loop,
which enables fluid animation.
Now your watch face will update continuously.
It's important that you check if the watch face is
in ambient mode before invalidating the frame.
Otherwise, the update loop will run continuously
in the background, even when it is in ambient mode.
And this will significantly impact battery life.
With the interactive mode dealt with,
it's now time to talk about ambient mode.
The two common actions that developers take in ambient mode
are one, we choose graphics in the grayscale or black and
white, two, remove screen elements that
are updated more than once a minute, such as the watch hand
or digits displaying the seconds.
To listen in to whether the watch has
gone into ambient mode, you can override
the onAmbientModeChange method.
Developers will typically send the instance variable
indicating whether the watch is in ambient mode
and invalidate the current frame.
This will trigger redraw.
Then, in the next onDraw, developer
can decide what they want to do.
With the basic customization out of the way,
it's now time for some extra polish.
In addition to ambient mode, the watch
face APIs give developers additional context
to make sure that the watch face is legible in all conditions.
I would like to highlight two of these.
First, some Android Wear devices support low-bit ambient mode,
which means that screen pixels can only be on or off.
Merely reusing a grayscale design
typically does not work on these screens.
For example, if we do nothing to the grayscale design
that we have for Santa Tracker, this
is what it would look like in low-bit.
As you can see, it's not very pretty.
That's why we implemented this alternative black and white
design.
To determine whether the device supports low-bit,
override the onPropertiesChange method.
And developers can read whether the watch
supports low-bit ambient mode.
Second-- it is my personal favorite,
this one-- the ability to find out
whether there is a peek card on the screen.
This allows you to make sure that it does not interact badly
with your watch face design.
And it is especially important in ambient mode.
Without this, as you can see on the left,
the tick marks interfere with the peek card,
making it hard to read.
In our final design, we draw a black rectangle
with no border behind the peek card to make it more legible.
In addition to this, using the watch face style class,
developers can specify whether or not
a peek card is shown in ambient mode,
and whether it is opaque or translucent
in interactive mode.
Please check out the documentation
for many more features, including
how to keep tab of time zone changes,
displaying live data on watch faces,
and altering watch face settings from the mobile device.
I'm Hoi Lam, and I look forward to reading the time
with your watch face.