blob: 44f46ea57da5d0e7f55f48d476c1646fd31897b7 [file] [log] [blame]
Robert Lyc34fdb72b2014-06-26 02:17:12 -07001page.title=Design for Notifications
2page.tags="notifications","design","L"
3@jd:body
4
Robert Ly50b55d62014-06-29 13:00:11 -07005<style>
6 .col-5, .col-6, .col-7 {
7 margin-left:0px;
8 }
9</style>
10
Robert Lyc34fdb72b2014-06-26 02:17:12 -070011<p>The notification system allows users to keep informed about relevant and timely
12events in your app, such as new chat messages from a friend or a calendar event.
13Think of notifications as a news channel that alerts the user to important events as
14they happen or a log that chronicles events while the user is not paying attention -
15and 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 Ly939765f2014-06-27 09:25:42 -070039<p>This section goes over basic parts of a notification and how they can
40appear on different types of devices.</p>
Robert Lyc34fdb72b2014-06-26 02:17:12 -070041
Robert Ly939765f2014-06-27 09:25:42 -070042<h3 id="BaseLayout">Base Layout</h3>
Robert Lyc34fdb72b2014-06-26 02:17:12 -070043
44<p>At a minimum, all notifications consist of a base layout, including:</p>
45
46<ul>
Robert Ly50b55d62014-06-29 13:00:11 -070047 <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 Lyc34fdb72b2014-06-26 02:17:12 -070050 <li> A notification <strong>title</strong> and additional <strong>text</strong></li>
51 <li> A <strong>timestamp</strong></li>
52</ul>
Robert Ly939765f2014-06-27 09:25:42 -070053
Robert Ly50b55d62014-06-29 13:00:11 -070054<p>Notifications created with <code>Notification.Builder</code> for versions of Android earlier
55than L will look and work the same in L, with only minor stylistic changes that the system handles
56for you.</p>
Robert Ly939765f2014-06-27 09:25:42 -070057
Robert Ly50b55d62014-06-29 13:00:11 -070058
Robert Lye1e35d12014-06-30 12:48:22 -070059 <img style="margin:20px 0 0 0" src="{@docRoot}preview/images/notifications/basic_combo.png"
Robert Ly50b55d62014-06-29 13:00:11 -070060 alt="" width="700px" />
61
Robert Lyc34fdb72b2014-06-26 02:17:12 -070062
Robert Lye1e35d12014-06-30 12:48:22 -070063<div style="clear:both;margin-top:20px">
Robert Ly939765f2014-06-27 09:25:42 -070064 <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 Lyc34fdb72b2014-06-26 02:17:12 -070069</div>
70
Robert Ly939765f2014-06-27 09:25:42 -070071<h3 id="ExpandedLayouts">Expanded layouts</h3>
72
73
Robert Ly50b55d62014-06-29 13:00:11 -070074<p>You have the option to provide more details on notifications. You can use this to show the first
75few lines of a message or show a larger image preview. This provides the user with additional
76context, and - in some cases - may allow the user to read a message in its entirety. The user can
77pinch-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 Ly939765f2014-06-27 09:25:42 -070081
Robert Lybdc54282014-06-30 18:18:22 -070082<img style="margin-top:30px" src="{@docRoot}preview/images/notifications/expandedtext_combo.png"
Robert Ly50b55d62014-06-29 13:00:11 -070083 alt="" width="700px" height;="284px" />
Robert Lybdc54282014-06-30 18:18:22 -070084<img style="margin-top:30px" src="{@docRoot}preview/images/notifications/stack_combo.png"
Robert Ly50b55d62014-06-29 13:00:11 -070085 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 Lyc34fdb72b2014-06-26 02:17:12 -070088
Robert Ly50b55d62014-06-29 13:00:11 -070089<h3 id="actions" style="clear:both; margin-top:40px">Actions</h3>
Robert Ly939765f2014-06-27 09:25:42 -070090
Robert Ly50b55d62014-06-29 13:00:11 -070091<p>Android has supported optional actions that are displayed at the bottom of the notification, as
92far back as Jelly Bean. With actions, users can handle the most common tasks for a particular
93notification from within the notification shade without having to open the originating application.
94This speeds up interaction and, in conjunction with "swipe-to-dismiss", helps users to streamline
95their notification triaging experience.</p>
Robert Lyc34fdb72b2014-06-26 02:17:12 -070096
Robert Ly939765f2014-06-27 09:25:42 -070097
Robert Ly50b55d62014-06-29 13:00:11 -070098 <img src="{@docRoot}preview/images/notifications/action_combo.png"
99 alt="" width="700px" />
Robert Ly939765f2014-06-27 09:25:42 -0700100
101
Robert Ly50b55d62014-06-29 13:00:11 -0700102
103<p style="clear:both">Be judicious with how many actions you include with a notification. The more
104actions you include, the more cognitive complexity you create. Limit yourself to the fewest number
105of actions possible by only including the most imminently important and meaningful ones.</p>
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700106
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 Lyc34fdb72b2014-06-26 02:17:12 -0700121
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700122
Robert Ly50b55d62014-06-29 13:00:11 -0700123<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 Lyc34fdb72b2014-06-26 02:17:12 -0700128
Robert Ly939765f2014-06-27 09:25:42 -0700129<h2 id="notifications_on_android_wear">Notifications on Android Wear</h2>
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700130
Robert Ly50b55d62014-06-29 13:00:11 -0700131<p>Additionally, notifications and their actions are bridged over to Wear devices by default.
132Developers have control to control which notifications from bridging from the phone to the watch
133and vice versa. And developers can control which actions bridge as well. If your app includes
134actions that can't be accomplished with a single tap, either hide these actions on your Wear
135notification or consider hooking them up to a Wear app to allow the user to finish the action on
136their watch.</p>
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700137
Robert Ly939765f2014-06-27 09:25:42 -0700138<h4>Bridging notifications</h4>
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700139
140<p><strong>Notifications that should be bridged</strong></p>
141
142<ul>
Robert Ly939765f2014-06-27 09:25:42 -0700143 <li> New instant messages</li>
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700144</ul>
145
Robert Lye1e35d12014-06-30 12:48:22 -0700146<img src="{@docRoot}preview/images/notifications/WearBasic.png" width="156px" height="156px"
147 alt="" />
148
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700149<p><strong>Don't bridge</strong></p>
150
151<ul>
Robert Ly939765f2014-06-27 09:25:42 -0700152 <li> If a podcasting app has new episodes available for download,
153 keep this notification on the phone.</li>
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700154</ul>
Robert Ly939765f2014-06-27 09:25:42 -0700155
156
Robert Ly50b55d62014-06-29 13:00:11 -0700157
158<h4 style="clear:both">Bridging actions</h4></p>
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700159
160<p><strong>Actions to bridge</strong></p>
161
162<ul>
Robert Ly939765f2014-06-27 09:25:42 -0700163 <li> Single tap actions such as +1, Like, Heart</li>
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700164</ul>
165
166<p><strong>Actions not to bridge</strong></p>
167
168<ul>
Robert Ly939765f2014-06-27 09:25:42 -0700169 <li> Actions that map to features that aren't possible on the watch</li>
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700170</ul>
171
Robert Lye1e35d12014-06-30 12:48:22 -0700172
Robert Ly50b55d62014-06-29 13:00:11 -0700173
Robert Ly939765f2014-06-27 09:25:42 -0700174<p><b>Unique actions to define for Wear</b></p>
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700175
176<ul>
Robert Ly939765f2014-06-27 09:25:42 -0700177 <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 Lyc34fdb72b2014-06-26 02:17:12 -0700181</ul>
Robert Lye1e35d12014-06-30 12:48:22 -0700182
183<img src="{@docRoot}preview/images/notifications/ReplyAction.png" width="156px" height="156px"
184 alt="" />
185
Ricardo Cerverade138272014-07-14 13:37:44 -0700186
Robert Ly939765f2014-06-27 09:25:42 -0700187</div>
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700188
Robert Ly50b55d62014-06-29 13:00:11 -0700189
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700190
Robert Ly939765f2014-06-27 09:25:42 -0700191<h2 style="clear:left">Heads-up Notification</h2>
Robert Ly50b55d62014-06-29 13:00:11 -0700192<div class="figure" style="width:311px">
Robert Ly9e121402014-06-27 10:27:40 -0700193 <img src="{@docRoot}preview/images/notifications/Headsup.png"
Robert Ly50b55d62014-06-29 13:00:11 -0700194 alt="" width="311px" />
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700195 <p class="img-caption">
Robert Ly50b55d62014-06-29 13:00:11 -0700196 Example of a Heads-up notification (incoming phone call, high priority) coming in on top of an
197 immersive app
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700198 </p>
199</div>
200
Robert Ly50b55d62014-06-29 13:00:11 -0700201<p>When notifications with priority set to High (see right) arrives, it is presented to users for a
202short 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
204flagged as High or Max or a full-screen takeover, it gets a HUN in L.</p>
Robert Ly939765f2014-06-27 09:25:42 -0700205
206<p><b>Good examples of Heads-up notifications</b></p>
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700207
208<ul>
Robert Ly939765f2014-06-27 09:25:42 -0700209 <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 Lyc34fdb72b2014-06-26 02:17:12 -0700213</ul>
214
Robert Ly939765f2014-06-27 09:25:42 -0700215<h2 style="clear:both" id="guidelines">Guidelines</h2>
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700216
217
Robert Ly939765f2014-06-27 09:25:42 -0700218<h3 id="MakeItPersonal">Make it personal</h3>
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700219
Robert Ly50b55d62014-06-29 13:00:11 -0700220<p>For notifications of items sent by another person (such as a message or status update), include
221that person's image using setLargeIcon. Also attach information about the person to the
222notification's metadata (see EXTRA_PEOPLE).</p>
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700223
Robert Ly50b55d62014-06-29 13:00:11 -0700224<p>Your notification's main icon will still be shown, so the user can associate it with the icon
225visible in the status bar.</p>
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700226
Robert Lye1e35d12014-06-30 12:48:22 -0700227
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 Ly939765f2014-06-27 09:25:42 -0700235<h3 id="navigate_to_the_right_place">Navigate to the right place</h3>
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700236
Robert Ly50b55d62014-06-29 13:00:11 -0700237<p>When the user touches the body of a notification (outside of the action buttons), open your app
238to the place where the user can view and act upon the data referenced in the notification. In most
239cases this will be the detail view of a single data item such as a message, but it might also be a
240summary view if the notification is stacked (see <em>Stacked notifications</em> below) and
241references multiple items. If in any of those cases the user is taken to a hierarchy level below
242your app's top-level, insert navigation into your app's back stack to allow them to navigate to
243your 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>
245design pattern.</p>
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700246
Robert Ly50b55d62014-06-29 13:00:11 -0700247<h3 id="correctly_set_and_manage_notification_priority">Correctly set and manage notification
248priority</h3>
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700249
Robert Ly50b55d62014-06-29 13:00:11 -0700250<p>Starting with Jelly Bean, Android supported a priority flag for notifications. It allows you to
251influence where your notification will appear in comparison to other notifications and help to make
252sure that users always see their most important notifications first. You can choose from the
253following priority levels when posting a notification:</p>
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700254<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 Ly939765f2014-06-27 09:25:42 -0700265<p><code>MAX</code></p>
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700266</td>
267 <td class="tab1">
Robert Ly50b55d62014-06-29 13:00:11 -0700268<p>Use for critical and urgent notifications that alert the user to a condition that is
269time-critical or needs to be resolved before they can continue with a particular task.</p>
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700270</td>
271 </tr>
272 <tr>
273 <td class="tab1">
Robert Ly939765f2014-06-27 09:25:42 -0700274<p><code>HIGH</code></p>
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700275</td>
276 <td class="tab1">
Robert Ly50b55d62014-06-29 13:00:11 -0700277<p>Use high priority notifications primarily for important communication, such as message or chat
278events with content that is particularly interesting for the user. High priority notifications will get the Heads-Up Notification display starting in L.</p>
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700279</td>
280 </tr>
281 <tr>
282 <td class="tab1">
Robert Ly939765f2014-06-27 09:25:42 -0700283<p><code>DEFAULT</code></p>
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700284</td>
285 <td class="tab1">
Robert Ly50b55d62014-06-29 13:00:11 -0700286<p>The default priority. Keep all notifications that don't fall into any of the other categories at
287this priority level.</p>
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700288</td>
289 </tr>
290 <tr>
291 <td class="tab1">
Robert Ly939765f2014-06-27 09:25:42 -0700292<p><code>LOW</code></p>
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700293</td>
294 <td class="tab1">
Robert Ly50b55d62014-06-29 13:00:11 -0700295<p>Use for notifications that you still want the user to be informed about, but that rate low in
296urgency. LOW notifications will tend to show up at the bottom of the list, which makes them a good
297choice for things like pubic/undirected social updates: the user has asked to be notified about
298them, but they should never take precedence over urgent or direct communication.</p>
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700299</td>
300 </tr>
301 <tr>
302 <td class="tab1">
Robert Ly939765f2014-06-27 09:25:42 -0700303<p><code>MIN</code></p>
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700304</td>
305 <td class="tab1">
Robert Ly50b55d62014-06-29 13:00:11 -0700306<p>Contextual/background information (e.g. weather information, contextual location information).
307Minimum priority notifications will not show in the status bar. The user will only discover them
308when they expand the notification shade.</p>
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700309</td>
310 </tr>
311</table>
312
313
Robert Ly939765f2014-06-27 09:25:42 -0700314<h4 id="how_to_choose_an_appropriate_priority"><strong>How to choose an appropriate
315priority</strong></h4>
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700316
Robert Ly50b55d62014-06-29 13:00:11 -0700317<p>Default, High, and Max priority are interruptive priority levels and risk interrupting the user
Ricardo Cerverade138272014-07-14 13:37:44 -0700318from what they are doing. This should not be taken lightly, so these levels should be reserved
Robert Ly50b55d62014-06-29 13:00:11 -0700319for notifications that:</p>
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700320
321<ul>
Robert Ly939765f2014-06-27 09:25:42 -0700322 <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 Lyc34fdb72b2014-06-26 02:17:12 -0700325</ul>
326
Robert Lye1e35d12014-06-30 12:48:22 -0700327<p>Notifications set to <code>LOW</code> and <code>MIN</code> can still be very valuable for the
328user. Many if not most notifications just don't need to command the user's immediate attention, or
329vibrate the user's wrist, yet contain information that they will find valuable when they choose to
330look for notifications. Criteria for <code>LOW</code> and <code>MIN</code> priority notifications:</p>
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700331
332<ul>
Robert Ly939765f2014-06-27 09:25:42 -0700333 <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 Lyc34fdb72b2014-06-26 02:17:12 -0700336</ul>
337
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700338
Robert Ly9e121402014-06-27 10:27:40 -0700339 <img src="{@docRoot}preview/images/notifications/notifications_pattern_priority.png"
Robert Ly939765f2014-06-27 09:25:42 -0700340 alt="" width="700"/>
341
342
343<h3 style="clear:both" id="set_a_notification_category">Set a notification category</h3>
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700344
Robert Ly50b55d62014-06-29 13:00:11 -0700345<p>If your notification falls into one of the predefined categories (see below), assign it
346accordingly. Aspects of the system UI such as the notification shade (or any other notification
347listener) may use this information to make ranking and filtering decisions.</p>
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700348<table>
349 <tr>
350 <td>
Robert Ly939765f2014-06-27 09:25:42 -0700351<p><code>Notification.CATEGORY_CALL</code></p>
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700352</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 Ly939765f2014-06-27 09:25:42 -0700359<p><code>Notification.CATEGORY_MESSAGE</code></p>
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700360</td>
361 <td>
362<p>Incoming direct message (SMS, instant message, etc.)</p>
363</td>
364 </tr>
365 <tr>
366 <td>
Robert Ly939765f2014-06-27 09:25:42 -0700367<p><code>Notification.CATEGORY_EMAIL</code></p>
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700368</td>
369 <td>
370<p>Asynchronous bulk message (email)</p>
371</td>
372 </tr>
373 <tr>
374 <td>
Robert Ly939765f2014-06-27 09:25:42 -0700375<p><code>Notification.CATEGORY_EVENT</code></p>
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700376</td>
377 <td>
378<p>Calendar event</p>
379</td>
380 </tr>
381 <tr>
382 <td>
Robert Ly939765f2014-06-27 09:25:42 -0700383<p><code>Notification.CATEGORY_PROMO</code></p>
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700384</td>
385 <td>
386<p>Promotion or advertisement</p>
387</td>
388 </tr>
389 <tr>
390 <td>
Robert Ly939765f2014-06-27 09:25:42 -0700391<p><code>Notification.CATEGORY_ALARM</code></p>
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700392</td>
393 <td>
394<p>Alarm or timer</p>
395</td>
396 </tr>
397 <tr>
398 <td>
Robert Ly939765f2014-06-27 09:25:42 -0700399<p><code>Notification.CATEGORY_PROGRESS</code></p>
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700400</td>
401 <td>
402<p>Progress of a long-running background operation</p>
403</td>
404 </tr>
405 <tr>
406 <td>
Robert Ly939765f2014-06-27 09:25:42 -0700407<p><code>Notification.CATEGORY_SOCIAL</code></p>
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700408</td>
409 <td>
410<p>Social network or sharing update</p>
411</td>
412 </tr>
413 <tr>
414 <td>
Robert Ly939765f2014-06-27 09:25:42 -0700415<p><code>Notification.CATEGORY_ERROR</code></p>
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700416</td>
417 <td>
418<p>Error in background operation or authentication status</p>
419</td>
420 </tr>
421 <tr>
422 <td>
Robert Ly939765f2014-06-27 09:25:42 -0700423<p><code>Notification.CATEGORY_TRANSPORT</code></p>
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700424</td>
425 <td>
426<p>Media transport control for playback</p>
427</td>
428 </tr>
429 <tr>
430 <td>
Robert Ly939765f2014-06-27 09:25:42 -0700431<p><code>Notification.CATEGORY_SYSTEM</code></p>
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700432</td>
433 <td>
434<p>System or device status update. Reserved for system use.</p>
435</td>
436 </tr>
437 <tr>
438 <td>
Robert Ly939765f2014-06-27 09:25:42 -0700439<p><code>Notification.CATEGORY_SERVICE</code></p>
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700440</td>
441 <td>
442<p>Indication of running background service</p>
443</td>
444 </tr>
445 <tr>
446 <td>
Robert Ly939765f2014-06-27 09:25:42 -0700447<p><code>Notification.CATEGORY_RECOMMENDATION</code></p>
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700448</td>
449 <td>
Robert Ly50b55d62014-06-29 13:00:11 -0700450<p>A specific, timely recommendation for a single thing. For example, a news app might want to
451recommend a news story it believes the user will want to read next.</p>
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700452</td>
453 </tr>
454 <tr>
455 <td>
Robert Ly939765f2014-06-27 09:25:42 -0700456<p><code>Notification.CATEGORY_STATUS</code></p>
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700457</td>
458 <td>
459<p>Ongoing information about device or contextual status</p>
460</td>
461 </tr>
462</table>
463
Robert Ly939765f2014-06-27 09:25:42 -0700464<h3 id="summarize_your_notifications">Summarize your notifications</h3>
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700465
Robert Ly50b55d62014-06-29 13:00:11 -0700466<p>If your app creates a notification while another of the same type is still pending, avoid
467creating an altogether new notification object. Instead, turn it into a summary notification for
468the app.</p>
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700469
Robert Ly50b55d62014-06-29 13:00:11 -0700470<p>A summary notification builds a summary description and allows the user to understand how many
471notifications of a particular kind are pending.</p>
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700472
Robert Ly939765f2014-06-27 09:25:42 -0700473<div class="col-6">
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700474
Robert Lye1e35d12014-06-30 12:48:22 -0700475<p><strong>Don't</strong></p>
Robert Ly9e121402014-06-27 10:27:40 -0700476 <img src="{@docRoot}preview/images/notifications/Summarise_Dont.png"
Robert Ly50b55d62014-06-29 13:00:11 -0700477 alt="" width="311px" />
Robert Ly939765f2014-06-27 09:25:42 -0700478</div>
479
Robert Ly50b55d62014-06-29 13:00:11 -0700480<div>
Robert Ly939765f2014-06-27 09:25:42 -0700481<p><strong>Do</strong></p>
482
Robert Ly9e121402014-06-27 10:27:40 -0700483 <img src="{@docRoot}preview/images/notifications/Summarise_Do.png"
Robert Ly50b55d62014-06-29 13:00:11 -0700484 alt="" width="311px"/>
Robert Ly939765f2014-06-27 09:25:42 -0700485</div>
486
Robert Lye1e35d12014-06-30 12:48:22 -0700487<p style="clear:left; padding-top:30px; padding-bottom:20px">You can provide more detail about the individual notifications that make up a
Robert Ly50b55d62014-06-29 13:00:11 -0700488 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 Lye1e35d12014-06-30 12:48:22 -0700492 <img src="{@docRoot}preview/images/notifications/Stack.png" style="margin-bottom:20px"
Robert Ly50b55d62014-06-29 13:00:11 -0700493 alt="" width="311px" />
Robert Ly939765f2014-06-27 09:25:42 -0700494 <p class="img-caption">
495 Expanded and contracted notification that is a summary (using InboxStyle)
496 </p>
Robert Ly50b55d62014-06-29 13:00:11 -0700497</div>
Robert Ly939765f2014-06-27 09:25:42 -0700498
Robert Ly50b55d62014-06-29 13:00:11 -0700499<h3 style="clear:both" id="make_notifications_optional">Make notifications optional</h3>
Robert Ly939765f2014-06-27 09:25:42 -0700500
Ricardo Cerverade138272014-07-14 13:37:44 -0700501<p>Users should always be in control of notifications. Allow the user to disable your app's
Robert Ly939765f2014-06-27 09:25:42 -0700502notifications or change their alert properties, such as alert sound and whether to use vibration,
503by 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
507notifications are currently pending.</p>
508
509<div class="figure">
Robert Ly9e121402014-06-27 10:27:40 -0700510 <img src="{@docRoot}preview/images/notifications/ProductIcons.png"
Robert Ly939765f2014-06-27 09:25:42 -0700511 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 Lyc34fdb72b2014-06-26 02:17:12 -0700531<p>Use color to distinguish your app from others. Notification icons should only be a white-on-transparent background image.</p>
532
Robert Ly939765f2014-06-27 09:25:42 -0700533
534<h3 id="pulse_the_notification_led_appropriately">Pulse the notification LED appropriately</h3>
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700535
Robert Ly50b55d62014-06-29 13:00:11 -0700536<p>Many Android devices contain a notification LED, which is used to keep the user informed about
537events while the screen is off. Notifications with a priority level of MAX, HIGH, or DEFAULT should
Robert Lye1e35d12014-06-30 12:48:22 -0700538cause the LED to glow, while those with lower priority (<code>LOW</code> and <code>MIN</code>) should not.</p>
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700539
Robert Ly50b55d62014-06-29 13:00:11 -0700540<p>The user's control over notifications should extend to the LED. When you use DEFAULT_LIGHTS, the
541LED will glow with a white color. Your notifications shouldn't use a different color unless the
542user has explicitly customized it.</p>
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700543
Robert Ly939765f2014-06-27 09:25:42 -0700544<h2 id="building_notifications_that_users_care_about">Building notifications that users care about</h2>
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700545
Robert Ly50b55d62014-06-29 13:00:11 -0700546<p>To create an app that users love, it is important to design your notifications carefully.
547Notifications embody your app's voice, and contribute to your app's personality. Unwanted or
548unimportant notifications can annoy the user or make them resent how much attention the app wants
549from them, so use notifications judiciously.</p>
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700550
Robert Ly939765f2014-06-27 09:25:42 -0700551<h3 id="when_to_display_a_notification">When to display a notification</h3>
Robert Lye1e35d12014-06-30 12:48:22 -0700552
Robert Ly50b55d62014-06-29 13:00:11 -0700553<p>To create an application that people enjoy using, it's important to recognize that the user's
554attention and focus is a resource that must be protected. While Android's notification system has
555been designed to minimize the impact of notifications on the user's attention, it is nonetheless
556still important to be aware of the fact that notifications are interrupting the user's task flow.
557As 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 Lye1e35d12014-06-30 12:48:22 -0700558the notifications priority flag to <code>LOW</code> or <code>MIN</code> to avoid distracting the user while they are doing
Robert Ly50b55d62014-06-29 13:00:11 -0700559something else.</p>
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700560
Robert Lye1e35d12014-06-30 12:48:22 -0700561 <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 Lyc34fdb72b2014-06-26 02:17:12 -0700567<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 Ly50b55d62014-06-29 13:00:11 -0700569<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 Lyc34fdb72b2014-06-26 02:17:12 -0700574
Robert Ly939765f2014-06-27 09:25:42 -0700575<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 Ly9e121402014-06-27 10:27:40 -0700578 <img src="{@docRoot}preview/images/notifications/AntiSample1.png"
Robert Ly50b55d62014-06-29 13:00:11 -0700579 alt="" width="311px" />
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700580</div>
581
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700582<p>There are however many other cases where notifications should not be used:</p>
583
584<ul>
Robert Ly50b55d62014-06-29 13:00:11 -0700585 <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 Lyc34fdb72b2014-06-26 02:17:12 -0700601</ul>
602
Robert Ly939765f2014-06-27 09:25:42 -0700603<h2 style="clear:left" id="interacting_with_notifications">Interacting With Notifications</h2>
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700604
Robert Ly50b55d62014-06-29 13:00:11 -0700605<p>Notifications are indicated by icons in the status bar and can be accessed by opening the
606notification drawer.</p>
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700607
Robert Ly50b55d62014-06-29 13:00:11 -0700608<p>Touching a notification opens the associated app to detailed content matching the notification.
609Swiping left or right on a notification removes it from the list.</p>
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700610
Robert Ly939765f2014-06-27 09:25:42 -0700611<h3 id="ongoing_notifications">Ongoing notifications</h3>
Robert Ly50b55d62014-06-29 13:00:11 -0700612<div class="figure" style="width:311px">
Robert Ly9e121402014-06-27 10:27:40 -0700613 <img src="{@docRoot}preview/images/notifications/MusicPlayback.png"
Robert Ly50b55d62014-06-29 13:00:11 -0700614 alt="" width="311px" />
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700615 <p class="img-caption">
Robert Ly939765f2014-06-27 09:25:42 -0700616 Ongoing notification due to music playback
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700617 </p>
618</div>
Robert Ly50b55d62014-06-29 13:00:11 -0700619<p>Ongoing notifications keep users informed about an ongoing process in the background.
620For example, music players announce the currently playing track in the notification system and
621continue to do so until the user stops the playback. They can also be used to show the user
622feedback for longer tasks like downloading a file, or encoding a video. Ongoing notifications
623cannot be manually removed from the notification drawer.</p>
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700624
Robert Ly50b55d62014-06-29 13:00:11 -0700625<p>The L lockscreen doesn't show transport controls for RCC (RemoteControlClient)s anymore. But the
626lockscreen <em>does</em> show notifications, so each app's playback notification is now the primary
627way for users to control playback from a locked state. This gives apps more control over which
628buttons to show and in what way, while providing a consistent experience for the user whether on
629the lockscreen or unlocked.</p>
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700630
Robert Ly939765f2014-06-27 09:25:42 -0700631<h3 style="clear:both" id="dialogs_and_toasts_are_for_feedback_not_notification">Dialogs
632and toasts are for feedback not notifications</h3>
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700633
Robert Ly50b55d62014-06-29 13:00:11 -0700634<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.
636For further guidance on the use of dialogs and toasts, refer to
637<a href="/design/patterns/confirming-acknowledging.html">Confirming & Acknowledging</a>.</p>
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700638
Robert Ly939765f2014-06-27 09:25:42 -0700639<h3>Ranking and Ordering</h3>
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700640
Robert Ly50b55d62014-06-29 13:00:11 -0700641<p>Notifications are "news" and so they are essentially shown in reverse-chronological order, with
642special consideration given to the app's stated notification priority.</p>
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700643
Robert Ly50b55d62014-06-29 13:00:11 -0700644<p>In L, notifications are now a key part of the lockscreen, and are featured prominently every
645time the device display comes on. Because space on the lockscreen is tight, it is more important
646than ever to identify the most urgent or relevant notifications.</p>
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700647
648<p>Therefore, L has a more sophisticated sorting algorithm for notifications, taking into account:</p>
649
650<ul>
Robert Ly50b55d62014-06-29 13:00:11 -0700651 <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 Lyc34fdb72b2014-06-26 02:17:12 -0700657</ul>
658
Robert Ly50b55d62014-06-29 13:00:11 -0700659<p>To best take advantage of this sorting, developers should focus on the user experience they want
660to create rather than aiming for any particular spot on the list.</p>
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700661
Robert Ly9e121402014-06-27 10:27:40 -0700662 <img src="{@docRoot}preview/images/notifications/AntiSample3.png"
Robert Ly939765f2014-06-27 09:25:42 -0700663 alt="" width="700px" />
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700664
Robert Lye1e35d12014-06-30 12:48:22 -0700665 <p class="img-caption" style="margin-top:10px">Gmail notifications are default priority, so they
Robert Ly50b55d62014-06-29 13:00:11 -0700666 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 Lyc34fdb72b2014-06-26 02:17:12 -0700668 </p>
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700669
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700670
Robert Ly939765f2014-06-27 09:25:42 -0700671<h3>On the lockscreen</h3>
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700672
Robert Ly50b55d62014-06-29 13:00:11 -0700673<p>Starting in L, notifications are visible on the lockscreen, and so we must consider the user's
674privacy. Notifications often contain sensitive information, and we must take care when showing it to
675anyone who picks up the device and turns on the display.</p>
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700676
677<ul>
Robert Ly50b55d62014-06-29 13:00:11 -0700678 <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 Lyc34fdb72b2014-06-26 02:17:12 -0700684</ul>
685
Robert Ly939765f2014-06-27 09:25:42 -0700686<h3>The user decides what shows on the secure lockscreen</h3>
Robert Ly50b55d62014-06-29 13:00:11 -0700687<div class="figure" style="width:311px">
Robert Ly9e121402014-06-27 10:27:40 -0700688 <img src="{@docRoot}preview/images/notifications/LockScreen.png"
Robert Ly50b55d62014-06-29 13:00:11 -0700689 alt="" width="311px" />
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700690 <p class="img-caption">
Robert Ly939765f2014-06-27 09:25:42 -0700691 Notifications on the lockscreen followed by the Pattern Unlock when the user attempts to unlock the phone.
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700692 </p>
693</div>
694
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700695<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 Ly50b55d62014-06-29 13:00:11 -0700696<p> To control the visibility level, call
697<code>Notification.Builder.setVisibility()</code> and specify one of these values:</p>
Robert Lyc34fdb72b2014-06-26 02:17:12 -0700698
699<ul>
Robert Ly50b55d62014-06-29 13:00:11 -0700700 <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 Lyc34fdb72b2014-06-26 02:17:12 -0700703 <ul>
Robert Ly50b55d62014-06-29 13:00:11 -0700704 <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 Lyc34fdb72b2014-06-26 02:17:12 -0700705 <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 Ly939765f2014-06-27 09:25:42 -0700706 <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 Lyc34fdb72b2014-06-26 02:17:12 -0700707 </ul>
Robert Ly50b55d62014-06-29 13:00:11 -0700708 </li>
709 <li><code>Notification.VISIBILITY_SECRET</code>. Shows only the most minimal information, excluding even the notification's icon.</li>
Robert Ly939765f2014-06-27 09:25:42 -0700710</ul>