1 page.title=Notification Changes in Android Wear 2.0 2 meta.tags="wear", "wear-preview", "notifications" 3 page.tags="wear" 4 page.image=/wear/preview/images/expanded_diagram.png 5 6 7 @jd:body 8 9 <div id="qv-wrapper"> 10 <div id="qv"> 11 <!-- table of contents --> 12 <h2>This document includes</h2> 13 <ol> 14 <li><a href="#visual">Visual Updates</a></li> 15 <li><a href="#expanded">Expanded Notifications</a></li> 16 <li><a href="#messaging">MessagingStyle</a></li> 17 </ol> 18 </div> 19 </div> 20 21 <p>Android Wear 2.0 updates the visual style and interaction paradigm of notifications 22 as well as introduces expanded notifications, which provide substantial additional 23 content and actions in an app-like experience. 24 </p> 25 26 <p>The visual and interaction changes make it much easier for users to read and 27 interact with notifications from your app. Expanded notifications enable 28 you to deliver Wear users an app-like experience even if you haven't built an 29 Android Wear app. 30 </p> 31 32 <p class="note"> 33 <strong>Note:</strong> When developing for Wear 2.0, ensure that 34 you have the latest version of the Android Wear app on your phone. 35 </p> 36 37 <h2 id="visual">Visual Updates</h2> 38 <p>Notifications receive important visual updates in Wear 2.0, with 39 <a href="http://www.google.com/design/spec-wear"> 40 material design</a> visual changes. 41 </p> 42 43 <p><img src="{@docRoot}wear/preview/images/comparison_diagram.png" /> </p> 44 <p><b>Figure 1.</b> Comparison of the same notification in Android Wear 1.x and 2.0.</p> 45 46 <p>Some of the visual updates include:</p> 47 <ul> 48 <li><strong>Updated touch targets of a notification</strong>: 49 If no <a href="{@docRoot}reference/android/app/Notification.html#contentIntent">{@code contentIntent}</a> 50 is set or if the notification is 51 <a href="{@docRoot}design/wear/structure.html#Bridged">bridged</a> 52 from a paired phone, then tapping the notification opens an <a href="{@docRoot}wear/preview/features/notifications.html#expanded">expanded notification</a>. 53 If the notification is generated locally by a Wear app and if a 54 <a href="{@docRoot}reference/android/app/Notification.html#contentIntent">{@code contentIntent}</a> 55 is set, tapping the notification fires the 56 <a href="{@docRoot}reference/android/app/Notification.html#contentIntent">{@code contentIntent}</a>. 57 </li> 58 59 <li><strong>Dark background color</strong>: 60 If you have notifications that are bridged to wearables, you need to be careful 61 with regards to using color for the notifications. Since a bridged 62 notification needs to support both light (Wear 1.x) and dark (Wear 2.0) 63 backgrounds, it is unlikely that any colors will work well on both. 64 <a href="{@docRoot}reference/android/app/Notification.WearableExtender.html#setDisplayIntent(android.app.PendingIntent)">{@code DisplayIntent}</a> 65 notifications render with both light and dark backgrounds 66 as well, and need to be checked for the same reason. 67 We recommended that you don't set color for bridged notifications. 68 69 When Wear apps post local notifications, you can work around this by checking 70 <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 71 for Wear 1.x and a different color for Wear 2.0. 72 </li> 73 74 <li><strong>Updated horizontal swipe gesture on a notification</strong>: 75 To dismiss a notification in Wear 2.0, the user swipes horizontally in either 76 direction. So if your notification instructs the user to swipe left or right, 77 you must update the text of your notification. 78 </li> 79 </ul> 80 <h2 id="expanded">Expanded Notifications</h2> 81 <p>Android Wear 2.0 introduces <i>expanded notifications</i>, which provide 82 substantial additional content and actions for each notification. 83 </p> 84 <p>When you <a href="{@docRoot}training/wearables/notifications/pages.html">specify additional content pages</a> 85 and actions for a notification, those are available to the user within the 86 expanded notification. Each expanded notification follows 87 <a href="http://www.google.com/design/spec-wear">Material Design for Android Wear</a>, 88 so the user gets an app-like experience. 89 </p> 90 91 92 <h3 id="expanded">Expanded notifications</h3> 93 <p>If the first action in the expanded notification has a 94 <a href=" {@docRoot}reference/android/support/v4/app/RemoteInput.html">{@code RemoteInput}</a> 95 (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> 96 appear within the expanded notification below the first action. 97 </p> 98 99 <p>The user can view the expanded notification by tapping on a notification when 100 either of the following is true: 101 </p> 102 <ul> 103 <li>The notification is generated by an app on the paired phone and 104 bridged to Wear. 105 </li> 106 <li>The notification does not have a 107 <a href="http://developer.android.com/reference/android/support/v4/app/NotificationCompat.Builder.html#setContentIntent(android.app.PendingIntent)">{@code contentIntent}</a>. 108 </li> 109 </ul> 110 <h3>Best practices for expanded notifications</h3> 111 <p>To decide when to use expanded notifications, follow these guidelines:</p> 112 <ul> 113 <li>All notifications bridged from the paired phone to the Wear device will 114 use expanded notifications. 115 </li> 116 <li>If a notification is generated by an app running locally on Wear 2.0, 117 you should <a href="{@docRoot}training/notify-user/build-notification.html#action"> 118 make the touch target of your notification </a> launch 119 <a href="{@docRoot}training/notify-user/build-notification.html#action"> an Activity</a> 120 within your app by calling <a href="{@docRoot}reference/android/support/v4/app/NotificationCompat.Builder.html#setContentIntent(android.app.PendingIntent)">{@code setContentIntent()}</a>. 121 We recommend that you do not use expanded notifications for notifications generated 122 by an app running locally on Wear 2.0. 123 </li> 124 </ul> 125 126 <h3>Adding expanded notifications</h3> 127 <p> 128 Expanded Notifications allow you to include additional content and actions 129 for a notification. You choose the level of detail that your app's notifications 130 will provide; however be judicious with the amount of detail you include in a 131 notification. 132 </p> 133 <img src="{@docRoot}wear/preview/images/expanded_diagram.png" height="340" 134 style="float:left;margin:10px 20px 0 0" /> 135 <h4>Adding additional content</h4> 136 To show additional content in your expanded notification, see <a href="{@docRoot}training/wearables/notifications/pages.html">Adding Pages to a Notification</a>.</p> 137 <p>Additional content pages are stacked vertically in the expanded notification 138 and appear in the order they were added. 139 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>. 140 </p> 141 <h4>Primary action</h4> 142 The expanded notification will contain one primary action, which is the first 143 action in the notification unless a different action is specified using 144 <a href="{@docRoot}reference/android/support/v4/app/NotificationCompat.WearableExtender.html#setContentAction(int)">{@code setContentAction()}</a>. 145 </p> 146 <h4>Additional actions</h4> 147 <p> 148 To specify additional actions, use 149 <a href="{@docRoot}reference/android/support/v4/app/NotificationCompat.WearableExtender.html#addAction(android.support.v4.app.NotificationCompat.Action)">{@code addAction()}</a> 150 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>. 151 The action drawer of the expanded notification contains all available actions. 152 </p> 153 <h2 id="messaging">MessagingStyle</h2> 154 155 <p>If you have a chat messaging app, your notifications should use 156 <a href="{@docRoot}preview/features/notification-updates.html#style">{@code Notification.MessagingStyle}</a>, 157 which is new in Android N. Wear 2.0 uses the chat messages included 158 in a <a href="{@docRoot}preview/features/notification-updates.html#style">{@code MessagingStyle}</a> notification 159 160 (see <a href="{@docRoot}preview/features/notification-updates.html#style">{@code addMessage()}</a>) to provide 161 a rich chat app-like experience in the expanded notification. 162 </p> 163 164 <p class="note">Note: <a href="{@docRoot}preview/features/notification-updates.html#style">{@code MessagingStyle}</a> 165 expanded notifications require that you have at least version 1.5.0.2861804 of the 166 <a href="https://play.google.com/store/apps/details?id=com.google.android.wearable.app">Android Wear app</a> 167 on your paired Android phone. That version will be available within the next 168 few weeks in the Play Store. 169 </p> 170 171 <h3 id="smart-reply">Smart Reply</h3> 172 <img src="{@docRoot}wear/preview/images/messaging_style.png" height="420" 173 style="float:right;margin:10px 20px 0 0" /> 174 <p>Wear 2.0 also introduces <i>Smart Reply</i> 175 for <a href="{@docRoot}preview/features/notification-updates.html#style">{@code MessagingStyle}</a> notifications. 176 Smart Reply provides the user with contextually relevant, touchable choices in 177 the expanded notification and in {@code RemoteInput}. These augment the fixed 178 list of choices that the developer provides in 179 <a href="http://developer.android.com/reference/android/support/v4/app/RemoteInput.html">{@code RemoteInput}</a> 180 using the 181 <a href="{@docRoot}reference/android/support/v4/app/RemoteInput.Builder.html#setChoices(java.lang.CharSequence[])">{@code setChoices()}</a> method. 182 </p> 183 <p>By enabling Smart Reply for your MessagingStyle notifications, 184 you provide users with a fast (single tap), discreet (no speaking aloud), and 185 reliable way to respond to chat messages. 186 </p> 187 188 <p>Responses generated by Smart Reply are shown in addition to those set using the 189 <a href="{@docRoot}reference/android/support/v4/app/RemoteInput.Builder.html#setChoices(java.lang.CharSequence[])">{@code setChoices()}</a> method. 190 </p> 191 <p>To enable Smart Reply for your notification action, you need to do the 192 following: 193 </p> 194 <ol> 195 <li>Use <a href="{@docRoot}preview/features/notification-updates.html#style">{@code Notification.MessagingStyle}</a>. 196 </li> 197 <li>Call the method {@code setAllowGeneratedReplies()} for the notification action. 198 For more information, see the downloadable 199 <a href="{@docRoot}preview/setup-sdk.html#docs-dl">API reference</a>. 200 </li> 201 <li>Ensure that the notification action has a 202 <a href="{@docRoot}reference/android/app/RemoteInput.html">{@code RemoteInput}</a> 203 (where the responses will reside). 204 </li> 205 </ol> 206 <p>The following example shows how to create a MessagingStyle notification with 207 Smart Reply responses.</p> 208 <pre> 209 // Create an intent for the reply action 210 Intent replyIntent = new Intent(this, ReplyActivity.class); 211 PendingIntent replyPendingIntent = 212 PendingIntent.getActivity(this, 0, replyIntent, 213 PendingIntent.FLAG_UPDATE_CURRENT); 214 215 // Create the reply action and add the remote input 216 NotificationCompat.Action action = 217 new NotificationCompat.Action.Builder(R.drawable.ic_reply_icon, 218 getString(R.string.label), replyPendingIntent) 219 .addRemoteInput(remoteInput) 220 221 // 1) allow generated replies 222 .setAllowGeneratedReplies(true) 223 .build(); 224 225 Notification noti = new NotificationCompat.Builder() 226 .setContentTitle(messages.length + " new messages with " + sender.toString()) 227 .setContentText(subject) 228 .setSmallIcon(R.drawable.new_message) 229 .setLargeIcon(aBitmap) 230 // 2) set the style to MessagingStyle 231 .setStyle(new NotificationCompat.MessagingStyle(resources.getString(R.string.reply_name)) 232 .addMessage(messages[0].getText(), messages[0].getTime(), messages[0].getSender()) 233 .addMessage(messages[1].getText(), messages[1].getTime(), messages[1].getSender())) 234 235 236 // 3) add an action with RemoteInput 237 .extend(new WearableExtender().addAction(action)).build(); 238 </pre> 239
