Presentation/demo held at Google Developer Group Oslo DevFest 2014 Abstract: This talk will show you how to build an Android Wear app. Thomas will start out with a plain notification and show you how to add features until you have a full-fledged card UI. We will discuss the role of the phone and the watch and how to communicate between them. As a case study he will use a prototype for a news alert app he's working on - there will be plenty of code examples and demos. Thomas Oldervoll has worked 5 years for Google in Mountain View and 9 years for Zenior in Oslo. He likes building things, in particular machine learning, scalable backend systems and Android apps.

1. Developing for
Android Wear
Thomas Oldervoll
thomas@zenior.no

2. Before we begin
Have you created an Android app?
Is it your day job?
Do you own a Android Wear device?

3. Android Wear are small and quick to implement -
the ideal side project!

5. The dirty secret of
Card UIs:
it’s just notifications

6. Demo:
Going from plain-old
notification to Wear card

7. Plain old notification
NotificationCompat.Builder notificationBuilder =
new NotificationCompat.Builder(context)
.setSmallIcon(R.drawable.sunrise32)
.setContentTitle(story.title)
.setContentText(story.contents)
.setContentIntent(createReadMoreIntent(story))
.setAutoCancel(true);
NotificationManagerCompat notificationManager =
NotificationManagerCompat.from(context);
notificationManager.notify(0, notificationBuilder.build());

8. Add an image and it looks like a card
NotificationCompat.Builder notificationBuilder =
new NotificationCompat.Builder(context)
.setSmallIcon(R.drawable.sunrise32)
.setContentTitle(story.title)
.setContentText(story.contents)
.setContentIntent(createReadMoreIntent(story))
.setAutoCancel(true);
Bitmap image = loadImage(story.image);
if (image != null) {
notificationBuilder.setLargeIcon(image);
}
NotificationManagerCompat notificationManager =
NotificationManagerCompat.from(context);
notificationManager.notify(0, notificationBuilder.build());

9. Add pages
NotificationCompat.WearableExtender wearableExtender =
new NotificationCompat.WearableExtender();
for (Story subStory : story.subStories) {
Notification storyPageNotification =
new NotificationCompat.Builder(context)
.setContentTitle(bold(subStory.title))
.setContentText(subStory.contents)
.build();
wearableExtender.addPage(storyPageNotification);
}
notificationBuilder.extend(wearableExtender);

10. Add a separate page for just the image
if (image != null) {
Notification imageOnlyNotification =
new NotificationCompat.Builder(context)
.extend(new NotificationCompat.WearableExtender()
.setBackground(image)
.setHintShowBackgroundOnly(true))
.build();
wearableExtender.addPage(imageOnlyNotification);
}

11. Show more content in the phone
notification
NotificationCompat.BigTextStyle style =
new NotificationCompat.BigTextStyle();
style.bigText(story.contents);
NotificationCompat.Builder notificationBuilder =
new NotificationCompat.Builder(context)
.setSmallIcon(R.drawable.sunrise32)
.setContentTitle(story.title)
.setContentText(story.contents)
.setContentIntent(createReadMoreIntent(story))
.setAutoCancel(true)
.setStyle(style);

12. News alert app
• Push news alerts as they happen
• By default push most important stories
• Allow user to subscribe to stories of interest

13. Who detects when
something happened?
• The watch? No, doesn’t have Internet
• The phone? No, would kill battery
• App Engine? No, can’t use Web Sockets
• Google Cloud Mananged VMs? Yes.

14. Demo:
News alerts

15. Adding actions
notificationBuilder.addAction(
createFollowAction(story.channel, notificationId));
pr private NotificationCompat.Action createFollowAction(
String channel, int notifcationId) {
int icon = R.drawable.ic_action_important;
String title = context.getString(R.string.unfollow);
String action = FetcherService.ACTION_UNFOLLOW;
Intent intent = new Intent(context, FetcherService.class);
intent.setAction(action + "/" + channel + "/" + notifcationId);
PendingIntent pi = PendingIntent.getService(context, 0, intent, 0);
return new NotificationCompat.Action(icon, title, pi);
}

16. When do you need more
than notifications?
• More advanced UIs? Can send custom activities in
notifications
• Launch from Wear
• Use Wear sensor
• Run with no phone connection

17. What can Wear apps do?
• Pretty much anything an Android app can do - but
keep the form factor in mind
• No Internet, no webkit
• APIs for sending and receiving messages and data
to/from phone

18. Demo:
Browsing with a
Wear app

19. Sending messages
from watch to phone
GoogleApiClient apiClient = new GoogleApiClient.Builder(context)
.addApi(Wearable.API)
.build();
apiClient.blockingConnect();
for (String nodeId : getRemoteNodes(apiClient)) {
Wearable.MessageApi.sendMessage(apiClient, nodeId, "/fetch", null);
}
private Collection<String> getRemoteNodes(GoogleApiClient apiClient) {
HashSet <String>results = new HashSet<String>();
NodeApi.GetConnectedNodesResult nodes =
Wearable.NodeApi.getConnectedNodes(apiClient).await();
for (Node node : nodes.getNodes()) {
results.add(node.getId());
}
return results;
}

20. Receiving messages on phone
public class FetcherService extends Service
implements MessageApi.MessageListener {
@Override
public void onMessageReceived(MessageEvent messageEvent) {
Log.i(TAG, "Received " + messageEvent);
if (“/fetch”.equals(messageEvent.getPath())) {
String wearNodeId = messageEvent.getSourceNodeId();
new StoryFetcher().execute(wearNodeId);
}
}
…
}

21. Connecting to watch from phone
private GoogleApiClient createApiClient() {
return new GoogleApiClient.Builder(this)
.addConnectionCallbacks(new GoogleApiClient.ConnectionCallbacks() {
@Override
public void onConnected(Bundle connectionHint) {
Log.d(TAG, "onConnected: " + connectionHint);
Wearable.MessageApi.addListener(apiClient, FetcherService.this);
}
@Override
public void onConnectionSuspended(int cause) {
Log.d(TAG, "onConnectionSuspended: " + cause);
}
})
.addOnConnectionFailedListener(new GoogleApiClient.OnConnectionFailedListener() {
@Override
public void onConnectionFailed(ConnectionResult result) {
Log.d(TAG, "onConnectionFailed: " + result);
}
})
.addApi(Wearable.API)
.build();
}

22. Wear-enabling your app
• Don’t squeeze the phone UI onto the wrist!
• Instead, enrich your notifications. This will make
your app better on the phone as well.
• Use your app on a watch every day