| page.title=Notification Changes in Android Wear 2.0 |
| meta.tags="wear", "wear-preview", "notifications" |
| page.tags="wear" |
| page.image=/wear/preview/images/expanded_diagram.png |
| |
| |
| @jd:body |
| |
| <div id="qv-wrapper"> |
| <div id="qv"> |
| <!-- table of contents --> |
| <h2>This document includes</h2> |
| <ol> |
| <li><a href="#visual">Visual Updates</a></li> |
| <li><a href="#expanded">Expanded Notifications</a></li> |
| <li><a href="#messaging">MessagingStyle</a></li> |
| </ol> |
| </div> |
| </div> |
| |
| <p>Android Wear 2.0 updates the visual style and interaction paradigm of notifications |
| as well as introduces expanded notifications, which provide substantial additional |
| content and actions in an app-like experience. |
| </p> |
| |
| <p>The visual and interaction changes make it much easier for users to read and |
| interact with notifications from your app. Expanded notifications enable |
| you to deliver Wear users an app-like experience even if you haven't built an |
| Android Wear app. |
| </p> |
| |
| <p class="note"> |
| <strong>Note:</strong> When developing for Wear 2.0, ensure that |
| you have the latest version of the Android Wear app on your phone. |
| </p> |
| |
| <h2 id="visual">Visual Updates</h2> |
| <p>Notifications receive important visual updates in Wear 2.0, with |
| <a href="http://www.google.com/design/spec-wear"> |
| material design</a> visual changes. |
| </p> |
| |
| <p><img src="{@docRoot}wear/preview/images/comparison_diagram.png" /> </p> |
| <p><b>Figure 1.</b> Comparison of the same notification in Android Wear 1.x and 2.0.</p> |
| |
| <p>Some of the visual updates include:</p> |
| <ul> |
| <li><strong>Updated touch targets of a notification</strong>: |
| If no <a href="{@docRoot}reference/android/app/Notification.html#contentIntent">{@code contentIntent}</a> |
| is set or if the notification is |
| <a href="{@docRoot}design/wear/structure.html#Bridged">bridged</a> |
| from a paired phone, then tapping the notification opens an <a href="{@docRoot}wear/preview/features/notifications.html#expanded">expanded notification</a>. |
| If the notification is generated locally by a Wear app and if a |
| <a href="{@docRoot}reference/android/app/Notification.html#contentIntent">{@code contentIntent}</a> |
| is set, tapping the notification fires the |
| <a href="{@docRoot}reference/android/app/Notification.html#contentIntent">{@code contentIntent}</a>. |
| </li> |
| |
| <li><strong>Dark background color</strong>: |
| If you have notifications that are bridged to wearables, you need to be careful |
| with regards to using color for the notifications. Since a bridged |
| notification needs to support both light (Wear 1.x) and dark (Wear 2.0) |
| backgrounds, it is unlikely that any colors will work well on both. |
| <a href="{@docRoot}reference/android/app/Notification.WearableExtender.html#setDisplayIntent(android.app.PendingIntent)">{@code DisplayIntent}</a> |
| notifications render with both light and dark backgrounds |
| as well, and need to be checked for the same reason. |
| We recommended that you don't set color for bridged notifications. |
| |
| When Wear apps post local notifications, you can work around this by checking |
| <a href="{@docRoot}training/basics/supporting-devices/platforms.html#version-codes">the API level of the device</a> they're running on and using an appropriate color |
| for Wear 1.x and a different color for Wear 2.0. |
| </li> |
| |
| <li><strong>Updated horizontal swipe gesture on a notification</strong>: |
| To dismiss a notification in Wear 2.0, the user swipes horizontally in either |
| direction. So if your notification instructs the user to swipe left or right, |
| you must update the text of your notification. |
| </li> |
| </ul> |
| <h2 id="expanded">Expanded Notifications</h2> |
| <p>Android Wear 2.0 introduces <i>expanded notifications</i>, which provide |
| substantial additional content and actions for each notification. |
| </p> |
| <p>When you <a href="{@docRoot}training/wearables/notifications/pages.html">specify additional content pages</a> |
| and actions for a notification, those are available to the user within the |
| expanded notification. Each expanded notification follows |
| <a href="http://www.google.com/design/spec-wear">Material Design for Android Wear</a>, |
| so the user gets an app-like experience. |
| </p> |
| |
| |
| <h3 id="expanded">Expanded notifications</h3> |
| <p>If the first action in the expanded notification has a |
| <a href=" {@docRoot}reference/android/support/v4/app/RemoteInput.html">{@code RemoteInput}</a> |
| (e.g., a Reply action), then the choices you set with <a href="http://developer.android.com/reference/android/support/v4/app/RemoteInput.Builder.html#setChoices(java.lang.CharSequence[])">{@code setChoices()}</a> |
| appear within the expanded notification below the first action. |
| </p> |
| |
| <p>The user can view the expanded notification by tapping on a notification when |
| either of the following is true: |
| </p> |
| <ul> |
| <li>The notification is generated by an app on the paired phone and |
| bridged to Wear. |
| </li> |
| <li>The notification does not have a |
| <a href="http://developer.android.com/reference/android/support/v4/app/NotificationCompat.Builder.html#setContentIntent(android.app.PendingIntent)">{@code contentIntent}</a>. |
| </li> |
| </ul> |
| <h3>Best practices for expanded notifications</h3> |
| <p>To decide when to use expanded notifications, follow these guidelines:</p> |
| <ul> |
| <li>All notifications bridged from the paired phone to the Wear device will |
| use expanded notifications. |
| </li> |
| <li>If a notification is generated by an app running locally on Wear 2.0, |
| you should <a href="{@docRoot}training/notify-user/build-notification.html#action"> |
| make the touch target of your notification </a> launch |
| <a href="{@docRoot}training/notify-user/build-notification.html#action"> an Activity</a> |
| within your app by calling <a href="{@docRoot}reference/android/support/v4/app/NotificationCompat.Builder.html#setContentIntent(android.app.PendingIntent)">{@code setContentIntent()}</a>. |
| We recommend that you do not use expanded notifications for notifications generated |
| by an app running locally on Wear 2.0. |
| </li> |
| </ul> |
| |
| <h3>Adding expanded notifications</h3> |
| <p> |
| Expanded Notifications allow you to include additional content and actions |
| for a notification. You choose the level of detail that your app's notifications |
| will provide; however be judicious with the amount of detail you include in a |
| notification. |
| </p> |
| <img src="{@docRoot}wear/preview/images/expanded_diagram.png" height="340" |
| style="float:left;margin:10px 20px 0 0" /> |
| <h4>Adding additional content</h4> |
| To show additional content in your expanded notification, see <a href="{@docRoot}training/wearables/notifications/pages.html">Adding Pages to a Notification</a>.</p> |
| <p>Additional content pages are stacked vertically in the expanded notification |
| and appear in the order they were added. |
| These additional content pages can optionally use a style such as <a href="{@docRoot}reference/android/support/v4/app/NotificationCompat.BigTextStyle.html">{@code BigTextStyle}</a> or <a href="{@docRoot}reference/android/support/v4/app/NotificationCompat.BigPictureStyle.html">{@code BigPictureStyle}</a>. |
| </p> |
| <h4>Primary action</h4> |
| The expanded notification will contain one primary action, which is the first |
| action in the notification unless a different action is specified using |
| <a href="{@docRoot}reference/android/support/v4/app/NotificationCompat.WearableExtender.html#setContentAction(int)">{@code setContentAction()}</a>. |
| </p> |
| <h4>Additional actions</h4> |
| <p> |
| To specify additional actions, use |
| <a href="{@docRoot}reference/android/support/v4/app/NotificationCompat.WearableExtender.html#addAction(android.support.v4.app.NotificationCompat.Action)">{@code addAction()}</a> |
| or <a href="{@docRoot}reference/android/support/v4/app/NotificationCompat.WearableExtender.html#addActions(java.util.List<android.support.v4.app.NotificationCompat.Action>)">{@code addActions()}</a>. |
| The action drawer of the expanded notification contains all available actions. |
| </p> |
| <h2 id="messaging">MessagingStyle</h2> |
| |
| <p>If you have a chat messaging app, your notifications should use |
| <a href="{@docRoot}preview/features/notification-updates.html#style">{@code Notification.MessagingStyle}</a>, |
| which is new in Android N. Wear 2.0 uses the chat messages included |
| in a <a href="{@docRoot}preview/features/notification-updates.html#style">{@code MessagingStyle}</a> notification |
| |
| (see <a href="{@docRoot}preview/features/notification-updates.html#style">{@code addMessage()}</a>) to provide |
| a rich chat app-like experience in the expanded notification. |
| </p> |
| |
| <p class="note">Note: <a href="{@docRoot}preview/features/notification-updates.html#style">{@code MessagingStyle}</a> |
| expanded notifications require that you have at least version 1.5.0.2861804 of the |
| <a href="https://play.google.com/store/apps/details?id=com.google.android.wearable.app">Android Wear app</a> |
| on your paired Android phone. That version will be available within the next |
| few weeks in the Play Store. |
| </p> |
| |
| <h3 id="smart-reply">Smart Reply</h3> |
| <img src="{@docRoot}wear/preview/images/messaging_style.png" height="420" |
| style="float:right;margin:10px 20px 0 0" /> |
| <p>Wear 2.0 also introduces <i>Smart Reply</i> |
| for <a href="{@docRoot}preview/features/notification-updates.html#style">{@code MessagingStyle}</a> notifications. |
| Smart Reply provides the user with contextually relevant, touchable choices in |
| the expanded notification and in {@code RemoteInput}. These augment the fixed |
| list of choices that the developer provides in |
| <a href="http://developer.android.com/reference/android/support/v4/app/RemoteInput.html">{@code RemoteInput}</a> |
| using the |
| <a href="{@docRoot}reference/android/support/v4/app/RemoteInput.Builder.html#setChoices(java.lang.CharSequence[])">{@code setChoices()}</a> method. |
| </p> |
| <p>By enabling Smart Reply for your MessagingStyle notifications, |
| you provide users with a fast (single tap), discreet (no speaking aloud), and |
| reliable way to respond to chat messages. |
| </p> |
| |
| <p>Responses generated by Smart Reply are shown in addition to those set using the |
| <a href="{@docRoot}reference/android/support/v4/app/RemoteInput.Builder.html#setChoices(java.lang.CharSequence[])">{@code setChoices()}</a> method. |
| </p> |
| <p>To enable Smart Reply for your notification action, you need to do the |
| following: |
| </p> |
| <ol> |
| <li>Use <a href="{@docRoot}preview/features/notification-updates.html#style">{@code Notification.MessagingStyle}</a>. |
| </li> |
| <li>Call the method {@code setAllowGeneratedReplies()} for the notification action. |
| For more information, see the downloadable |
| <a href="{@docRoot}preview/setup-sdk.html#docs-dl">API reference</a>. |
| </li> |
| <li>Ensure that the notification action has a |
| <a href="{@docRoot}reference/android/app/RemoteInput.html">{@code RemoteInput}</a> |
| (where the responses will reside). |
| </li> |
| </ol> |
| <p>The following example shows how to create a MessagingStyle notification with |
| Smart Reply responses.</p> |
| <pre> |
| // Create an intent for the reply action |
| Intent replyIntent = new Intent(this, ReplyActivity.class); |
| PendingIntent replyPendingIntent = |
| PendingIntent.getActivity(this, 0, replyIntent, |
| PendingIntent.FLAG_UPDATE_CURRENT); |
| |
| // Create the reply action and add the remote input |
| NotificationCompat.Action action = |
| new NotificationCompat.Action.Builder(R.drawable.ic_reply_icon, |
| getString(R.string.label), replyPendingIntent) |
| .addRemoteInput(remoteInput) |
| |
| // 1) allow generated replies |
| .setAllowGeneratedReplies(true) |
| .build(); |
| |
| Notification noti = new NotificationCompat.Builder() |
| .setContentTitle(messages.length + " new messages with " + sender.toString()) |
| .setContentText(subject) |
| .setSmallIcon(R.drawable.new_message) |
| .setLargeIcon(aBitmap) |
| // 2) set the style to MessagingStyle |
| .setStyle(new NotificationCompat.MessagingStyle(resources.getString(R.string.reply_name)) |
| .addMessage(messages[0].getText(), messages[0].getTime(), messages[0].getSender()) |
| .addMessage(messages[1].getText(), messages[1].getTime(), messages[1].getSender())) |
| |
| |
| // 3) add an action with RemoteInput |
| .extend(new WearableExtender().addAction(action)).build(); |
| </pre> |