Upload
thomas-oldervoll
View
402
Download
1
Embed Size (px)
Citation preview
Before we begin
Have you created an Android app?
Is it your day job?
Do you own a Android Wear device?
Android Wear are small and quick to implement - the ideal side project!
The dirty secret of Card UIs:
it’s just notifications
Demo: Going from plain-old
notification to Wear card
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());
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());
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);
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); }
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);
News alert app
• Push news alerts as they happen
• By default push most important stories
• Allow user to subscribe to stories of interest
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.
Demo: News alerts
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); }
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
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
Demo: Browsing with a
Wear app
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; }
Receiving messages on phonepublic 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); } }
…}
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(); }
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