This is part 2 of a 4 part series where we explore the challenges of making wearable apps, by building an Android wear watch face with real-time weather data. In Part 1 We provided an overview of the app and created our first watch face. In this part we take a deeper dive into the watch face and the considerations that must be made in making the watch face. We will follow up in the Part 3 about building the real-time weather communication api and finally in Part 4, we show how to package and publish a watch face app.

Square Screen and Round Screen

Android Wear supports two different screen shapes, square (280px * 280px) and round (320px * 320px). In order to build a face that works well for both styles we’ll have to account for these differences.Some areas to consider are:

Font and Image Sizes: The round screen is larger, a font or image size that is suitable for this ends up taking too much room on a square face. Our solution was to apply two sets of sizes for fonts and images, one for each style.

Layout: The round screen doesn’t have corners, so you’ll have to design two layouts for them or one layout suitable for both.

You combine a vertical position and a horiztonal position like so: .setStatusBarGravity(Gravity.TOP | Gravity.LEFT)

Note: the bottom positions are above the peek card and corner positions are not allowed on round screens.

setHotwordIndicatorGravity : the position of “OK Google”.Positioning for the Hotword is set the same way as the Status Bar.

setShowUnreadCountIndicator: Whether or not to show the unread count indicator

The round screens are less flexible when it comes to positioning of UI Elements. For example, because of the lack of corners, setStatusBarGravity(Gravity.RIGHT|Gravity.TOP) is not allowed on round Android Wear devices.In our watch face we use short peek cards, hide the peek card when in ambient mode, the peek card background is shown briefly, and we don’t show the default clock. Other watch faces may use different options.

Interactive Mode and Ambient Mode

Unlike Android phones and tablets which just have two screen states, on or off, Wear devices have a third screen mode called ambient mode.The following are the definitions of the two active modes from the Android Developer Site

Interactive modeWhen the user moves their wrist to glance at their watch, the screen goes into interactive mode. Your design can use full color with fluid animation in this mode.Ambient modeAmbient mode helps the device conserve power. Your design should make clear to the user that the screen is in ambient mode by using only grayscale colors. Do not use a lot of white in ambient mode, since this distracting and hurts battery life on some screens. In this mode, the screen is only updated once every minute. Only show hours and minutes in ambient mode; do not show seconds. Your watch face is notified when the device switches to ambient mode, and you should thoughtfully design for it.

According to Google’s specifications, we need to change the watch face’s color palette to grayscale when in ambient mode. We can detect changes in screen mode with onAmbientModeChanged.

TIP:Inside onDraw() you can use isInAmbientMode() to determine which state the screen is in. However, it is more efficient to use onAmbientModeChanged, as you will not be checking the screen mode on every draw call.

Setting Redraw Frequency

If you want your watch face to update more frequently than once a minute you have to create timers to redraw the screen yourself. For our watch we want to redraw the screen twice every second, ie. 500 milliseconds. In Android, there are a few classes we could use for our timer. We will use one of Google’s recommendations: Handler, which is a recursive timer. For more information on it, see this document.

final Handler mUpdateTimeHandler = new Handler() { @Override public void handleMessage(Message message) { // when the handler is active, call invalidate() to make the screen redraw. invalidate(); // only visible and interaction mode, we active the handler // AmbientMode use another time. if (isVisible() && !isInAmbientMode()) { // run again in next 500 milliseconds // the first parameter is message code, we don't use it here, so put 0. mUpdateTimeHandler.sendEmptyMessageDelayed(0, 500); } }};

Step 1: Send a message to the handler when the screen is in interactive mode and remove all the messages from the handler when the screen is turned off.

You can then use logcat to see what you have logged in Android Studio(Figure 20) Now you know all about the Android Wear Interface! In our next post we will show you how to connect your watch face to an Android Device and get real time weather data from the Open Weather API.

Share

GET CURATED TECH NEWS WEEKLY

Recommended Posts

10

October

Android Fragment Animations – Transition and Animation As a digital consulting company we deem it important to give back to the community and continue to publish open source software on our GitHub page, ...Read More >

21

April

Tutorial: Building an Android Wear Watch Face, Part 3 : Wearable APIs This is part 3 of a 4 part series where we explore the challenges of making wearable apps, by building an Android wear watch face ...Read More >

04

May

Hacking together mobile apps using Twitter data store At SWARM, an app design and development company in New York, we love to run experiments and try new things. Some of our experiments like ...Read More >