Getting Ready For

Android Wear

Lead Engineer + Interaction Designer @ Haptik

+Raveesh Bhalla | @raveeshbhalla

http://youtube.com/v/4fMqIRa_tgc

Motoactv (2011) Pebble (2012) Galaxy Gear (2013)

Pitfalls

· Not very fashionable· Limited capabilities· Difficult (or impossible) to develop for· Horrible UI

Setup

● Android Studio with Project● AirDroid to stream my phone’s screen● Android Wear Emulator

To get started, visit developer.android.com/wear

All notifications from your app will be shown on a connected Android Wear

device

Regular Notification

/** * A regular notification that does absolutely nothing. Just shows up */private void regularNotification() { /** * Straightforward NotificationCompat.Builder * Set title, text, small icon, large icons and default values */ NotificationCompat.Builder builder = new NotificationCompat.Builder( this); builder.setContentTitle("Regular Notification"); builder.setContentText("This is a regular notification"); builder.setSmallIcon(R.drawable.ic_launcher);

/** * The large icon is set as the background on Android Wear * Style it wisely! */ Bitmap bmp = BitmapFactory.decodeResource(getResources(), R.drawable.morpheus1); builder.setLargeIcon(bmp); builder.setDefaults(Notification.DEFAULT_ALL); builder.setAutoCancel(true); mManager.notify(1, builder.build());}

Regular NotificationWith Intent

/** * A plain notification that launches the browser, opening Google */private void regularNotificationWithIntent() { NotificationCompat.Builder builder = new NotificationCompat.Builder( this); builder.setContentTitle("Notification with Intent"); builder.setContentText("This will launch Google"); builder.setSmallIcon(R.drawable.ic_launcher); Bitmap bmp = BitmapFactory.decodeResource(getResources(), R.drawable.morpheus1); builder.setLargeIcon(bmp); builder.setDefaults(Notification.DEFAULT_ALL); builder.setAutoCancel(true);

/** * The Pending Intent that is to be fired when the notification is clicked * This is passed on to Android Wear as an Action called "Open" */ Intent intent = new Intent(Intent.ACTION_VIEW); intent.setData(Uri.parse("http://www.google.com")); PendingIntent pi = PendingIntent.getActivity(this, 0, intent, 0); builder.setContentIntent(pi); mManager.notify(2, builder.build());}

Notification with Actions

/** * Actions are also shared with Android Wear */private void regularNotificationWithActions() { NotificationCompat.Builder builder = new NotificationCompat.Builder( this); builder.setContentTitle("Notification with Actions"); builder.setContentText("This will launch different sites"); builder.setSmallIcon(R.drawable.ic_launcher); Bitmap bmp = BitmapFactory.decodeResource(getResources(), R.drawable.morpheus1); builder.setLargeIcon(bmp); builder.setDefaults(Notification.DEFAULT_ALL); builder.setAutoCancel(true);

/** * Actions to launch Google. The icon and text you choose for your notification drawer action are also passed on * to the Android Wear Device */ Intent intent = new Intent(Intent.ACTION_VIEW); intent.setData(Uri.parse("http://www.google.com")); PendingIntent pi = PendingIntent.getActivity(this, 0, intent, 0); builder.addAction(R.drawable.ic_launcher, "Google", pi);

Intent intent2 = new Intent(Intent.ACTION_VIEW); intent2.setData(Uri.parse("http://facebook.com")); pi = PendingIntent.getActivity(this, 0, intent2, 0); builder.addAction(R.drawable.ic_launcher, "Facebook", pi);

Intent intent3 = new Intent(Intent.ACTION_VIEW); intent3.setData(Uri.parse("http://twitter.com")); pi = PendingIntent.getActivity(this, 0, intent3, 0); builder.addAction(R.drawable.ic_launcher, "Twitter", pi);

mManager.notify(3, builder.build());}

Notification with Inbox

