1page.title=Notifications in Android 4.4 and Lower 2@jd:body 3 4<a class="notice-developers" href="{@docRoot}training/notify-user/index.html"> 5 <div> 6 <h3>Developer Docs</h3> 7 <p>Notifying the User</p> 8 </div> 9</a> 10 11<a class="notice-designers" href="notifications.html"> 12 <div> 13 <h3>Notifications in Android 5.0</h3> 14 </div> 15</a> 16 17<p itemprop="description">The notification system allows your app to keep the 18user informed about events, such as new chat messages or a calendar event. 19Think of notifications as a news channel that alerts the user to important 20events as they happen or a log that chronicles events while the user is not 21paying attention.</p> 22 23<h2>Anatomy of a notification</h2> 24 25<div class="cols"> 26 <div class="col-6"> 27 <h4>Base Layout</h4> 28 <p>At a minimum, all notifications consist of a base layout, including:</p> 29 <ul> 30 <li>the sending application's notification icon or the sender's photo</li> 31 <li>a notification title and message</li> 32 <li>a timestamp</li> 33 <li>a secondary icon to identify the sending application when the sender's 34image is shown for the main icon</li> 35 </ul> 36 </div> 37 <div class="col-6"> 38 <img src="{@docRoot}design/media/notifications_pattern_anatomy.png"> 39 <div class="figure-caption"> 40 Base layout of a notification 41 </div> 42 </div> 43</div> 44 45<h4>Expanded layouts</h4> 46<p>You have the option to provide more event detail. You can use this to show 47the first few lines of a message or show a larger image preview. This provides 48the user with additional context, and - in some cases - may allow the user to 49read a message in its entirety. The user can pinch-zoom or two-finger glide in 50order to toggle between base and expanded layouts. For single event 51notifications, Android provides two expanded layout templates (text and image) 52for you to re-use in your application.</p> 53 54<img src="{@docRoot}design/media/notifications_pattern_expandable.png"> 55 56<h4>Actions</h4> 57<div class="cols"> 58 <div class="col-6"> 59 <p>Android supports optional actions that are displayed at the bottom of 60the notification. With actions, users can handle the most common tasks for a 61particular notification from within the notification shade without having to 62open the originating application. This speeds up interaction and, in 63conjunction with "swipe-to-dismiss", helps users to streamline their 64notification triaging experience.</p> 65 <p>Be judicious with how many actions you include with a notification. The 66more actions you include, the more cognitive complexity you create. Limit 67yourself to the fewest number of actions possible by only including the most 68imminently important and meaningful ones.</p> 69 <p>Good candidates for actions on notifications are actions that are:</p> 70 <ul> 71 <li>essential, frequent and typical for the content type you're 72displaying</li> 73 <li>time-critical</li> 74 <li>not overlapping with neighboring actions</li> 75 </ul> 76 <p>Avoid actions that are:</p> 77 <ul> 78 <li>ambiguous</li> 79 <li>duplicative of the default action of the notification (such as "Read" 80or "Open")</li> 81 </ul> 82 </div> 83 <div class="col-7"> 84 <img src="{@docRoot}design/media/notifications_pattern_two_actions.png"> 85 <div class="figure-caption"> 86 Calendar reminder notification with two actions 87 </div> 88 </div> 89</div> 90 91<p>You can specify a maximum of three actions, each consisting of an action 92icon and an action name. Adding actions to a simple base layout will make the 93notification expandable, even if the notification doesn't have an expanded 94layout. Since actions are only shown for expanded notifications and are 95otherwise hidden, you must make sure that any action a user can invoke from a 96notification is available from within the associated application as well.</p> 97 98<h2>Design guidelines</h2> 99<div class="cols"> 100 <div class="col-6"> 101 <img src="{@docRoot}design/media/notifications_pattern_personal.png"> 102 </div> 103 <div class="col-7"> 104 <h4>Make it personal</h4> 105 <p>For notifications of items sent by another user (such as a message or 106status update), include that person's image.</p> 107 <p>Remember to include the app icon as a secondary icon in the 108notification, so that the user can still identify which app posted it.</p> 109 </div> 110</div> 111 112<h4>Navigate to the right place</h4> 113<p>When the user touches the body of a notification (outside of the action 114buttons), open your app to the place where the user can consume and act upon 115the data referenced in the notification. In most cases this will be the detail 116view of a 117single data item such as a message, but it might also be a summary view if the 118notification is stacked (see <em>Stacked notifications</em> below) and 119references multiple items. If in any of those cases the user is taken to a 120hierarchy level below your app's top-level, insert navigation into your app's 121back stack to allow them to navigate to your app's top level using the system 122back key. For more 123information, see the chapter on <em>System-to-app navigation</em> in the <a 124href="{@docRoot}design/patterns/navigation.html">Navigation</a> design 125pattern.</p> 126 127<h4>Correctly set and manage notification priority</h4> 128<p>Starting with Jelly Bean, Android supports a priority flag for 129notifications. This flag allows you to influence where your notification will 130appear in comparison to other notifications and help to make sure that users 131always see their most important notifications first. You can choose from the 132following priority levels when posting a notification:</p> 133 134<table> 135 <tr> 136 <th><strong>Priority</strong></th> 137 <th><strong>Use</strong></th> 138 </tr> 139 <tr> 140 <td>MAX</td> 141 <td>Use for critical and urgent notifications that alert the user to a 142condition that is time-critical or needs to be resolved before they can 143continue with a particular task.</td> 144 </tr> 145 <tr> 146 <td>HIGH</td> 147 <td>Use high priority notifications primarily for important communication, 148such as message or chat events with content that is particularly interesting 149for the user.</td> 150 </tr> 151 <tr> 152 <td>DEFAULT</td> 153 <td>The default priority. Keep all notifications that don't fall into any 154of the other categories at this priority level.</td> 155 </tr> 156 <tr> 157 <td>LOW</td> 158 <td>Use for notifications that you still want the user to be informed 159about, but that rate low in urgency.</td> 160 </tr> 161 <tr> 162 <td>MIN</td> 163 <td>Contextual/background information (e.g. weather information, contextual 164location information). Minimum priority notifications will not show in the 165status bar. The user will only discover them when they expand the notification 166tray.</td> 167 </tr> 168</table> 169<img src="{@docRoot}design/media/notifications_pattern_priority.png"> 170 171<h4>Stack your notifications</h4> 172<p>If your app creates a notification while another of the same type is still 173pending, avoid creating 174an altogether new notification object. Instead, stack the notification.</p> 175<p>A stacked notification builds a summary description and allows the user to 176understand how many 177notifications of a particular kind are pending.</p> 178<p><strong>Don't</strong>:</p> 179 180<img src="{@docRoot}design/media/notifications_pattern_additional_fail.png"> 181 182<p><strong>Do</strong>:</p> 183 184<img src="{@docRoot}design/media/notifications_pattern_additional_win.png"> 185 186<p>You can provide more detail about the individual notifications that make up 187a stack by using the expanded digest layout. This allows users to gain a better 188sense of which notifications are pending and if they are interesting enough to 189be read in detail within the associated app.</p> 190 191<img src="{@docRoot}design/media/notifications_expand_contract_msg.png"> 192 193<h4>Make notifications optional</h4> 194<p>Users should always be in control of notifications. Allow the user to 195disable your apps notifications or change their alert properties, such as alert 196sound and whether to use vibration, by adding a notification settings item to 197your application settings.</p> 198<h4>Use distinct icons</h4> 199<p>By glancing at the notification area, the user should be able to discern 200what kinds of notifications are currently pending.</p> 201 202<div class="do-dont-label good"><strong>Do</strong></div> 203<p style="margin-top:0;">Look at the notification icons the Android apps 204already provide and create notification icons for your app that are 205sufficiently distinct in appearance.</p> 206<div class="do-dont-label good"><strong>Do</strong></div> 207<p style="margin-top:0;">Use the proper <a 208href="{@docRoot}design/style/iconography.html#notification">notification icon 209style</a> for small icons, and the Holo Dark <a 210href="{@docRoot}design/style/iconography.html#action-bar">action bar icon 211style</a> for your action icons.</p> 212<div class="do-dont-label good"><strong>Do</strong></div> 213<p style="margin-top:0;">Keep your icons visually simple and avoid excessive 214detail that is hard to discern.</p> 215<div class="do-dont-label bad"><strong>Don't</strong></div> 216<p style="margin-top:0;">Use color to distinguish your app from others.</p> 217 218<h4>Pulse the notification LED appropriately</h4> 219<p>Many Android devices contain a tiny lamp, called the notification <acronym 220title="Light-Emitting Diode">LED</acronym>, which is used to keep the user 221informed about events while the screen is off. Notifications with a priority 222level of MAX, HIGH, or DEFAULT should cause the LED to glow, while those with 223lower priority (LOW and MIN) should not.</p> 224 225<p>The user's control over notifications should extend to the LED. By default, 226the LED will glow with a white color. Your notifications shouldn't use a 227different color unless the user has explicitly customized it.</p> 228 229<h2>Building notifications that users care about</h2> 230<p>To create an app that feels streamlined, pleasant, and respectful, it is 231important to design your notifications carefully. Notifications embody your 232app's voice, and contribute to your app's personality. Unwanted or unimportant 233notifications can annoy the user, so use them judiciously.</p> 234 235<h4>When to display a notification</h4> 236<p>To create an application that people love, it's important to recognize that 237the user's attention and 238focus is a resource that must be protected. While Android's notification system 239has been designed 240to minimize the impact of notifications on the users attention, it is 241nonetheless still important 242to be aware of the fact that notifications are potentially interrupting the 243users task flow. As you 244plan your notifications, ask yourself if they are important enough to warrant 245an interruption. If 246you are unsure, allow the user to opt into a notification using your apps 247notification settings or 248adjust the notifications priority flag.</p> 249<p>While well behaved apps generally only speak when spoken to, there are some 250limited cases where an 251app actually should interrupt the user with an unprompted notification.</p> 252<p>Notifications should be used primarily for <strong>time sensitive 253events</strong>, and especially if these 254synchronous events <strong>involve other people</strong>. For instance, an 255incoming chat is a real time and 256synchronous form of communication: there is another user actively waiting on 257you to respond. 258Calendar events are another good example of when to use a notification and grab 259the user's 260attention, because the event is imminent, and calendar events often involve 261other people.</p> 262 263<img src="{@docRoot}design/media/notifications_pattern_real_time_people.png"> 264 265<div class="vspace size-2"> </div> 266 267<div class="cols"> 268 <div class="col-7"> 269 270<h4>When not to display a notification</h4> 271<p>There are however many other cases where notifications should not be 272used:</p> 273<ul> 274<li> 275<p>Avoid notifying the user of information that is not directed specifically at 276them, or information that is not truly time sensitive. For instance the 277asynchronous and undirected updates flowing through a social network generally 278do not warrant a real time interruption. For the users that do care about them, 279allow them to opt-in.</p> 280</li> 281<li> 282<p>Don't create a notification if the relevant new information is currently on 283screen. Instead, use the UI of the application itself to notify the user of new 284information directly in context. For instance, a chat application should not 285create system notifications while the user is actively chatting with another 286user.</p> 287</li> 288<li> 289<p>Don't interrupt the user for low level technical operations, like saving or 290syncing information, or updating an application, if it is possible for the 291system to simply take care of itself without involving the user.</p> 292</li> 293<li> 294<p>Don't interrupt the user to inform them of an error if it is possible for 295the application to quickly recover from the error on its own without the user 296taking any action.</p> 297</li> 298<li> 299<p>Don't create notifications that have no true notification content and merely 300advertise your app. A notification should inform the user about a state and 301should not be used to merely launch an app.</p> 302</li> 303<li> 304<p>Don't create superfluous notifications just to get your brand in front of 305users. Such 306notifications will only frustrate and likely alienate your audience. The best 307way to provide the 308user with a small amount of updated information and to keep them engaged with 309your application is to 310develop a widget that they can choose to place on their home screen.</p> 311</li> 312</ul> 313 314 </div> 315 <div class="col-6"> 316 <img src="{@docRoot}design/media/notifications_pattern_social_fail.png"> 317 </div> 318</div> 319 320<h2 id="interacting-with-notifications">Interacting With Notifications</h2> 321 322<div class="cols"> 323 <div class="col-6"> 324 325 <img src="{@docRoot}design/media/notifications_pattern_phone_icons.png"> 326 327 </div> 328 <div class="col-6"> 329 330 <p>Notifications are indicated by icons in the notification area and can be 331accessed by opening the notification drawer.</p> 332 <p>Inside the drawer, notifications are chronologically sorted with the 333latest one on top. Touching a notification opens the associated app to detailed 334content matching the notification. Swiping left or right on a notification 335removes it from the drawer.</p> 336 337 </div> 338</div> 339 340<div class="cols"> 341 <div class="col-6"> 342 343<p><h4>Ongoing notifications</h4> 344<p>Ongoing notifications keep users informed about an ongoing process in the 345background. For example, music players announce the currently playing track in 346the notification system and continue to do so until the user stops the 347playback. They can also be used to show the user feedback for longer tasks like 348downloading a file, or encoding a video. Ongoing notifications cannot be 349manually removed from the notification drawer.</p></p> 350 351 </div> 352 <div class="col-6"> 353 354 <img src="{@docRoot}design/media/notifications_pattern_ongoing_music.png"> 355 356 </div> 357</div> 358 359<div class="cols"> 360 <div class="col-12"> 361 <h4>Dialogs and toasts are for feedback not notification</h4> 362 <p>Your app should not create a dialog or toast if it is not currently on 363screen. Dialogs and Toasts should only be displayed as the immediate response 364to the user taking an action inside of your app. For further guidance on the 365use of dialogs and toasts, refer to <a 366href="{@docRoot}design/patterns/confirming-acknowledging.html">Confirming & 367Acknowledging</a>.</p> 368 </div> 369</div> 370