Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 1 | page.title=Design for Notifications |
| 2 | page.tags="notifications","design","L" |
| 3 | @jd:body |
| 4 | |
Robert Ly | 50b55d6 | 2014-06-29 13:00:11 -0700 | [diff] [blame] | 5 | <style> |
| 6 | .col-5, .col-6, .col-7 { |
| 7 | margin-left:0px; |
| 8 | } |
| 9 | </style> |
| 10 | |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 11 | <p>The notification system allows users to keep informed about relevant and timely |
| 12 | events in your app, such as new chat messages from a friend or a calendar event. |
| 13 | Think of notifications as a news channel that alerts the user to important events as |
| 14 | they happen or a log that chronicles events while the user is not paying attention - |
| 15 | and one that is synced as appropriate across all their Android devices.</p> |
| 16 | |
| 17 | <h4 id="New"><strong>New in L</strong></h4> |
| 18 | |
| 19 | <p>In L, notifications receive an important structural visual and functional update:</p> |
| 20 | |
| 21 | <ul> |
| 22 | <li> Visual changes to notifications as part of material design</li> |
| 23 | <li> Notifications are now available on the device lockscreen, yet sensitive content can still |
| 24 | be hidden behind it</li> |
| 25 | <li> A new presentation format called Heads-up for receiving high priority notifications while |
| 26 | using the device</li> |
| 27 | <li> Cloud-synced notifications - act on a notification on your Android tablet and it is also |
| 28 | dismissed on your phone.</li> |
| 29 | <li> And starting now (in Android 4.4W, API Level 20, the platform release for Android Wear), |
| 30 | your notifications will bridge to Android Wear devices. You can extend the functionality of |
| 31 | notifications on Wear in two different ways. First, you can add speech input and canned responses |
| 32 | to Actions on Wear, allowing users to complete tasks from their wrists. Second, you can write |
| 33 | Wear apps that hook into your notifications to go even further in terms of creating interactive |
| 34 | experiences for users.</li> |
| 35 | </ul> |
| 36 | |
| 37 | <h2 id="Anatomy">Anatomy of a notification</h2> |
| 38 | |
Robert Ly | 939765f | 2014-06-27 09:25:42 -0700 | [diff] [blame] | 39 | <p>This section goes over basic parts of a notification and how they can |
| 40 | appear on different types of devices.</p> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 41 | |
Robert Ly | 939765f | 2014-06-27 09:25:42 -0700 | [diff] [blame] | 42 | <h3 id="BaseLayout">Base Layout</h3> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 43 | |
| 44 | <p>At a minimum, all notifications consist of a base layout, including:</p> |
| 45 | |
| 46 | <ul> |
Robert Ly | 50b55d6 | 2014-06-29 13:00:11 -0700 | [diff] [blame] | 47 | <li> The notification's <strong>icon</strong>, symbolizing the originating app, and also |
| 48 | potentially the kind of notification if the app has several substantially different sorts of |
| 49 | notifications it can post</li> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 50 | <li> A notification <strong>title</strong> and additional <strong>text</strong></li> |
| 51 | <li> A <strong>timestamp</strong></li> |
| 52 | </ul> |
Robert Ly | 939765f | 2014-06-27 09:25:42 -0700 | [diff] [blame] | 53 | |
Robert Ly | 50b55d6 | 2014-06-29 13:00:11 -0700 | [diff] [blame] | 54 | <p>Notifications created with <code>Notification.Builder</code> for versions of Android earlier |
| 55 | than L will look and work the same in L, with only minor stylistic changes that the system handles |
| 56 | for you.</p> |
Robert Ly | 939765f | 2014-06-27 09:25:42 -0700 | [diff] [blame] | 57 | |
Robert Ly | 50b55d6 | 2014-06-29 13:00:11 -0700 | [diff] [blame] | 58 | |
Robert Ly | e1e35d1 | 2014-06-30 12:48:22 -0700 | [diff] [blame] | 59 | <img style="margin:20px 0 0 0" src="{@docRoot}preview/images/notifications/basic_combo.png" |
Robert Ly | 50b55d6 | 2014-06-29 13:00:11 -0700 | [diff] [blame] | 60 | alt="" width="700px" /> |
| 61 | |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 62 | |
Robert Ly | e1e35d1 | 2014-06-30 12:48:22 -0700 | [diff] [blame] | 63 | <div style="clear:both;margin-top:20px"> |
Robert Ly | 939765f | 2014-06-27 09:25:42 -0700 | [diff] [blame] | 64 | <p class="img-caption"> |
| 65 | Base layout of a handheld notification and the same notification on Wear, |
| 66 | with a user photo and a notification icon |
| 67 | </p> |
| 68 | </div> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 69 | </div> |
| 70 | |
Robert Ly | 939765f | 2014-06-27 09:25:42 -0700 | [diff] [blame] | 71 | <h3 id="ExpandedLayouts">Expanded layouts</h3> |
| 72 | |
| 73 | |
Robert Ly | 50b55d6 | 2014-06-29 13:00:11 -0700 | [diff] [blame] | 74 | <p>You have the option to provide more details on notifications. You can use this to show the first |
| 75 | few lines of a message or show a larger image preview. This provides the user with additional |
| 76 | context, and - in some cases - may allow the user to read a message in its entirety. The user can |
| 77 | pinch-zoom or perform a single-finger glide in order to toggle between compact and expanded layouts. |
| 78 | For single event notifications, Android provides three expanded layout templates (text, inbox, and |
| 79 | image) for you to re-use in your application. The following images show you how they look on |
| 80 | handhelds and wearables.</p> |
Robert Ly | 939765f | 2014-06-27 09:25:42 -0700 | [diff] [blame] | 81 | |
Robert Ly | bdc5428 | 2014-06-30 18:18:22 -0700 | [diff] [blame] | 82 | <img style="margin-top:30px" src="{@docRoot}preview/images/notifications/expandedtext_combo.png" |
Robert Ly | 50b55d6 | 2014-06-29 13:00:11 -0700 | [diff] [blame] | 83 | alt="" width="700px" height;="284px" /> |
Robert Ly | bdc5428 | 2014-06-30 18:18:22 -0700 | [diff] [blame] | 84 | <img style="margin-top:30px" src="{@docRoot}preview/images/notifications/stack_combo.png" |
Robert Ly | 50b55d6 | 2014-06-29 13:00:11 -0700 | [diff] [blame] | 85 | alt="" width="700px" height;="284px" /> |
| 86 | <img style="margin-top:30px" src="{@docRoot}preview/images/notifications/ExpandedImage.png" |
| 87 | alt="" width="311px" height;="450px" /> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 88 | |
Robert Ly | 50b55d6 | 2014-06-29 13:00:11 -0700 | [diff] [blame] | 89 | <h3 id="actions" style="clear:both; margin-top:40px">Actions</h3> |
Robert Ly | 939765f | 2014-06-27 09:25:42 -0700 | [diff] [blame] | 90 | |
Robert Ly | 50b55d6 | 2014-06-29 13:00:11 -0700 | [diff] [blame] | 91 | <p>Android has supported optional actions that are displayed at the bottom of the notification, as |
| 92 | far back as Jelly Bean. With actions, users can handle the most common tasks for a particular |
| 93 | notification from within the notification shade without having to open the originating application. |
| 94 | This speeds up interaction and, in conjunction with "swipe-to-dismiss", helps users to streamline |
| 95 | their notification triaging experience.</p> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 96 | |
Robert Ly | 939765f | 2014-06-27 09:25:42 -0700 | [diff] [blame] | 97 | |
Robert Ly | 50b55d6 | 2014-06-29 13:00:11 -0700 | [diff] [blame] | 98 | <img src="{@docRoot}preview/images/notifications/action_combo.png" |
| 99 | alt="" width="700px" /> |
Robert Ly | 939765f | 2014-06-27 09:25:42 -0700 | [diff] [blame] | 100 | |
| 101 | |
Robert Ly | 50b55d6 | 2014-06-29 13:00:11 -0700 | [diff] [blame] | 102 | |
| 103 | <p style="clear:both">Be judicious with how many actions you include with a notification. The more |
| 104 | actions you include, the more cognitive complexity you create. Limit yourself to the fewest number |
| 105 | of actions possible by only including the most imminently important and meaningful ones.</p> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 106 | |
| 107 | <p>Good candidates for actions on notifications are actions that:</p> |
| 108 | |
| 109 | <ul> |
| 110 | <li> Are essential, frequent and typical for the content type you're displaying |
| 111 | <li> Allow the user to accomplish tasks quickly |
| 112 | </ul> |
| 113 | |
| 114 | <p>Avoid actions that are:</p> |
| 115 | |
| 116 | <ul> |
| 117 | <li> Ambiguous |
| 118 | <li> Duplicative of the default action of the notification (such as "Read" or "Open") |
| 119 | </ul> |
| 120 | |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 121 | |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 122 | |
Robert Ly | 50b55d6 | 2014-06-29 13:00:11 -0700 | [diff] [blame] | 123 | <p>You can specify a maximum of three actions, each consisting of an action icon and an action name. |
| 124 | Adding actions to a simple base layout will make the notification expandable, even if the |
| 125 | notification doesn't have an expanded layout. Since actions are only shown for expanded |
| 126 | notifications and are otherwise hidden, you must make sure that any action a user can invoke from |
| 127 | a notification is available from within the associated application as well.</p> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 128 | |
Robert Ly | 939765f | 2014-06-27 09:25:42 -0700 | [diff] [blame] | 129 | <h2 id="notifications_on_android_wear">Notifications on Android Wear</h2> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 130 | |
Robert Ly | 50b55d6 | 2014-06-29 13:00:11 -0700 | [diff] [blame] | 131 | <p>Additionally, notifications and their actions are bridged over to Wear devices by default. |
| 132 | Developers have control to control which notifications from bridging from the phone to the watch |
| 133 | and vice versa. And developers can control which actions bridge as well. If your app includes |
| 134 | actions that can't be accomplished with a single tap, either hide these actions on your Wear |
| 135 | notification or consider hooking them up to a Wear app to allow the user to finish the action on |
| 136 | their watch.</p> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 137 | |
Robert Ly | 939765f | 2014-06-27 09:25:42 -0700 | [diff] [blame] | 138 | <h4>Bridging notifications</h4> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 139 | |
| 140 | <p><strong>Notifications that should be bridged</strong></p> |
| 141 | |
| 142 | <ul> |
Robert Ly | 939765f | 2014-06-27 09:25:42 -0700 | [diff] [blame] | 143 | <li> New instant messages</li> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 144 | </ul> |
| 145 | |
Robert Ly | e1e35d1 | 2014-06-30 12:48:22 -0700 | [diff] [blame] | 146 | <img src="{@docRoot}preview/images/notifications/WearBasic.png" width="156px" height="156px" |
| 147 | alt="" /> |
| 148 | |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 149 | <p><strong>Don't bridge</strong></p> |
| 150 | |
| 151 | <ul> |
Robert Ly | 939765f | 2014-06-27 09:25:42 -0700 | [diff] [blame] | 152 | <li> If a podcasting app has new episodes available for download, |
| 153 | keep this notification on the phone.</li> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 154 | </ul> |
Robert Ly | 939765f | 2014-06-27 09:25:42 -0700 | [diff] [blame] | 155 | |
| 156 | |
Robert Ly | 50b55d6 | 2014-06-29 13:00:11 -0700 | [diff] [blame] | 157 | |
| 158 | <h4 style="clear:both">Bridging actions</h4></p> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 159 | |
| 160 | <p><strong>Actions to bridge</strong></p> |
| 161 | |
| 162 | <ul> |
Robert Ly | 939765f | 2014-06-27 09:25:42 -0700 | [diff] [blame] | 163 | <li> Single tap actions such as +1, Like, Heart</li> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 164 | </ul> |
| 165 | |
| 166 | <p><strong>Actions not to bridge</strong></p> |
| 167 | |
| 168 | <ul> |
Robert Ly | 939765f | 2014-06-27 09:25:42 -0700 | [diff] [blame] | 169 | <li> Actions that map to features that aren't possible on the watch</li> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 170 | </ul> |
| 171 | |
Robert Ly | e1e35d1 | 2014-06-30 12:48:22 -0700 | [diff] [blame] | 172 | |
Robert Ly | 50b55d6 | 2014-06-29 13:00:11 -0700 | [diff] [blame] | 173 | |
Robert Ly | 939765f | 2014-06-27 09:25:42 -0700 | [diff] [blame] | 174 | <p><b>Unique actions to define for Wear</b></p> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 175 | |
| 176 | <ul> |
Robert Ly | 939765f | 2014-06-27 09:25:42 -0700 | [diff] [blame] | 177 | <li> Quick lists of canned responses such as "Be right back"</li> |
| 178 | <li> Open on phone</li> |
| 179 | <li> A "Comment" or "Reply" action that brings up the speech input screen</li> |
| 180 | <li> Actions that can launch Wear-specific apps</li> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 181 | </ul> |
Robert Ly | e1e35d1 | 2014-06-30 12:48:22 -0700 | [diff] [blame] | 182 | |
| 183 | <img src="{@docRoot}preview/images/notifications/ReplyAction.png" width="156px" height="156px" |
| 184 | alt="" /> |
| 185 | |
Ricardo Cervera | de13827 | 2014-07-14 13:37:44 -0700 | [diff] [blame] | 186 | |
Robert Ly | 939765f | 2014-06-27 09:25:42 -0700 | [diff] [blame] | 187 | </div> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 188 | |
Robert Ly | 50b55d6 | 2014-06-29 13:00:11 -0700 | [diff] [blame] | 189 | |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 190 | |
Robert Ly | 939765f | 2014-06-27 09:25:42 -0700 | [diff] [blame] | 191 | <h2 style="clear:left">Heads-up Notification</h2> |
Robert Ly | 50b55d6 | 2014-06-29 13:00:11 -0700 | [diff] [blame] | 192 | <div class="figure" style="width:311px"> |
Robert Ly | 9e12140 | 2014-06-27 10:27:40 -0700 | [diff] [blame] | 193 | <img src="{@docRoot}preview/images/notifications/Headsup.png" |
Robert Ly | 50b55d6 | 2014-06-29 13:00:11 -0700 | [diff] [blame] | 194 | alt="" width="311px" /> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 195 | <p class="img-caption"> |
Robert Ly | 50b55d6 | 2014-06-29 13:00:11 -0700 | [diff] [blame] | 196 | Example of a Heads-up notification (incoming phone call, high priority) coming in on top of an |
| 197 | immersive app |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 198 | </p> |
| 199 | </div> |
| 200 | |
Robert Ly | 50b55d6 | 2014-06-29 13:00:11 -0700 | [diff] [blame] | 201 | <p>When notifications with priority set to High (see right) arrives, it is presented to users for a |
| 202 | short period of time on the device with an expanded layout with its actions exposed.</p> |
| 203 | <p> After this period of time, it retreats back to the Notification shade. If a notification is |
| 204 | flagged as High or Max or a full-screen takeover, it gets a HUN in L.</p> |
Robert Ly | 939765f | 2014-06-27 09:25:42 -0700 | [diff] [blame] | 205 | |
| 206 | <p><b>Good examples of Heads-up notifications</b></p> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 207 | |
| 208 | <ul> |
Robert Ly | 939765f | 2014-06-27 09:25:42 -0700 | [diff] [blame] | 209 | <li> Incoming phone call when using device</li> |
| 210 | <li> Alarm when using device</li> |
| 211 | <li> New SMS message</li> |
| 212 | <li> Low battery</li> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 213 | </ul> |
| 214 | |
Robert Ly | 939765f | 2014-06-27 09:25:42 -0700 | [diff] [blame] | 215 | <h2 style="clear:both" id="guidelines">Guidelines</h2> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 216 | |
| 217 | |
Robert Ly | 939765f | 2014-06-27 09:25:42 -0700 | [diff] [blame] | 218 | <h3 id="MakeItPersonal">Make it personal</h3> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 219 | |
Robert Ly | 50b55d6 | 2014-06-29 13:00:11 -0700 | [diff] [blame] | 220 | <p>For notifications of items sent by another person (such as a message or status update), include |
| 221 | that person's image using setLargeIcon. Also attach information about the person to the |
| 222 | notification's metadata (see EXTRA_PEOPLE).</p> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 223 | |
Robert Ly | 50b55d6 | 2014-06-29 13:00:11 -0700 | [diff] [blame] | 224 | <p>Your notification's main icon will still be shown, so the user can associate it with the icon |
| 225 | visible in the status bar.</p> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 226 | |
Robert Ly | e1e35d1 | 2014-06-30 12:48:22 -0700 | [diff] [blame] | 227 | |
| 228 | <img src="{@docRoot}preview/images/notifications/Triggered.png" |
| 229 | alt="" width="311px"/> |
| 230 | <p style="margin-top:10px" class="img-caption"> |
| 231 | Notification that shows the person who triggered it and the content they are sending you |
| 232 | </p> |
| 233 | |
| 234 | |
Robert Ly | 939765f | 2014-06-27 09:25:42 -0700 | [diff] [blame] | 235 | <h3 id="navigate_to_the_right_place">Navigate to the right place</h3> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 236 | |
Robert Ly | 50b55d6 | 2014-06-29 13:00:11 -0700 | [diff] [blame] | 237 | <p>When the user touches the body of a notification (outside of the action buttons), open your app |
| 238 | to the place where the user can view and act upon the data referenced in the notification. In most |
| 239 | cases this will be the detail view of a single data item such as a message, but it might also be a |
| 240 | summary view if the notification is stacked (see <em>Stacked notifications</em> below) and |
| 241 | references multiple items. If in any of those cases the user is taken to a hierarchy level below |
| 242 | your app's top-level, insert navigation into your app's back stack to allow them to navigate to |
| 243 | your app's top level using the system back button. For more information, see the chapter on |
| 244 | <em>System-to-app navigation</em> in the <a href="/design/patterns/navigation.html">Navigation</a> |
| 245 | design pattern.</p> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 246 | |
Robert Ly | 50b55d6 | 2014-06-29 13:00:11 -0700 | [diff] [blame] | 247 | <h3 id="correctly_set_and_manage_notification_priority">Correctly set and manage notification |
| 248 | priority</h3> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 249 | |
Robert Ly | 50b55d6 | 2014-06-29 13:00:11 -0700 | [diff] [blame] | 250 | <p>Starting with Jelly Bean, Android supported a priority flag for notifications. It allows you to |
| 251 | influence where your notification will appear in comparison to other notifications and help to make |
| 252 | sure that users always see their most important notifications first. You can choose from the |
| 253 | following priority levels when posting a notification:</p> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 254 | <table> |
| 255 | <tr> |
| 256 | <td class="tab0"> |
| 257 | <p><strong>Priority</strong></p> |
| 258 | </td> |
| 259 | <td class="tab0"> |
| 260 | <p><strong>Use</strong></p> |
| 261 | </td> |
| 262 | </tr> |
| 263 | <tr> |
| 264 | <td class="tab1"> |
Robert Ly | 939765f | 2014-06-27 09:25:42 -0700 | [diff] [blame] | 265 | <p><code>MAX</code></p> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 266 | </td> |
| 267 | <td class="tab1"> |
Robert Ly | 50b55d6 | 2014-06-29 13:00:11 -0700 | [diff] [blame] | 268 | <p>Use for critical and urgent notifications that alert the user to a condition that is |
| 269 | time-critical or needs to be resolved before they can continue with a particular task.</p> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 270 | </td> |
| 271 | </tr> |
| 272 | <tr> |
| 273 | <td class="tab1"> |
Robert Ly | 939765f | 2014-06-27 09:25:42 -0700 | [diff] [blame] | 274 | <p><code>HIGH</code></p> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 275 | </td> |
| 276 | <td class="tab1"> |
Robert Ly | 50b55d6 | 2014-06-29 13:00:11 -0700 | [diff] [blame] | 277 | <p>Use high priority notifications primarily for important communication, such as message or chat |
| 278 | events with content that is particularly interesting for the user. High priority notifications will get the Heads-Up Notification display starting in L.</p> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 279 | </td> |
| 280 | </tr> |
| 281 | <tr> |
| 282 | <td class="tab1"> |
Robert Ly | 939765f | 2014-06-27 09:25:42 -0700 | [diff] [blame] | 283 | <p><code>DEFAULT</code></p> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 284 | </td> |
| 285 | <td class="tab1"> |
Robert Ly | 50b55d6 | 2014-06-29 13:00:11 -0700 | [diff] [blame] | 286 | <p>The default priority. Keep all notifications that don't fall into any of the other categories at |
| 287 | this priority level.</p> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 288 | </td> |
| 289 | </tr> |
| 290 | <tr> |
| 291 | <td class="tab1"> |
Robert Ly | 939765f | 2014-06-27 09:25:42 -0700 | [diff] [blame] | 292 | <p><code>LOW</code></p> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 293 | </td> |
| 294 | <td class="tab1"> |
Robert Ly | 50b55d6 | 2014-06-29 13:00:11 -0700 | [diff] [blame] | 295 | <p>Use for notifications that you still want the user to be informed about, but that rate low in |
| 296 | urgency. LOW notifications will tend to show up at the bottom of the list, which makes them a good |
| 297 | choice for things like pubic/undirected social updates: the user has asked to be notified about |
| 298 | them, but they should never take precedence over urgent or direct communication.</p> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 299 | </td> |
| 300 | </tr> |
| 301 | <tr> |
| 302 | <td class="tab1"> |
Robert Ly | 939765f | 2014-06-27 09:25:42 -0700 | [diff] [blame] | 303 | <p><code>MIN</code></p> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 304 | </td> |
| 305 | <td class="tab1"> |
Robert Ly | 50b55d6 | 2014-06-29 13:00:11 -0700 | [diff] [blame] | 306 | <p>Contextual/background information (e.g. weather information, contextual location information). |
| 307 | Minimum priority notifications will not show in the status bar. The user will only discover them |
| 308 | when they expand the notification shade.</p> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 309 | </td> |
| 310 | </tr> |
| 311 | </table> |
| 312 | |
| 313 | |
Robert Ly | 939765f | 2014-06-27 09:25:42 -0700 | [diff] [blame] | 314 | <h4 id="how_to_choose_an_appropriate_priority"><strong>How to choose an appropriate |
| 315 | priority</strong></h4> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 316 | |
Robert Ly | 50b55d6 | 2014-06-29 13:00:11 -0700 | [diff] [blame] | 317 | <p>Default, High, and Max priority are interruptive priority levels and risk interrupting the user |
Ricardo Cervera | de13827 | 2014-07-14 13:37:44 -0700 | [diff] [blame] | 318 | from what they are doing. This should not be taken lightly, so these levels should be reserved |
Robert Ly | 50b55d6 | 2014-06-29 13:00:11 -0700 | [diff] [blame] | 319 | for notifications that:</p> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 320 | |
| 321 | <ul> |
Robert Ly | 939765f | 2014-06-27 09:25:42 -0700 | [diff] [blame] | 322 | <li> Involve another person</li> |
| 323 | <li> Are time-sensitive</li> |
| 324 | <li> Might immediately change the user's behavior in the real world</li> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 325 | </ul> |
| 326 | |
Robert Ly | e1e35d1 | 2014-06-30 12:48:22 -0700 | [diff] [blame] | 327 | <p>Notifications set to <code>LOW</code> and <code>MIN</code> can still be very valuable for the |
| 328 | user. Many if not most notifications just don't need to command the user's immediate attention, or |
| 329 | vibrate the user's wrist, yet contain information that they will find valuable when they choose to |
| 330 | look for notifications. Criteria for <code>LOW</code> and <code>MIN</code> priority notifications:</p> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 331 | |
| 332 | <ul> |
Robert Ly | 939765f | 2014-06-27 09:25:42 -0700 | [diff] [blame] | 333 | <li> Don't involve other people</li> |
| 334 | <li> Aren't time sensitive</li> |
| 335 | <li> Is content the user might be interested in but could choose to browse at their leisure</li> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 336 | </ul> |
| 337 | |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 338 | |
Robert Ly | 9e12140 | 2014-06-27 10:27:40 -0700 | [diff] [blame] | 339 | <img src="{@docRoot}preview/images/notifications/notifications_pattern_priority.png" |
Robert Ly | 939765f | 2014-06-27 09:25:42 -0700 | [diff] [blame] | 340 | alt="" width="700"/> |
| 341 | |
| 342 | |
| 343 | <h3 style="clear:both" id="set_a_notification_category">Set a notification category</h3> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 344 | |
Robert Ly | 50b55d6 | 2014-06-29 13:00:11 -0700 | [diff] [blame] | 345 | <p>If your notification falls into one of the predefined categories (see below), assign it |
| 346 | accordingly. Aspects of the system UI such as the notification shade (or any other notification |
| 347 | listener) may use this information to make ranking and filtering decisions.</p> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 348 | <table> |
| 349 | <tr> |
| 350 | <td> |
Robert Ly | 939765f | 2014-06-27 09:25:42 -0700 | [diff] [blame] | 351 | <p><code>Notification.CATEGORY_CALL</code></p> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 352 | </td> |
| 353 | <td> |
| 354 | <p>Incoming call (voice or video) or similar synchronous communication request</p> |
| 355 | </td> |
| 356 | </tr> |
| 357 | <tr> |
| 358 | <td> |
Robert Ly | 939765f | 2014-06-27 09:25:42 -0700 | [diff] [blame] | 359 | <p><code>Notification.CATEGORY_MESSAGE</code></p> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 360 | </td> |
| 361 | <td> |
| 362 | <p>Incoming direct message (SMS, instant message, etc.)</p> |
| 363 | </td> |
| 364 | </tr> |
| 365 | <tr> |
| 366 | <td> |
Robert Ly | 939765f | 2014-06-27 09:25:42 -0700 | [diff] [blame] | 367 | <p><code>Notification.CATEGORY_EMAIL</code></p> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 368 | </td> |
| 369 | <td> |
| 370 | <p>Asynchronous bulk message (email)</p> |
| 371 | </td> |
| 372 | </tr> |
| 373 | <tr> |
| 374 | <td> |
Robert Ly | 939765f | 2014-06-27 09:25:42 -0700 | [diff] [blame] | 375 | <p><code>Notification.CATEGORY_EVENT</code></p> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 376 | </td> |
| 377 | <td> |
| 378 | <p>Calendar event</p> |
| 379 | </td> |
| 380 | </tr> |
| 381 | <tr> |
| 382 | <td> |
Robert Ly | 939765f | 2014-06-27 09:25:42 -0700 | [diff] [blame] | 383 | <p><code>Notification.CATEGORY_PROMO</code></p> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 384 | </td> |
| 385 | <td> |
| 386 | <p>Promotion or advertisement</p> |
| 387 | </td> |
| 388 | </tr> |
| 389 | <tr> |
| 390 | <td> |
Robert Ly | 939765f | 2014-06-27 09:25:42 -0700 | [diff] [blame] | 391 | <p><code>Notification.CATEGORY_ALARM</code></p> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 392 | </td> |
| 393 | <td> |
| 394 | <p>Alarm or timer</p> |
| 395 | </td> |
| 396 | </tr> |
| 397 | <tr> |
| 398 | <td> |
Robert Ly | 939765f | 2014-06-27 09:25:42 -0700 | [diff] [blame] | 399 | <p><code>Notification.CATEGORY_PROGRESS</code></p> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 400 | </td> |
| 401 | <td> |
| 402 | <p>Progress of a long-running background operation</p> |
| 403 | </td> |
| 404 | </tr> |
| 405 | <tr> |
| 406 | <td> |
Robert Ly | 939765f | 2014-06-27 09:25:42 -0700 | [diff] [blame] | 407 | <p><code>Notification.CATEGORY_SOCIAL</code></p> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 408 | </td> |
| 409 | <td> |
| 410 | <p>Social network or sharing update</p> |
| 411 | </td> |
| 412 | </tr> |
| 413 | <tr> |
| 414 | <td> |
Robert Ly | 939765f | 2014-06-27 09:25:42 -0700 | [diff] [blame] | 415 | <p><code>Notification.CATEGORY_ERROR</code></p> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 416 | </td> |
| 417 | <td> |
| 418 | <p>Error in background operation or authentication status</p> |
| 419 | </td> |
| 420 | </tr> |
| 421 | <tr> |
| 422 | <td> |
Robert Ly | 939765f | 2014-06-27 09:25:42 -0700 | [diff] [blame] | 423 | <p><code>Notification.CATEGORY_TRANSPORT</code></p> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 424 | </td> |
| 425 | <td> |
| 426 | <p>Media transport control for playback</p> |
| 427 | </td> |
| 428 | </tr> |
| 429 | <tr> |
| 430 | <td> |
Robert Ly | 939765f | 2014-06-27 09:25:42 -0700 | [diff] [blame] | 431 | <p><code>Notification.CATEGORY_SYSTEM</code></p> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 432 | </td> |
| 433 | <td> |
| 434 | <p>System or device status update. Reserved for system use.</p> |
| 435 | </td> |
| 436 | </tr> |
| 437 | <tr> |
| 438 | <td> |
Robert Ly | 939765f | 2014-06-27 09:25:42 -0700 | [diff] [blame] | 439 | <p><code>Notification.CATEGORY_SERVICE</code></p> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 440 | </td> |
| 441 | <td> |
| 442 | <p>Indication of running background service</p> |
| 443 | </td> |
| 444 | </tr> |
| 445 | <tr> |
| 446 | <td> |
Robert Ly | 939765f | 2014-06-27 09:25:42 -0700 | [diff] [blame] | 447 | <p><code>Notification.CATEGORY_RECOMMENDATION</code></p> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 448 | </td> |
| 449 | <td> |
Robert Ly | 50b55d6 | 2014-06-29 13:00:11 -0700 | [diff] [blame] | 450 | <p>A specific, timely recommendation for a single thing. For example, a news app might want to |
| 451 | recommend a news story it believes the user will want to read next.</p> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 452 | </td> |
| 453 | </tr> |
| 454 | <tr> |
| 455 | <td> |
Robert Ly | 939765f | 2014-06-27 09:25:42 -0700 | [diff] [blame] | 456 | <p><code>Notification.CATEGORY_STATUS</code></p> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 457 | </td> |
| 458 | <td> |
| 459 | <p>Ongoing information about device or contextual status</p> |
| 460 | </td> |
| 461 | </tr> |
| 462 | </table> |
| 463 | |
Robert Ly | 939765f | 2014-06-27 09:25:42 -0700 | [diff] [blame] | 464 | <h3 id="summarize_your_notifications">Summarize your notifications</h3> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 465 | |
Robert Ly | 50b55d6 | 2014-06-29 13:00:11 -0700 | [diff] [blame] | 466 | <p>If your app creates a notification while another of the same type is still pending, avoid |
| 467 | creating an altogether new notification object. Instead, turn it into a summary notification for |
| 468 | the app.</p> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 469 | |
Robert Ly | 50b55d6 | 2014-06-29 13:00:11 -0700 | [diff] [blame] | 470 | <p>A summary notification builds a summary description and allows the user to understand how many |
| 471 | notifications of a particular kind are pending.</p> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 472 | |
Robert Ly | 939765f | 2014-06-27 09:25:42 -0700 | [diff] [blame] | 473 | <div class="col-6"> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 474 | |
Robert Ly | e1e35d1 | 2014-06-30 12:48:22 -0700 | [diff] [blame] | 475 | <p><strong>Don't</strong></p> |
Robert Ly | 9e12140 | 2014-06-27 10:27:40 -0700 | [diff] [blame] | 476 | <img src="{@docRoot}preview/images/notifications/Summarise_Dont.png" |
Robert Ly | 50b55d6 | 2014-06-29 13:00:11 -0700 | [diff] [blame] | 477 | alt="" width="311px" /> |
Robert Ly | 939765f | 2014-06-27 09:25:42 -0700 | [diff] [blame] | 478 | </div> |
| 479 | |
Robert Ly | 50b55d6 | 2014-06-29 13:00:11 -0700 | [diff] [blame] | 480 | <div> |
Robert Ly | 939765f | 2014-06-27 09:25:42 -0700 | [diff] [blame] | 481 | <p><strong>Do</strong></p> |
| 482 | |
Robert Ly | 9e12140 | 2014-06-27 10:27:40 -0700 | [diff] [blame] | 483 | <img src="{@docRoot}preview/images/notifications/Summarise_Do.png" |
Robert Ly | 50b55d6 | 2014-06-29 13:00:11 -0700 | [diff] [blame] | 484 | alt="" width="311px"/> |
Robert Ly | 939765f | 2014-06-27 09:25:42 -0700 | [diff] [blame] | 485 | </div> |
| 486 | |
Robert Ly | e1e35d1 | 2014-06-30 12:48:22 -0700 | [diff] [blame] | 487 | <p style="clear:left; padding-top:30px; padding-bottom:20px">You can provide more detail about the individual notifications that make up a |
Robert Ly | 50b55d6 | 2014-06-29 13:00:11 -0700 | [diff] [blame] | 488 | summary by using the expanded digest layout. This allows users to gain a better sense of which |
| 489 | notifications are pending and if they are interesting enough to be read in detail within the |
| 490 | associated app.</p> |
| 491 | <div class="col-6"> |
Robert Ly | e1e35d1 | 2014-06-30 12:48:22 -0700 | [diff] [blame] | 492 | <img src="{@docRoot}preview/images/notifications/Stack.png" style="margin-bottom:20px" |
Robert Ly | 50b55d6 | 2014-06-29 13:00:11 -0700 | [diff] [blame] | 493 | alt="" width="311px" /> |
Robert Ly | 939765f | 2014-06-27 09:25:42 -0700 | [diff] [blame] | 494 | <p class="img-caption"> |
| 495 | Expanded and contracted notification that is a summary (using InboxStyle) |
| 496 | </p> |
Robert Ly | 50b55d6 | 2014-06-29 13:00:11 -0700 | [diff] [blame] | 497 | </div> |
Robert Ly | 939765f | 2014-06-27 09:25:42 -0700 | [diff] [blame] | 498 | |
Robert Ly | 50b55d6 | 2014-06-29 13:00:11 -0700 | [diff] [blame] | 499 | <h3 style="clear:both" id="make_notifications_optional">Make notifications optional</h3> |
Robert Ly | 939765f | 2014-06-27 09:25:42 -0700 | [diff] [blame] | 500 | |
Ricardo Cervera | de13827 | 2014-07-14 13:37:44 -0700 | [diff] [blame] | 501 | <p>Users should always be in control of notifications. Allow the user to disable your app's |
Robert Ly | 939765f | 2014-06-27 09:25:42 -0700 | [diff] [blame] | 502 | notifications or change their alert properties, such as alert sound and whether to use vibration, |
| 503 | by adding a notification settings item to your application settings.</p> |
| 504 | |
| 505 | <h3 id="use_distinct_icons">Use distinct icons</h3> |
| 506 | <p>By glancing at the notification area, the user should be able to discern what kinds of |
| 507 | notifications are currently pending.</p> |
| 508 | |
| 509 | <div class="figure"> |
Robert Ly | 9e12140 | 2014-06-27 10:27:40 -0700 | [diff] [blame] | 510 | <img src="{@docRoot}preview/images/notifications/ProductIcons.png" |
Robert Ly | 939765f | 2014-06-27 09:25:42 -0700 | [diff] [blame] | 511 | alt="" width="420" /> |
| 512 | </div> |
| 513 | |
| 514 | <div><p><strong>Do</strong></p> |
| 515 | <p>Look at the notification icons Android apps already provide and create notification icons for |
| 516 | your app that are sufficiently distinct in appearance.</p> |
| 517 | |
| 518 | <p><strong>Do</strong></p> |
| 519 | <p>Use the proper <a href="/design/style/iconography.html#notification">notification icon |
| 520 | style</a> for small icons, and the Material Light |
| 521 | <a href="/design/style/iconography.html#action-bar">action bar icon style</a> for your action |
| 522 | icons. Do not place any additional alpha (dimming or fading) into your small icons and action |
| 523 | icons; they can have anti-aliased edges, but because L uses these icons as masks (that is, only |
| 524 | the alpha channel is used), the image should generally be drawn at full opacity.</p> |
| 525 | <p ><strong>Do</strong></p> |
| 526 | <p >Keep your icons visually simple and avoid excessive detail that is hard to discern.</p> |
| 527 | |
| 528 | </div> |
| 529 | <p style="clear:both"><strong>Don't</strong></p> |
| 530 | |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 531 | <p>Use color to distinguish your app from others. Notification icons should only be a white-on-transparent background image.</p> |
| 532 | |
Robert Ly | 939765f | 2014-06-27 09:25:42 -0700 | [diff] [blame] | 533 | |
| 534 | <h3 id="pulse_the_notification_led_appropriately">Pulse the notification LED appropriately</h3> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 535 | |
Robert Ly | 50b55d6 | 2014-06-29 13:00:11 -0700 | [diff] [blame] | 536 | <p>Many Android devices contain a notification LED, which is used to keep the user informed about |
| 537 | events while the screen is off. Notifications with a priority level of MAX, HIGH, or DEFAULT should |
Robert Ly | e1e35d1 | 2014-06-30 12:48:22 -0700 | [diff] [blame] | 538 | cause the LED to glow, while those with lower priority (<code>LOW</code> and <code>MIN</code>) should not.</p> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 539 | |
Robert Ly | 50b55d6 | 2014-06-29 13:00:11 -0700 | [diff] [blame] | 540 | <p>The user's control over notifications should extend to the LED. When you use DEFAULT_LIGHTS, the |
| 541 | LED will glow with a white color. Your notifications shouldn't use a different color unless the |
| 542 | user has explicitly customized it.</p> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 543 | |
Robert Ly | 939765f | 2014-06-27 09:25:42 -0700 | [diff] [blame] | 544 | <h2 id="building_notifications_that_users_care_about">Building notifications that users care about</h2> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 545 | |
Robert Ly | 50b55d6 | 2014-06-29 13:00:11 -0700 | [diff] [blame] | 546 | <p>To create an app that users love, it is important to design your notifications carefully. |
| 547 | Notifications embody your app's voice, and contribute to your app's personality. Unwanted or |
| 548 | unimportant notifications can annoy the user or make them resent how much attention the app wants |
| 549 | from them, so use notifications judiciously.</p> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 550 | |
Robert Ly | 939765f | 2014-06-27 09:25:42 -0700 | [diff] [blame] | 551 | <h3 id="when_to_display_a_notification">When to display a notification</h3> |
Robert Ly | e1e35d1 | 2014-06-30 12:48:22 -0700 | [diff] [blame] | 552 | |
Robert Ly | 50b55d6 | 2014-06-29 13:00:11 -0700 | [diff] [blame] | 553 | <p>To create an application that people enjoy using, it's important to recognize that the user's |
| 554 | attention and focus is a resource that must be protected. While Android's notification system has |
| 555 | been designed to minimize the impact of notifications on the user's attention, it is nonetheless |
| 556 | still important to be aware of the fact that notifications are interrupting the user's task flow. |
| 557 | As you plan your notifications, ask yourself if they are important enough to warrant an interruption. If you are unsure, allow the user to opt into a notification using your apps notification settings or adjust |
Robert Ly | e1e35d1 | 2014-06-30 12:48:22 -0700 | [diff] [blame] | 558 | the notifications priority flag to <code>LOW</code> or <code>MIN</code> to avoid distracting the user while they are doing |
Robert Ly | 50b55d6 | 2014-06-29 13:00:11 -0700 | [diff] [blame] | 559 | something else.</p> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 560 | |
Robert Ly | e1e35d1 | 2014-06-30 12:48:22 -0700 | [diff] [blame] | 561 | <img src="{@docRoot}preview/images/notifications/TimeSensitive.png" |
| 562 | alt="" width="311px" /> |
| 563 | <p style="margin-top:10px" class="img-caption"> |
| 564 | Time sensitive notification examples |
| 565 | </p> |
| 566 | |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 567 | <p>While well behaved apps generally only speak when spoken to, there are some limited cases where an app actually should interrupt the user with an unprompted notification.</p> |
| 568 | |
Robert Ly | 50b55d6 | 2014-06-29 13:00:11 -0700 | [diff] [blame] | 569 | <p>Notifications should be used primarily for <strong>time sensitive events</strong>, and especially |
| 570 | if these synchronous events <strong>involve other people</strong>. For instance, an incoming chat |
| 571 | is a real time and synchronous form of communication: there is another user actively waiting on you |
| 572 | to respond. Calendar events are another good example of when to use a notification and grab the |
| 573 | user's attention, because the event is imminent, and calendar events often involve other people.</p> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 574 | |
Robert Ly | 939765f | 2014-06-27 09:25:42 -0700 | [diff] [blame] | 575 | <h3 style="clear:both" id="when_not_to_display_a_notification">When not to display a notification</h3> |
| 576 | |
| 577 | <div class="figure" style="margin-top:60px"> |
Robert Ly | 9e12140 | 2014-06-27 10:27:40 -0700 | [diff] [blame] | 578 | <img src="{@docRoot}preview/images/notifications/AntiSample1.png" |
Robert Ly | 50b55d6 | 2014-06-29 13:00:11 -0700 | [diff] [blame] | 579 | alt="" width="311px" /> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 580 | </div> |
| 581 | |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 582 | <p>There are however many other cases where notifications should not be used:</p> |
| 583 | |
| 584 | <ul> |
Robert Ly | 50b55d6 | 2014-06-29 13:00:11 -0700 | [diff] [blame] | 585 | <li> Avoid notifying the user of information that is not directed specifically at them, or |
| 586 | information that is not truly time sensitive. For instance the asynchronous and undirected updates |
| 587 | flowing through a social network generally do not warrant a real time interruption. For the users |
| 588 | that do care about them, allow them to opt-in.</li> |
| 589 | <li> Don't create a notification if the relevant new information is currently on screen. Instead, |
| 590 | use the UI of the application itself to notify the user of new information directly in context. |
| 591 | For instance, a chat application should not create system notifications while the user is actively chatting with another user.</li> |
| 592 | <li> Don't interrupt the user for low level technical operations, like saving or syncing information, or updating an application, if it is possible for the system to simply take care of itself without involving the user.</li> |
| 593 | <li> Don't interrupt the user to inform them of an error if it is possible for the application to recover from the error on its own without the user taking any action.</li> |
| 594 | <li> Don't create notifications that have no true notification content and merely advertise your |
| 595 | app. A notification should provide useful, timely, new information and should not be used to |
| 596 | merely launch an app.</li> |
| 597 | <li> Don't create superfluous notifications just to get your brand in front of users. |
| 598 | Such notifications will only frustrate and likely alienate your audience. The best way to provide |
| 599 | the user with a small amount of updated information and to keep them engaged with your |
| 600 | application is to develop a widget that they can choose to place on their home screen.</li> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 601 | </ul> |
| 602 | |
Robert Ly | 939765f | 2014-06-27 09:25:42 -0700 | [diff] [blame] | 603 | <h2 style="clear:left" id="interacting_with_notifications">Interacting With Notifications</h2> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 604 | |
Robert Ly | 50b55d6 | 2014-06-29 13:00:11 -0700 | [diff] [blame] | 605 | <p>Notifications are indicated by icons in the status bar and can be accessed by opening the |
| 606 | notification drawer.</p> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 607 | |
Robert Ly | 50b55d6 | 2014-06-29 13:00:11 -0700 | [diff] [blame] | 608 | <p>Touching a notification opens the associated app to detailed content matching the notification. |
| 609 | Swiping left or right on a notification removes it from the list.</p> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 610 | |
Robert Ly | 939765f | 2014-06-27 09:25:42 -0700 | [diff] [blame] | 611 | <h3 id="ongoing_notifications">Ongoing notifications</h3> |
Robert Ly | 50b55d6 | 2014-06-29 13:00:11 -0700 | [diff] [blame] | 612 | <div class="figure" style="width:311px"> |
Robert Ly | 9e12140 | 2014-06-27 10:27:40 -0700 | [diff] [blame] | 613 | <img src="{@docRoot}preview/images/notifications/MusicPlayback.png" |
Robert Ly | 50b55d6 | 2014-06-29 13:00:11 -0700 | [diff] [blame] | 614 | alt="" width="311px" /> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 615 | <p class="img-caption"> |
Robert Ly | 939765f | 2014-06-27 09:25:42 -0700 | [diff] [blame] | 616 | Ongoing notification due to music playback |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 617 | </p> |
| 618 | </div> |
Robert Ly | 50b55d6 | 2014-06-29 13:00:11 -0700 | [diff] [blame] | 619 | <p>Ongoing notifications keep users informed about an ongoing process in the background. |
| 620 | For example, music players announce the currently playing track in the notification system and |
| 621 | continue to do so until the user stops the playback. They can also be used to show the user |
| 622 | feedback for longer tasks like downloading a file, or encoding a video. Ongoing notifications |
| 623 | cannot be manually removed from the notification drawer.</p> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 624 | |
Robert Ly | 50b55d6 | 2014-06-29 13:00:11 -0700 | [diff] [blame] | 625 | <p>The L lockscreen doesn't show transport controls for RCC (RemoteControlClient)s anymore. But the |
| 626 | lockscreen <em>does</em> show notifications, so each app's playback notification is now the primary |
| 627 | way for users to control playback from a locked state. This gives apps more control over which |
| 628 | buttons to show and in what way, while providing a consistent experience for the user whether on |
| 629 | the lockscreen or unlocked.</p> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 630 | |
Robert Ly | 939765f | 2014-06-27 09:25:42 -0700 | [diff] [blame] | 631 | <h3 style="clear:both" id="dialogs_and_toasts_are_for_feedback_not_notification">Dialogs |
| 632 | and toasts are for feedback not notifications</h3> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 633 | |
Robert Ly | 50b55d6 | 2014-06-29 13:00:11 -0700 | [diff] [blame] | 634 | <p>Your app should not create a dialog or toast if it is not currently on screen. Dialogs and Toasts |
| 635 | should only be displayed as the immediate response to the user taking an action inside of your app. |
| 636 | For further guidance on the use of dialogs and toasts, refer to |
| 637 | <a href="/design/patterns/confirming-acknowledging.html">Confirming & Acknowledging</a>.</p> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 638 | |
Robert Ly | 939765f | 2014-06-27 09:25:42 -0700 | [diff] [blame] | 639 | <h3>Ranking and Ordering</h3> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 640 | |
Robert Ly | 50b55d6 | 2014-06-29 13:00:11 -0700 | [diff] [blame] | 641 | <p>Notifications are "news" and so they are essentially shown in reverse-chronological order, with |
| 642 | special consideration given to the app's stated notification priority.</p> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 643 | |
Robert Ly | 50b55d6 | 2014-06-29 13:00:11 -0700 | [diff] [blame] | 644 | <p>In L, notifications are now a key part of the lockscreen, and are featured prominently every |
| 645 | time the device display comes on. Because space on the lockscreen is tight, it is more important |
| 646 | than ever to identify the most urgent or relevant notifications.</p> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 647 | |
| 648 | <p>Therefore, L has a more sophisticated sorting algorithm for notifications, taking into account:</p> |
| 649 | |
| 650 | <ul> |
Robert Ly | 50b55d6 | 2014-06-29 13:00:11 -0700 | [diff] [blame] | 651 | <li> The timestamp and application's stated priority, as before.</li> |
| 652 | <li> Whether the notification has recently disturbed the user with sound or vibration. (That is, |
| 653 | if the phone just made noise, and the user wants to know "what just happened?" the lockscreen |
| 654 | should answer that at a glance.)</li> |
| 655 | <li> Any people that are attached to the notification using <code>EXTRA_PEOPLE</code>, and in |
| 656 | particular whether those are starred contacts.</li> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 657 | </ul> |
| 658 | |
Robert Ly | 50b55d6 | 2014-06-29 13:00:11 -0700 | [diff] [blame] | 659 | <p>To best take advantage of this sorting, developers should focus on the user experience they want |
| 660 | to create rather than aiming for any particular spot on the list.</p> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 661 | |
Robert Ly | 9e12140 | 2014-06-27 10:27:40 -0700 | [diff] [blame] | 662 | <img src="{@docRoot}preview/images/notifications/AntiSample3.png" |
Robert Ly | 939765f | 2014-06-27 09:25:42 -0700 | [diff] [blame] | 663 | alt="" width="700px" /> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 664 | |
Robert Ly | e1e35d1 | 2014-06-30 12:48:22 -0700 | [diff] [blame] | 665 | <p class="img-caption" style="margin-top:10px">Gmail notifications are default priority, so they |
Robert Ly | 50b55d6 | 2014-06-29 13:00:11 -0700 | [diff] [blame] | 666 | normally sort below messages from an instant messaging app like Hangouts, but Gmail will get a |
| 667 | temporary bump when new messages come in. |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 668 | </p> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 669 | |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 670 | |
Robert Ly | 939765f | 2014-06-27 09:25:42 -0700 | [diff] [blame] | 671 | <h3>On the lockscreen</h3> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 672 | |
Robert Ly | 50b55d6 | 2014-06-29 13:00:11 -0700 | [diff] [blame] | 673 | <p>Starting in L, notifications are visible on the lockscreen, and so we must consider the user's |
| 674 | privacy. Notifications often contain sensitive information, and we must take care when showing it to |
| 675 | anyone who picks up the device and turns on the display.</p> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 676 | |
| 677 | <ul> |
Robert Ly | 50b55d6 | 2014-06-29 13:00:11 -0700 | [diff] [blame] | 678 | <li> For devices without a secure lockscreen, a simple slide gesture unlocks the whole device. |
| 679 | Therefore, Android will always show the complete contents of all notifications on insecure lockscreens.</li> |
| 680 | <li> When a device has a secure lockscreen (PIN, pattern, or password), however, it divides the |
| 681 | interface into two spheres: "public", the things that are displayed atop a secure lockscreen and |
| 682 | can therefore be seen by anyone; and "private", the world behind that lockscreen, which can only |
| 683 | be accessed by supplying the correct authentication.</li> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 684 | </ul> |
| 685 | |
Robert Ly | 939765f | 2014-06-27 09:25:42 -0700 | [diff] [blame] | 686 | <h3>The user decides what shows on the secure lockscreen</h3> |
Robert Ly | 50b55d6 | 2014-06-29 13:00:11 -0700 | [diff] [blame] | 687 | <div class="figure" style="width:311px"> |
Robert Ly | 9e12140 | 2014-06-27 10:27:40 -0700 | [diff] [blame] | 688 | <img src="{@docRoot}preview/images/notifications/LockScreen.png" |
Robert Ly | 50b55d6 | 2014-06-29 13:00:11 -0700 | [diff] [blame] | 689 | alt="" width="311px" /> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 690 | <p class="img-caption"> |
Robert Ly | 939765f | 2014-06-27 09:25:42 -0700 | [diff] [blame] | 691 | Notifications on the lockscreen followed by the Pattern Unlock when the user attempts to unlock the phone. |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 692 | </p> |
| 693 | </div> |
| 694 | |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 695 | <p>When setting up a secure lockscreen, the user can choose to conceal sensitive details from atop the secure lockscreen. In this case the SystemUI considers the notification's <em>visibility level</em> to figure out what can safely be shown.</p> |
Robert Ly | 50b55d6 | 2014-06-29 13:00:11 -0700 | [diff] [blame] | 696 | <p> To control the visibility level, call |
| 697 | <code>Notification.Builder.setVisibility()</code> and specify one of these values:</p> |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 698 | |
| 699 | <ul> |
Robert Ly | 50b55d6 | 2014-06-29 13:00:11 -0700 | [diff] [blame] | 700 | <li><code>Notification.VISIBILITY_PUBLIC</code>. Shows the notification's full content. |
| 701 | This is the system default if visibility is left unspecified.</li> |
| 702 | <li><code>Notification.VISIBILITY_PRIVATE</code>. The lockscreen will reveal basic information about the existence of this notification, including its icon and the name of the app that posted it. The rest of the notification's details, however, are not displayed. |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 703 | <ul> |
Robert Ly | 50b55d6 | 2014-06-29 13:00:11 -0700 | [diff] [blame] | 704 | <li> If you want to provide a different public version of your notification for the system to display on a secure lockscreen, supply a replacement Notification object in the <code>Notification.publicVersion</code> field. |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 705 | <li> This is an app's opportunity to create a redacted version of the content that is still useful but does not reveal personal information. |
Robert Ly | 939765f | 2014-06-27 09:25:42 -0700 | [diff] [blame] | 706 | <li> <strong>Example: </strong>An SMS app whose notifications include the text of the SMS and the sender's name and contact icon. This notification should be <code>VISIBILITY_PRIVATE</code>, but the <code>publicVersion</code> could still contain useful information like "3 new messages" without any other identifying details. |
Robert Ly | c34fdb72b | 2014-06-26 02:17:12 -0700 | [diff] [blame] | 707 | </ul> |
Robert Ly | 50b55d6 | 2014-06-29 13:00:11 -0700 | [diff] [blame] | 708 | </li> |
| 709 | <li><code>Notification.VISIBILITY_SECRET</code>. Shows only the most minimal information, excluding even the notification's icon.</li> |
Robert Ly | 939765f | 2014-06-27 09:25:42 -0700 | [diff] [blame] | 710 | </ul> |