/** * Show an inbox style notification */private void notificationWithInbox() { NotificationCompat.Builder builder = new NotificationCompat.Builder( this); builder.setContentTitle("Notification with Inbox"); builder.setContentText("This will launch Google"); builder.setSmallIcon(R.drawable.ic_launcher); builder.setDefaults(Notification.DEFAULT_ALL); builder.setAutoCancel(true); Bitmap bmp = BitmapFactory.decodeResource(getResources(), R.drawable.morpheus1); builder.setLargeIcon(bmp); Intent intent = new Intent(Intent.ACTION_VIEW); intent.setData(Uri.parse("http://www.google.com")); PendingIntent pi = PendingIntent.getActivity(this, 0, intent, 0); builder.setContentIntent(pi);

/** * Adding additional lines. Best used for summarizing multiple notifications */ NotificationCompat.InboxStyle notification = new NotificationCompat.InboxStyle(builder); for (int i = 0; i < sites.length; i++) { notification.addLine("Site " + sites[i]); } builder.setStyle(notification); mManager.notify(4, builder.build());}

Want more?

Voice Replies Pages Stacks

Voice Replies

/** * Create NotificationCompat.Builder and set desired properties. * Create a Pending Intent for the class that needs to be launched with the response */ Intent intent = new Intent(this, MainActivity.class); PendingIntent pi = PendingIntent.getActivity(this, 0, intent, 0);

/** * The EXTRA_VOICE_REPLY string, created in this class, is the title of the String Extra * by which the response is passed on in the intent from Android Wear * * The RemoteInput object informs the Android Wear device that a voice reply must be taken. * You can add preset choices to inform the user what they can say, as well as add a label. */

RemoteInput remoteInput = new RemoteInput.Builder(EXTRA_VOICE_REPLY) .setLabel("Reply") .setChoices(sites) .build();

/** * Create an Action which, when clicked, requests for a voice reply. If not mentioned, * the default Action is replaced. */ Action replyAction = new Action.Builder(R.drawable.ic_launcher, "Reply", pi) .addRemoteInput(remoteInput) .build();

WearableNotifications.Builder replyNotification = new WearableNotifications.Builder(builder); replyNotification.addAction(replyAction);

mManager.notify(5, replyNotification.build());

Additional Pages

/** * Create a WearableNotification.Builder object, add individual notifications (best * done with BigTextStyle) as pages to this object. */ WearableNotifications.Builder pagedNotification = new WearableNotifications.Builder(builder); for (int i = 0; i < sites.length; i++) { /** * Create a big text style for the additional page */

NotificationCompat.BigTextStyle secondPageStyle = new NotificationCompat.BigTextStyle(); secondPageStyle.setBigContentTitle("Sites") .bigText(sites[i]);

/** * Build a Notification object out of it */ Notification notification = new NotificationCompat.Builder(this) .setStyle(secondPageStyle) .build();

/** * Add it to the WearableNotification.Builder object created earlier */ pagedNotification.addPage(notification); }

mManager.notify(6, pagedNotification.build());

Stacked Notification /**

* Notifications can be grouped together using a common label */String group = "demo";/** * Ideally, first create a summary notification to be shown in the notification drawer * The best way to do this would usually be via a InboxStyle Notification */NotificationCompat.Builder builder = new NotificationCompat.Builder(this) .setContentTitle((stackedNotifications + 1) + " Notifications") .setSmallIcon(R.drawable.ic_launcher);NotificationCompat.InboxStyle notification = new NotificationCompat.InboxStyle(builder);for (int i = 0; i <= stackedNotifications; i++) { int site = i % sites.length; notification.addLine(sites[site]);}builder.setStyle(notification);/** * While setting the group for the summary notification, set the order as * WearableNotifications.GROUP_ORDER_SUMMARY */Notification summaryNotification = new WearableNotifications.Builder(builder) .setGroup(group, WearableNotifications.GROUP_ORDER_SUMMARY) .build();mManager.notify(7, summaryNotification);

Stacked Notification

/** * Create individual notifications that need to be shown. The order can be customized while * setting the group */NotificationCompat.Builder cardBuilder = new NotificationCompat.Builder(this);int site = stackedNotifications % sites.length;cardBuilder.setContentTitle(sites[site]);WearableNotifications.Builder stackedNotification = new WearableNotifications.Builder(cardBuilder);stackedNotification.setGroup(group);mManager.notify(stackedNotifications + 10, stackedNotification.build());stackedNotifications++;

What more would we be able to do?

GDG New Delhi I/O Extended 2014

8 PM, June 25th, Google GurgaonRegister at

Coupon Code: MAYMEETUP

Thanks!