| 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="#inline">Inline Action</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="inline">Inline Action</h3> |
| |
| <img src="{@docRoot}wear/preview/images/inline_action.png" style="float:right;margin:10px 20px 0 0"> |
| <p> |
| Wear 2.0 now supports inline action, which allows users to take actions on a |
| notification from within the notification stream card. On Wear, the inline |
| action appears as an additional button displayed at the bottom of the notification. |
| </p> |
| <p> |
| Inline actions are optional but recommended for cases in which users are likely |
| to take an action on a notification after viewing the contents in the |
| notification stream card (without going to the |
| <a href= "{@docRoot}wear/preview/features/notifications.html#expanded">expanded notification</a>). |
| Examples of good use cases for inline action on a notification include: replying to a |
| text message, stopping a fitness activity, and archiving an email message. |
| </p> |
| |
| <p> |
| A notification can provide only one inline action. |
| To display the inline action as an additional button in the notification, set |
| the <a href="https://developer.android.com/reference/android/support/v4/app/NotificationCompat.Action.WearableExtender.html#setHintDisplayActionInline(boolean)">{@code setHintDisplayActionInline()}</a> |
| method to true. When a user taps the inline action, the system invokes |
| the intent that you specified in the notification action. |
| </p> |
| |
| <h3>Adding an inline action</h3> |
| <p> |
| The following code example shows how to create a notification with an inline |
| reply action: |
| </p> |
| |
| <ol> |
| <li>Create an instance of |
| <a href="https://developer.android.com/reference/android/support/v4/app/RemoteInput.Builder.html">{@code RemoteInput.Builder}</a></code> |
| that you can add to your notification action. This class's constructor accepts a |
| string that the system uses as the key for the text input. Later, your app |
| uses that key to retrieve the text of the input. |
| |
| <pre> |
| String[] choices = context.getResources().getStringArray(R.array.notification_reply_choices); |
| choices = WearUtil.addEmojisToCannedResponse(choices); |
| RemoteInput remoteInput = new RemoteInput.Builder(Intent.EXTRA_TEXT) |
| .setLabel(context.getString(R.string.notification_prompt_reply)) |
| .setChoices(choices) |
| .build(); |
| </pre> |
| |
| </li> |
| |
| <li> |
| Use the <a href="https://developer.android.com/reference/android/support/v4/app/NotificationCompat.Action.Builder.html#addRemoteInput(android.support.v4.app.RemoteInput)">{@code addRemoteInput()}</a> |
| method to attach the <ahref="https://developer.android.com/reference/android/support/v4/app/RemoteInput.html">{@code RemoteInput}</a> |
| object to an action. |
| |
| <pre> |
| NotificationCompat.Action.Builder actionBuilder = new NotificationCompat.Action.Builder( |
| R.drawable.ic_full_reply, R.string.notification_reply, replyPendingIntent); |
| actionBuilder.addRemoteInput(remoteInput); |
| actionBuilder.setAllowGeneratedReplies(true); |
| </pre> |
| </li> |
| |
| <li> |
| Add a hint to display the reply action inline, and use the |
| <a href="https://developer.android.com/reference/android/support/v4/app/NotificationCompat.WearableExtender.html#addAction(android.support.v4.app.NotificationCompat.Action)">{@code addAction}</a> |
| method to add this action to the notification. |
| |
| <pre> |
| // Android Wear 2.0 requires a hint to display the reply action inline. |
| Action.WearableExtender actionExtender = |
| new Action.WearableExtender() |
| .setHintLaunchesActivity(true) |
| .setHintDisplayActionInline(true); |
| wearableExtender.addAction(actionBuilder.extend(actionExtender).build()); |
| </pre> |
| </li> |
| </ol> |
| |
| <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="https://developer.android.com/reference/android/support/v4/app/NotificationCompat.MessagingStyle.html">{@code NotificationCompat.MessagingStyle}</a>, |
| which is new in Android 7.0. Wear 2.0 uses the chat messages included in a |
| {@code MessagingStyle} notification |
| (see <a href="https://developer.android.com/reference/android/support/v4/app/NotificationCompat.MessagingStyle.html#addMessage(android.support.v4.app.NotificationCompat.MessagingStyle.Message)">{@code addMessage()}</a>) |
| to provide a rich chat app-like experience in the expanded notification. |
| </p> |
| |
| <p class="note">Note: <a href="https://developer.android.com/reference/android/support/v4/app/NotificationCompat.MessagingStyle.html">{@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. |
| </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="https://developer.android.com/reference/android/support/v4/app/NotificationCompat.MessagingStyle.html">{@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> Smart Reply provides users with a fast (single tap), discreet (no speaking aloud), |
| private (messages received by a user never leave the watch), and reliable (no |
| internet connection needed) way to respond to chat messages. |
| </p> |
| |
| <p> |
| Smart Reply responses are generated by an entirely on-watch machine learning |
| model using the context provided by the MessagingStyle notification. No user |
| notification data is sent to Google servers to generate Smart Reply responses. |
| </p> |
| |
| <p>To enable Smart Reply for your notification action, you need to do the |
| following: |
| </p> |
| <ol> |
| <li>Use <a href="https://developer.android.com/reference/android/support/v4/app/NotificationCompat.MessagingStyle.html">{@code NotificationCompat.MessagingStyle}</a>. |
| </li> |
| <li>Call the method <a href="https://developer.android.com/reference/android/support/v4/app/NotificationCompat.Action.Builder.html#setAllowGeneratedReplies(boolean)">{@code setAllowGeneratedReplies(true)}</a> |
| for the notification action. |
| </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> |
| |
| <h3 id="images">Adding images to a MessagingStyle notification</h3> |
| <p> |
| You can add images to a notification message by setting the appropriate MIME |
| type and placing the URI to the image in {@code NotificationCompat.MessagingStyle.Message.} |
| <a href="https://developer.android.com/reference/android/support/v4/app/NotificationCompat.MessagingStyle.Message.html#setData(java.lang.String, android.net.Uri)">{@code setData()}</a> method. |
| </p> |
| <p> |
| Here is the code snippet to set data of type image in a notification: |
| </p> |
| <pre> |
| NotificationCompat.MessagingStyle.Message message = new Message("sticker", 1, "Jeff") |
| .setData("image/png", stickerUri); |
| |
| NotificationCompat notification = new NotificationCompat.Builder() |
| .setStyle(new NotificationComapt.MessagingStyle("Me") |
| .addMessage(message) |
| .build()); |
| |
| </pre> |
| <p> |
| In the above code snippet the variable <code>stickerUri </code>is a Uri that |
| points to a publicly-accessible location, as described <a |
| href="https://developer.android.com/reference/android/support/v4/app/NotificationCompat.MessagingStyle.Message.html">here |
| </a>. |
| </p> |