diff options
41 files changed, 473 insertions, 342 deletions
diff --git a/Android.mk b/Android.mk index 8fdcea2f8dff..a8e072c69b59 100644 --- a/Android.mk +++ b/Android.mk @@ -535,6 +535,7 @@ framework_docs_LOCAL_DROIDDOC_OPTIONS := \ -since $(SRC_API_DIR)/17.txt 17 \ -since $(SRC_API_DIR)/18.txt 18 \ -since $(SRC_API_DIR)/19.txt 19 \ + -since $(SRC_API_DIR)/20.txt 20 \ -werror -hide 113 \ -overview $(LOCAL_PATH)/core/java/overview.html diff --git a/docs/html/design/downloads/index.jd b/docs/html/design/downloads/index.jd index 5ad8780a7608..0452fabc850d 100644 --- a/docs/html/design/downloads/index.jd +++ b/docs/html/design/downloads/index.jd @@ -90,19 +90,19 @@ modify to match your theme, plus source files.</p> </div> <div class="layout-content-col span-4"> <a class="download-button" onClick="_gaq.push(['_trackEvent', 'Design', 'Download', 'Wear Toolkit AI']);" - href="{@docRoot}downloads/design/Android_Design_Stencils_Sources_20131106.zip">Adobe® Illustrator® Toolkit</a> + href="{@docRoot}downloads/design/Android_Wear_Toolkit_20140626.ai">Adobe® Illustrator® Toolkit</a> <a class="download-button" onClick="_gaq.push(['_trackEvent', 'Design', 'Download', 'Wear Toolkit PDF']);" - href="{@docRoot}downloads/design/Android_Design_Stencils_Sources_20131106.zip">PDF Toolkit</a> + href="{@docRoot}downloads/design/Android_Wear_Toolkit_20140626.pdf">PDF Toolkit</a> </div> </div> + <div class="layout-content-row"> <div class="layout-content-col span-5"> - <h4>Sample app user flows</h4> -<p>Examples of how to chain together simple Android Wear UI components into common user flows, from simple notifications to complex interactions involving full screen activities. + <h4>Sample user flow patterns</h4> +<p>Examples of how to chain together simple Android Wear UI components into common user flow patterns, from simple notifications to complex interactions involving full screen activities. </p> - </div> <div class="layout-content-col span-4"> @@ -110,13 +110,14 @@ modify to match your theme, plus source files.</p> </div> <div class="layout-content-col span-4"> - <a class="download-button" onClick="_gaq.push(['_trackEvent', 'Design', 'Download', 'Wear Sample Flows AI']);" - href="{@docRoot}downloads/design/Android_Design_Stencils_Sources_20131106.zip">Adobe® Illustrator® App Flows</a> - <a class="download-button" onClick="_gaq.push(['_trackEvent', 'Design', 'Download', 'Wear Sample Flows PDF']);" - href="{@docRoot}downloads/design/Android_Design_Stencils_Sources_20131106.zip">PDF App Flows</a> + <a class="download-button" onClick="_gaq.push(['_trackEvent', 'Design', 'Download', 'Wear App Patterns AI']);" + href="{@docRoot}downloads/design/Android_Wear_Patterns_20140626.ai">Adobe® Illustrator® App Patterns</a> + <a class="download-button" onClick="_gaq.push(['_trackEvent', 'Design', 'Download', 'Wear App Patterns PDF']);" + href="{@docRoot}downloads/design/Android_Wear_Patterns_20140626.pdf">PDF App Patterns</a> </div> </div> + <div class="layout-content-row"> <div class="layout-content-col span-5"> <h4>Sample app design mocks</h4> diff --git a/docs/html/design/media/wear/2d_picker_indicated.png b/docs/html/design/media/wear/2d_picker_indicated.png Binary files differindex d31c099da2f8..eee5305809ec 100644 --- a/docs/html/design/media/wear/2d_picker_indicated.png +++ b/docs/html/design/media/wear/2d_picker_indicated.png diff --git a/docs/html/design/media/wear/appstructuresample.png b/docs/html/design/media/wear/appstructuresample.png Binary files differindex 0e5b86f51fa3..c80fdffbe814 100644 --- a/docs/html/design/media/wear/appstructuresample.png +++ b/docs/html/design/media/wear/appstructuresample.png diff --git a/docs/html/design/media/wear/biggesture.png b/docs/html/design/media/wear/biggesture.png Binary files differindex 6c6f0cdb286b..a062561ea053 100644 --- a/docs/html/design/media/wear/biggesture.png +++ b/docs/html/design/media/wear/biggesture.png diff --git a/docs/html/design/wear/structure.jd b/docs/html/design/wear/structure.jd index 67b218a256d9..a7b523290f0e 100644 --- a/docs/html/design/wear/structure.jd +++ b/docs/html/design/wear/structure.jd @@ -1,31 +1,39 @@ page.title=App Structure for Android Wear @jd:body +<style> +ol.inline-list { + margin:0 0 20px 0; +} +ol.inline-list li { +display: block; +float:left; +width: 162px; +margin: 0 10px 20px 20px; +} +</style> <p>Users are used to tapping icons to launch apps. Android Wear is different. A typical Wear app adds a card to the stream at a contextually relevant moment. It might have a button that opens a full screen view for a fast micro interaction, like below, but it just as well might not. </p> -<img src="{@docRoot}design/media/wear/appstructuresample.png" alt="" /> - <p>These are the building blocks, ordered by simplicity. You can use one of them or some of them, but we strongly recommend not building apps the user has to launch and quit before thinking really hard about how you could react to a specific location, activity, time of day, or something happening in the cloud.</p> <ul> <li><strong>Contextual card in the stream</strong>: <ul> - <li><a href="#Bridged"><strong>Bridged notifications</strong></a> are pushed to the wearable from the connected handheld such as new message notifications, using standard Android notifications. These require little or no code on the wearable. - <li><a href="#Contextual"><strong>Contextual notifications</strong></a> are generated locally on the wearable and appear at contextually relevant moments such as an exercise card that appears when you’re going on a run. You can do more with this kind of card than with a notification bridged from the handheld. + <li><a href="#Bridged"><strong>Bridged notifications</strong></a>, such as new message notifications, are pushed to the wearable from the connected handheld using standard Android notifications. They require very little or no Wear-specific code. + <li><a href="#Contextual"><strong>Contextual notifications</strong></a>, such as an exercise card that appears when you begin running, are generated locally on the wearable and appear at contextually relevant moments. You can do more with this kind of card than with a notification bridged from the handheld. </ul> </li> <li><strong>Full screen UI app</strong>: <ul> - <li><a href="#2DPicker"><strong>2D Picker</strong></a> is design pattern that allows the user to select from a set of items, such as choosing artists and then albums. We recommend using this pre-built component from the SDK whenever relevant. - <li><a href="#Custom"><strong>Custom layouts</strong></a> are also possible where apps need to extend beyond the basic card/stream metaphor.</li> + <li><a href="#2DPicker"><strong>2D Picker</strong></a> is design pattern that allows the user to select from a set of items, such as to select an artist then an album. We recommend using this pre-built component from the SDK whenever relevant. + <li><a href="#Custom"><strong>Custom layouts</strong></a> are also possible where apps need to extend beyond the basic card/stream metaphor, such as to present a graph or map.</li> </ul> </li> </ul> -<p>Many applications will consist of a combination of these views, possibly with connections between them. For example, a contextual card may have an action that launches a more immersive experience. Inversely, an immersive experience may result in a card being added to the stream.</p> <h2 id="Bridged">Bridged Notifications</h2> @@ -49,13 +57,21 @@ page.title=App Structure for Android Wear <img src="{@docRoot}design/media/wear/context_workout.png" width="323" height="147" style="float:right;margin:0 0 20px 40px;clear:right" alt="" /> <img src="{@docRoot}design/media/wear/context_lights.png" width="323" height="147" style="float:right;margin:0 0 20px 40px;clear:right" alt="" /> -<p>This is what Android Wear does best; showing users information just when they need it.</p> +<p>This is what Android Wear does best: showing users information and functionality just when they need it.</p> -<p>Here’s how it works: Your app knows when it is relevant for the user, and when it happens, you trigger a contextual notification. Maybe you’re building a running app that’s relevant when the user is running. Maybe it’s a museum guide that’s relevant when the user is visiting a particular museum. Check out the design principles for more on thinking about your app contextually. </p> +<p>Here’s how it works: Your app knows when it is relevant for the user. When the appropriate event occurs, the app triggers a notification. Maybe you’re building a running app that’s relevant when the user is running. Maybe it’s a museum guide that’s relevant when the user is visiting your museum. Check out the <a href="{@docRoot}design/wear/principles.html">design principles</a> for more about how to make your app contextual. </p> <p>Getting contextual triggering right is one of the most impactful things you can do to craft a great user experience. </p> -<p>The easiest way to do this is to use standard templates for Android notifications. If you decide to make your own ActivityView, we strongly recommend you take a look at the <a href="{@docRoot}design/wear/style.html">Style</a> guide to make sure you stay consistent with the rest of the device. </p> +<p>The easiest way to do this is to use standard templates for Android notifications. But you can also make your own layout from scratch with an <a href="{@docRoot}guide/components/activities.html">activity</a> inside a card. If you decide to do this, we strongly recommend you take a look at the <a href="{@docRoot}design/wear/style.html">Style</a> guide to make sure you stay consistent with the rest of the device. </p> + + +<a class="notice-developers" style="clear:none" href="{@docRoot}training/wearables/apps/layouts.html"> + <div> + <h3>Developer Docs</h3> + <p>Creating Custom Layouts</p> + </div> +</a> <p>Don’t forget to test your triggering thoroughly. Triggering too often can be so annoying that users might end up blocking all your notifications. </p> @@ -63,7 +79,7 @@ page.title=App Structure for Android Wear <h2 id="2DPicker">2D Picker</h2> -<p>The 2D Picker design pattern (available as the <a href="{@docRoot}training/wearables/apps/layouts.html#UiLibrary">GridViewPager component</a>) is useful for showing a range of options or asking a user to make a quick selection. Google search results on Android Wear are a great example of the GridViewPager pattern in action.</p> +<p>The 2D Picker design pattern (available as the <a href="{@docRoot}training/wearables/apps/layouts.html#UiLibrary"><code>GridViewPager</code> component</a>) is useful for showing options in a list. Google search results are a great example of this pattern in action.</p> <img src="{@docRoot}design/media/wear/1D_picker.png" alt="" width="499px" /> <p class="img-caption">This pattern can be used to present a single vertical list, or a “1D Picker”</p> @@ -72,28 +88,30 @@ page.title=App Structure for Android Wear <p class="img-caption">It can also be used as a 2D matrix of options, as a way of presenting categorized options.</p> -<img src="{@docRoot}design/media/wear/2d_picker_indicated.png" alt="" width="760px" /> -<p class="img-caption">Navigation should be vertical-then-horizontal, not horizontal-then-vertical, and limit the the vertical set to around five cards.</p> - <h3>Actions</h3> -<p>For actions on each cards, use the <a href="{@docRoot}design/wear/patterns.html#Actions">Action cards pattern</a>.</p> +<p>For actions on each card, use the <a href="{@docRoot}design/wear/patterns.html#Actions">Action cards pattern</a>.</p> +<h3>Making it fast</h3> -<h3>Exiting</h3> -<p>2D Picker should be automatically dismissed when a selection is made. It may also be exited by swiping back down on the first card, or by swiping left to right on a leftmost card.</p> +<div class="figure" style="width:350px"> +<img src="{@docRoot}design/media/wear/2d_picker_indicated.png" alt="" width="350" /> +<p class="img-caption">Navigation should be vertical-then-horizontal, not horizontal-then-vertical, and limit the the vertical set to about five cards.</p> +</div> -<h3>Making it fast</h3> -<p>A few of our favorite tips on how to make the 2D picker really fast for your users:</p> +<p>Here are a few of our favorite tips about how to make the 2D picker really fast for your users:</p> <ul> <li>Minimize the number of cards</li> <li>Show the most popular card at the top </li> <li>Keep the cards extremely simple</li> <li>Optimize for speed over customization</li> - </ul> +<h3>Exiting</h3> +<p>Your app should dismiss the 2D picker when the user makes a selection. Users should also be able to exit by swiping the first card down, or swiping left to right on a left-most card.</p> + + <h2 id="Custom">Breaking out of the card (with custom layouts)</h2> @@ -104,26 +122,39 @@ page.title=App Structure for Android Wear </div> </a> -<p>There are some things you can’t do on a card. Swiping in many directions on a map or a joystick are a few examples. In those cases it might be good idea to momentarily go full screen.</p> +<p>There are some things you can’t do on a card. Swiping in many directions on a map or controlling a game with a joystick are a couple examples. In those cases it might be good idea to <em>momentarily</em> go full screen.</p> -<img src="{@docRoot}design/media/wear/customlayout.png" alt="" width="760px" /> +<p>A typical user experience with a full screen app on Android Wear looks like this:</p> + +<img src="{@docRoot}design/media/wear/appstructuresample.png" alt="" /> + +<ol class="inline-list"> + <li>Your contextual card enters the stream. + <li>The user taps the card action. + <li>A full screen activity opens for a micro interaction. + <li style="margin-right:0">The activity quits and the user returns to the stream. +</ol> <h3>When to go full screen</h3> -<p>We highly recommend only going full screen when you can’t do what you want on a card, and quickly exit back to the stream the moment you’re done. That way your app will feel like an integrated part of the system.</p> +<p>We highly recommend going full screen only when you can’t do what you want on a card, and quickly exit back to the stream the moment the user is done with the micro interaction. This will make your app will feel like an integrated part of the system. Android Wear itself uses full screen for voice replies and the stopwatch.</p> + +<h3>Making it distinct</h3> -<h3>Be distinct</h3> -<p>Your full screen design shouldn’t look too much like the card stream or it could confuse users. The 2D picker is always available if you need a card-like UI.</p> +<p>Your full screen design shouldn’t look too much like the card stream as it could confuse users. If you do need a card-like UI, the <a +href="#2DPicker">2D picker</a> is always available.</p> <h3>Automatically exiting</h3> -<p>Many devices don’t have back or home buttons, so exiting is your responsibility as the app designer. Here’s a few examples of natural exits:</p> + +<p>Many devices don’t have back or home buttons, so exiting is something you have to think about. Here are a few examples of natural ways to exit:</p> <ul> - <li>A map that asks the user to drop a pin should exit when it happens</li> - <li>A short game can exit when the game finishes</li> + <li>A map that asks the user to drop a pin should exit when the pin is dropped.</li> + <li>A short game can exit when the game finishes.</li> <li>A drawing app can finish after 5 seconds of inactivity.</li> </ul> <h3>Manually exiting</h3> -<p>Even with logical exit points like these, some cases may exist where the user may want to immediately exit. This may be common in apps that are used for a longer while. In all cases, the developer should present the option to quit the app on long press using -<a href="{@docRoot}training/wearables/apps/layouts.html#UiLibrary"><code>DismissOverlayView</code></a>. Your design should reserve long press for the sole purpose of prompting to quit.</p> + +<p>Even with logical exit points like these, some cases may exist where the user may want to immediately exit. This may be common in apps that are used for a longer while. In all cases, you should treat long-press as the user's intent to exit, using +<a href="{@docRoot}training/wearables/apps/layouts.html#UiLibrary"><code>DismissOverlayView</code></a>.</p> diff --git a/docs/html/preview/google-play-services-wear.html b/docs/html/preview/google-play-services-wear.html index 2f93a7fc165a..84647b7e18a5 100644 --- a/docs/html/preview/google-play-services-wear.html +++ b/docs/html/preview/google-play-services-wear.html @@ -38,30 +38,29 @@ devices, which will degrade your apps’ user experience. We’ll publish an upd <p>If you attended Google I/O, your registered Google account is automatically whitelisted for these preview resources. You're done! Head to Step 2.</p> -<p><stong><em>If you didn't attend Google I/O</em></strong> or want to use a different account, -click following link to -<a href="https://groups.google.com/group/io14androidweardev/subscribe" target="_blank">join -the Google Group</a> and get whitelisted.</p> +<p><strong><em>If you didn't attend Google I/O</em></strong> or want to use a different account, +click following link to and get whitelisted.</p> + +<a style="font-size:24px" href="https://groups.google.com/group/io14androidweardev/subscribe" target="_blank"> +Join the Preview Group</a> <h2 style="margin-bottom: 0px;">2. Download Required Apps</h2><hr> -<p>You'll need the following apps to get the most out of Android Wear:</p> +<p>You'll need the following apps to get the most out of Android Wear. You must be whitelisted +in the Preview Group above and you must install these apps in this exact order:</p> -<ul> +<ol> <li><a href="https://play.google.com/apps/testing/com.google.android.gms">Google Play services</a>: Allows your Android Wear device to communicate with your handheld device. This is required to use the Android Wear app and other apps listed below.</li> + <li><a href="https://play.google.com/apps/testing/com.google.android.googlequicksearchbox">Google + Search</a>: Enables searches from Android Wear</li> <li><a href="https://play.google.com/apps/testing/com.google.android.wearable.app">Android Wear Companion</a>: The app for pairing a handheld to a wearable and providing syncing of notifications and data </li> - <li><a href="https://play.google.com/apps/testing/com.google.android.googlequicksearchbox">Google - Search</a>: Enables searches from Android Wear</li> - <li><a href="https://play.google.com/apps/testing/com.google.android.keep">Google Keep</a>: - Supports the "Take a note" command</li> - <li><a href="https://play.google.com/apps/testing/com.google.samples.apps.iosched">Google I/O - 2014</a>: - Supports session feedback from Android Wear</li> - </ul> + <p class="note"><b>Note:</b> After becoming a tester, it can take up to 1 hour to get access to + the preview versions of these apps.</p> + </ol> <p>To obtain these apps from Google Play, click each app link above and follow these instructions, preferably from your mobile browser:</p> @@ -72,9 +71,22 @@ preferably from your mobile browser:</p> <li>Click the <b>Download <app name> from the Play Store</b> link to go to Google Play Store download page to get the app. The following screenshot shows how the opt-in process looks like: -<img style="margin-top:40px" src="/preview/images/opt-in.png"></li> +<img style="margin-top:40px" src="/preview/images/opt-in.png" /></li> </ol> -<h2 style="margin-bottom: 0px;">3. Start Building</h2><hr> + +<h2>3. Download Optional Apps</h2> +<p>Please join the Test Group and install the following apps to enhance your Android Wear experience: +</p> + +<ol> + <li><a href="https://play.google.com/apps/testing/com.google.android.keep">Google Keep</a>: + Supports the "Take a note" command</li> + <li><a href="https://play.google.com/apps/testing/com.google.samples.apps.iosched">Google I/O + 2014</a>: + Supports session feedback from Android Wear</li> + </ol> + +<h2 style="margin-bottom: 0px;">4. Start Building</h2><hr> <p>The Google Play services SDK is required if you want to sync and send data between wearable and handheld devices. To get the new SDK that is compatible with the Google Play services @@ -82,7 +94,8 @@ APK that you just installed, follow these steps: </p> <p class="note"><b>Note:</b> Android Studio is required for Wear development.</p> <ol> - <li>Start AVD Manager.</li> + <li><a href="/sdk/installing/studio.html">Download and install Android Studio</a></li> + <li>Start SDK Manager.</li> <li>Update the Android SDK Tools and Platform-tools to versions 23 and 20 respectively.</li> <li>Click <b>Tools > Manage Add-on Sites > User Defined Sites</b>.</li> <li>Click <b>New</b>, enter diff --git a/docs/html/preview/images/notifications/Action.png b/docs/html/preview/images/notifications/Action.png Binary files differdeleted file mode 100644 index de584a331fb3..000000000000 --- a/docs/html/preview/images/notifications/Action.png +++ /dev/null diff --git a/docs/html/preview/images/notifications/AntiSample1.png b/docs/html/preview/images/notifications/AntiSample1.png Binary files differindex 2cb54117e217..b06c644df6dd 100644 --- a/docs/html/preview/images/notifications/AntiSample1.png +++ b/docs/html/preview/images/notifications/AntiSample1.png diff --git a/docs/html/preview/images/notifications/AntiSample3.png b/docs/html/preview/images/notifications/AntiSample3.png Binary files differindex 5780583277d2..df5f4e7d6131 100644 --- a/docs/html/preview/images/notifications/AntiSample3.png +++ b/docs/html/preview/images/notifications/AntiSample3.png diff --git a/docs/html/preview/images/notifications/Basic.png b/docs/html/preview/images/notifications/Basic.png Binary files differdeleted file mode 100644 index 4ce21c481d78..000000000000 --- a/docs/html/preview/images/notifications/Basic.png +++ /dev/null diff --git a/docs/html/preview/images/notifications/Expanded.png b/docs/html/preview/images/notifications/Expanded.png Binary files differdeleted file mode 100644 index 9ca260b5c929..000000000000 --- a/docs/html/preview/images/notifications/Expanded.png +++ /dev/null diff --git a/docs/html/preview/images/notifications/ExpandedImage.png b/docs/html/preview/images/notifications/ExpandedImage.png Binary files differindex 7e58881ae4e1..81bb1d872172 100644 --- a/docs/html/preview/images/notifications/ExpandedImage.png +++ b/docs/html/preview/images/notifications/ExpandedImage.png diff --git a/docs/html/preview/images/notifications/ExpandedText.png b/docs/html/preview/images/notifications/ExpandedText.png Binary files differdeleted file mode 100644 index 03616956c46e..000000000000 --- a/docs/html/preview/images/notifications/ExpandedText.png +++ /dev/null diff --git a/docs/html/preview/images/notifications/Headsup.png b/docs/html/preview/images/notifications/Headsup.png Binary files differindex 03015b1a5338..a6f497d0bf93 100644 --- a/docs/html/preview/images/notifications/Headsup.png +++ b/docs/html/preview/images/notifications/Headsup.png diff --git a/docs/html/preview/images/notifications/Largelogo.png b/docs/html/preview/images/notifications/Largelogo.png Binary files differindex e222422d610f..90cd6bfb6889 100644 --- a/docs/html/preview/images/notifications/Largelogo.png +++ b/docs/html/preview/images/notifications/Largelogo.png diff --git a/docs/html/preview/images/notifications/LockScreen.png b/docs/html/preview/images/notifications/LockScreen.png Binary files differindex 083e6460a8d1..c204a81826ed 100644 --- a/docs/html/preview/images/notifications/LockScreen.png +++ b/docs/html/preview/images/notifications/LockScreen.png diff --git a/docs/html/preview/images/notifications/MusicPlayback.png b/docs/html/preview/images/notifications/MusicPlayback.png Binary files differindex 58f3d0b0e14c..9e7c98b7a8bc 100644 --- a/docs/html/preview/images/notifications/MusicPlayback.png +++ b/docs/html/preview/images/notifications/MusicPlayback.png diff --git a/docs/html/preview/images/notifications/ProductIcons.png b/docs/html/preview/images/notifications/ProductIcons.png Binary files differindex 227c8ab7b453..f120fbdcf24c 100644 --- a/docs/html/preview/images/notifications/ProductIcons.png +++ b/docs/html/preview/images/notifications/ProductIcons.png diff --git a/docs/html/preview/images/notifications/Productlogos.png b/docs/html/preview/images/notifications/Productlogos.png Binary files differindex baed5ac2d66a..09169e1f503d 100644 --- a/docs/html/preview/images/notifications/Productlogos.png +++ b/docs/html/preview/images/notifications/Productlogos.png diff --git a/docs/html/preview/images/notifications/ReplyAction.png b/docs/html/preview/images/notifications/ReplyAction.png Binary files differdeleted file mode 100644 index 73c9fc67483d..000000000000 --- a/docs/html/preview/images/notifications/ReplyAction.png +++ /dev/null diff --git a/docs/html/preview/images/notifications/Stack.png b/docs/html/preview/images/notifications/Stack.png Binary files differdeleted file mode 100644 index 90c6c4a56f2e..000000000000 --- a/docs/html/preview/images/notifications/Stack.png +++ /dev/null diff --git a/docs/html/preview/images/notifications/Summarise_Do.png b/docs/html/preview/images/notifications/Summarise_Do.png Binary files differindex 4daaa4d5668f..0117e14a837c 100644 --- a/docs/html/preview/images/notifications/Summarise_Do.png +++ b/docs/html/preview/images/notifications/Summarise_Do.png diff --git a/docs/html/preview/images/notifications/Summarise_Dont.png b/docs/html/preview/images/notifications/Summarise_Dont.png Binary files differindex 4094d73ac727..6bda15922d3d 100644 --- a/docs/html/preview/images/notifications/Summarise_Dont.png +++ b/docs/html/preview/images/notifications/Summarise_Dont.png diff --git a/docs/html/preview/images/notifications/Summary.png b/docs/html/preview/images/notifications/Summary.png Binary files differdeleted file mode 100644 index 135de83669ff..000000000000 --- a/docs/html/preview/images/notifications/Summary.png +++ /dev/null diff --git a/docs/html/preview/images/notifications/Summary_Do.png b/docs/html/preview/images/notifications/Summary_Do.png Binary files differindex c48bfd360ad2..6ba17d928dd3 100644 --- a/docs/html/preview/images/notifications/Summary_Do.png +++ b/docs/html/preview/images/notifications/Summary_Do.png diff --git a/docs/html/preview/images/notifications/TimeSensitive.png b/docs/html/preview/images/notifications/TimeSensitive.png Binary files differindex 55a9e59eb7d4..c56487cabcc5 100644 --- a/docs/html/preview/images/notifications/TimeSensitive.png +++ b/docs/html/preview/images/notifications/TimeSensitive.png diff --git a/docs/html/preview/images/notifications/Triggered.png b/docs/html/preview/images/notifications/Triggered.png Binary files differindex c327ed2264c7..8366faccde03 100644 --- a/docs/html/preview/images/notifications/Triggered.png +++ b/docs/html/preview/images/notifications/Triggered.png diff --git a/docs/html/preview/images/notifications/WearBasic.png b/docs/html/preview/images/notifications/WearBasic.png Binary files differdeleted file mode 100644 index 881f1e5c59e5..000000000000 --- a/docs/html/preview/images/notifications/WearBasic.png +++ /dev/null diff --git a/docs/html/preview/images/notifications/action_combo.png b/docs/html/preview/images/notifications/action_combo.png Binary files differnew file mode 100644 index 000000000000..f7f58a3133b4 --- /dev/null +++ b/docs/html/preview/images/notifications/action_combo.png diff --git a/docs/html/preview/images/notifications/basic_combo.png b/docs/html/preview/images/notifications/basic_combo.png Binary files differnew file mode 100644 index 000000000000..03a60056bb9d --- /dev/null +++ b/docs/html/preview/images/notifications/basic_combo.png diff --git a/docs/html/preview/images/notifications/expandedtext_combo.png b/docs/html/preview/images/notifications/expandedtext_combo.png Binary files differnew file mode 100644 index 000000000000..39b6e322576b --- /dev/null +++ b/docs/html/preview/images/notifications/expandedtext_combo.png diff --git a/docs/html/preview/images/notifications/notifications_pattern_priority.png b/docs/html/preview/images/notifications/notifications_pattern_priority.png Binary files differindex 137a83fabf70..af2d7257f6ae 100644 --- a/docs/html/preview/images/notifications/notifications_pattern_priority.png +++ b/docs/html/preview/images/notifications/notifications_pattern_priority.png diff --git a/docs/html/preview/images/notifications/stack_combo.png b/docs/html/preview/images/notifications/stack_combo.png Binary files differnew file mode 100644 index 000000000000..be4693d45a2e --- /dev/null +++ b/docs/html/preview/images/notifications/stack_combo.png diff --git a/docs/html/preview/images/opt-in.png b/docs/html/preview/images/opt-in.png Binary files differindex 0f309c2d70ed..71512532a197 100644 --- a/docs/html/preview/images/opt-in.png +++ b/docs/html/preview/images/opt-in.png diff --git a/docs/html/preview/index.html b/docs/html/preview/index.html index 4f3f1505c9ad..acecdfa42568 100644 --- a/docs/html/preview/index.html +++ b/docs/html/preview/index.html @@ -127,11 +127,11 @@ href="//fonts.googleapis.com/css?family=Roboto+Condensed"> </head> -<body class="gc-documentation +<body class="gc-documentation " itemscope itemtype="http://schema.org/Article"> - + <a name="top"></a> <div id="body-content"> <div class="fullpage" > @@ -167,8 +167,8 @@ href="//fonts.googleapis.com/css?family=Roboto+Condensed"> <div class="col-6" style="margin-left:660px; margin-top:-105px"> <a href="/preview/setup-sdk.html" class="landing-button landing-primary" style="position:absolute;z-index:100;float:right;margin-top: 0px;">Get Started</a><!-- <p>Set up your environment and check out all the docs to get up and running.</p>--> - - + + </div> </div> </div> <!-- end .wrap --> @@ -248,7 +248,7 @@ href="//fonts.googleapis.com/css?family=Roboto+Condensed"> </div> </div> <div class="col-3-wide"> - <a target="_blank" href="http://plus.google.com"> + <a target="_blank" href="http://g.co/androidldevpreview"> <img class="landing-social-image" src="//www.google.com/images/icons/product/gplus-128.png" alt=""> </a> <div class="landing-social-copy"> @@ -257,7 +257,7 @@ href="//fonts.googleapis.com/css?family=Roboto+Condensed"> Join the community of Android developers testing out the L Developer Preview and share your thoughts and experiences. </p><p class="landing-small"> - <a href="https://plus.google.com/communities/113159138894928487684"> + <a href="http://g.co/androidldevpreview"> Discuss on Google+</a> </p> </div> @@ -312,32 +312,32 @@ href="//fonts.googleapis.com/css?family=Roboto+Condensed"> <div class="content-footer wrap" itemscope itemtype="http://schema.org/SiteNavigationElement"> - + <div class="paging-links layout-content-col col-10"> - + </div> <div class="layout-content-col plus-container col-2" > <style>#___plusone_0 {float:right !important;}</style> <div class="g-plusone" data-size="medium"></div> - + </div> - + </div> - - + + </div> <!-- end jd-content --> <div id="footer" class="wrap" style="width:940px"> - + <div id="copyright"> - - Except as noted, this content is + + Except as noted, this content is licensed under <a href="http://creativecommons.org/licenses/by/2.5/"> - Creative Commons Attribution 2.5</a>. For details and - restrictions, see the <a href="/license.html">Content + Creative Commons Attribution 2.5</a>. For details and + restrictions, see the <a href="/license.html">Content License</a>. </div> @@ -345,7 +345,7 @@ href="//fonts.googleapis.com/css?family=Roboto+Condensed"> </div> <!-- end footer --> </div><!-- end doc-content --> -</div> <!-- end body-content --> +</div> <!-- end body-content --> diff --git a/docs/html/preview/material/images/list_mail.png b/docs/html/preview/material/images/list_mail.png Binary files differindex bd107ff8f145..e70291c801d1 100644 --- a/docs/html/preview/material/images/list_mail.png +++ b/docs/html/preview/material/images/list_mail.png diff --git a/docs/html/preview/notifications.jd b/docs/html/preview/notifications.jd index 2b7565180c9e..d41796384663 100644 --- a/docs/html/preview/notifications.jd +++ b/docs/html/preview/notifications.jd @@ -2,6 +2,11 @@ page.title=Design for Notifications page.tags="notifications","design","L" @jd:body +<style> + .col-5, .col-6, .col-7 { + margin-left:0px; + } +</style> <p>The notification system allows users to keep informed about relevant and timely events in your app, such as new chat messages from a friend or a calendar event. @@ -31,73 +36,73 @@ and one that is synced as appropriate across all their Android devices.</p> <h2 id="Anatomy">Anatomy of a notification</h2> +<p>This section goes over basic parts of a notification and how they can +appear on different types of devices.</p> -<h4 id="BaseLayout"><strong>Base Layout</strong></h4> +<h3 id="BaseLayout">Base Layout</h3> <p>At a minimum, all notifications consist of a base layout, including:</p> <ul> - <li> The notification's <strong>icon</strong>, symbolizing the originating app, and also potentially the kind of notification if the app has several substantially different sorts of notifications it can post</li> + <li> The notification's <strong>icon</strong>, symbolizing the originating app, and also + potentially the kind of notification if the app has several substantially different sorts of + notifications it can post</li> <li> A notification <strong>title</strong> and additional <strong>text</strong></li> <li> A <strong>timestamp</strong></li> </ul> -<div class="figure" style="width:376px"> - <img src="{@docRoot}preview/images/notifications/Basic.png" - alt="" width="376" height="281" id="figure1" /> - <p class="img-caption"> - <strong>Figure 1.</strong> Base layout of a handset notification - </p> -</div> -<div class="figure" style="width:164px"> - <img src="{@docRoot}preview/images/notifications/WearBasic.png" - alt="" width="164" height="164" id="figure2" /> - <p class="img-caption"> - <strong>Figure 2.</strong> The same notification on Wear, with a user photo and a - notification icon - </p> -</div> -<p>Notifications created with {@code Notification.Builder} for versions of Android earlier than L will look and work the same in L, with only minor stylistic changes that the system handles for you.</p> +<p>Notifications created with <code>Notification.Builder</code> for versions of Android earlier +than L will look and work the same in L, with only minor stylistic changes that the system handles +for you.</p> + <img src="{@docRoot}preview/images/notifications/basic_combo.png" + alt="" width="700px" /> -<h4 id="ExpandedLayouts">Expanded layouts</h4> -<p>You have the option to provide more details on notifications. You can use this to show the first few lines of a message or show a larger image preview. This provides the user with additional context, and - in some cases - may allow the user to read a message in its entirety. The user can pinch-zoom or perform a single-finger glide in order to toggle between compact and expanded layouts. For single event notifications, Android provides three expanded layout templates (text, inbox, and image) for you to re-use in your application.</p> - -<div class="figure" style="width:201px"> - <img src="{@docRoot}preview/images/notifications/ExpandedText.png" - alt="" width="201" height="182" id="figure3" /> +<div style="clear:both;"> + <p class="img-caption"> + Base layout of a handheld notification and the same notification on Wear, + with a user photo and a notification icon + </p> + </div> </div> -<div class="figure" style="width:272px"> - <img src="{@docRoot}preview/images/notifications/Expanded.png" - alt="" width="272" height="121" id="figure4" /> -</div> +<h3 id="ExpandedLayouts">Expanded layouts</h3> -<div class="figure" style="width:202px"> - <img src="{@docRoot}preview/images/notifications/Stack.png" - alt="" width="202" height="169" id="figure5" /> -</div> -<div class="figure" style="width:285px"> - <img src="{@docRoot}preview/images/notifications/figure6.png" - alt="" width="285" height="124" id="figure6" /> -</div> +<p>You have the option to provide more details on notifications. You can use this to show the first +few lines of a message or show a larger image preview. This provides the user with additional +context, and - in some cases - may allow the user to read a message in its entirety. The user can +pinch-zoom or perform a single-finger glide in order to toggle between compact and expanded layouts. + For single event notifications, Android provides three expanded layout templates (text, inbox, and + image) for you to re-use in your application. The following images show you how they look on + handhelds and wearables.</p> -<div class="figure" style="width:196px"> - <img src="{@docRoot}preview/images/notifications/ExpandedImage.png" - alt="" width="196" height="277" id="figure7" /> - <p class="img-caption"> - <strong>Figure 3.</strong> A text-focused notification, an inbox notification, and a photo-centric notification, shown expanded and contracted, and with Wear equivalents for the first two. - </p> -</div> +<img style="margin-top:50px" src="{@docRoot}preview/images/notifications/expandedtext_combo.png" + alt="" width="700px" height;="284px" /> +<img style="margin-top:50px" src="{@docRoot}preview/images/notifications/stack_combo.png" + alt="" width="700px" height;="284px" /> +<img style="margin-top:30px" src="{@docRoot}preview/images/notifications/ExpandedImage.png" + alt="" width="311px" height;="450px" /> + +<h3 id="actions" style="clear:both; margin-top:40px">Actions</h3> + +<p>Android has supported optional actions that are displayed at the bottom of the notification, as +far back as Jelly Bean. With actions, users can handle the most common tasks for a particular +notification from within the notification shade without having to open the originating application. +This speeds up interaction and, in conjunction with "swipe-to-dismiss", helps users to streamline +their notification triaging experience.</p> -<h4 id="actions"><strong>Actions</strong></h4> -<p>Android has supported optional actions that are displayed at the bottom of the notification, as far back as Jelly Bean. With actions, users can handle the most common tasks for a particular notification from within the notification shade without having to open the originating application. This speeds up interaction and, in conjunction with "swipe-to-dismiss", helps users to streamline their notification triaging experience.</p> + <img src="{@docRoot}preview/images/notifications/action_combo.png" + alt="" width="700px" /> -<p>Be judicious with how many actions you include with a notification. The more actions you include, the more cognitive complexity you create. Limit yourself to the fewest number of actions possible by only including the most imminently important and meaningful ones.</p> + + +<p style="clear:both">Be judicious with how many actions you include with a notification. The more +actions you include, the more cognitive complexity you create. Limit yourself to the fewest number +of actions possible by only including the most imminently important and meaningful ones.</p> <p>Good candidates for actions on notifications are actions that:</p> @@ -113,113 +118,139 @@ and one that is synced as appropriate across all their Android devices.</p> <li> Duplicative of the default action of the notification (such as "Read" or "Open") </ul> -<div class="figure" style="width:340px"> - <img src="{@docRoot}preview/images/notifications/Action.png" - alt="" width="340" height="169" id="figure8" /> - <p class="img-caption"> - <strong>Figure 4.</strong> Calendar reminder notification with two actions - </p> -</div> -<div class="figure" style="width:154px"> - <img src="{@docRoot}preview/images/notifications/ReplyAction.png" - alt="" width="154" height="154" id="figure8_1" /> - <p class="img-caption"> - <strong>Figure 5.</strong> Gmail new message notification - the actions appear to the right of the main card on Wear devices - </p> -</div> -<p>You can specify a maximum of three actions, each consisting of an action icon and an action name. Adding actions to a simple base layout will make the notification expandable, even if the notification doesn't have an expanded layout. Since actions are only shown for expanded notifications and are otherwise hidden, you must make sure that any action a user can invoke from a notification is available from within the associated application as well.</p> +<p>You can specify a maximum of three actions, each consisting of an action icon and an action name. + Adding actions to a simple base layout will make the notification expandable, even if the + notification doesn't have an expanded layout. Since actions are only shown for expanded + notifications and are otherwise hidden, you must make sure that any action a user can invoke from + a notification is available from within the associated application as well.</p> -<h4 id="notifications_on_android_wear"><strong>Notifications on Android Wear</strong></h4> +<h2 id="notifications_on_android_wear">Notifications on Android Wear</h2> -<p>Additionally, notifications and their actions are bridged over to Wear devices by default. Developers have control to control which notifications from bridging from the phone to the watch and vice versa. And developers can control which actions bridge as well. If your app includes actions that can't be accomplished with a single tap, either hide these actions on your Wear notification or consider hooking them up to a Wear app to allow the user to finish the action on their watch.</p> +<p>Additionally, notifications and their actions are bridged over to Wear devices by default. +Developers have control to control which notifications from bridging from the phone to the watch +and vice versa. And developers can control which actions bridge as well. If your app includes +actions that can't be accomplished with a single tap, either hide these actions on your Wear +notification or consider hooking them up to a Wear app to allow the user to finish the action on +their watch.</p> + +<div class="figure"> + <img src="{@docRoot}preview/images/notifications/WearBasic.png" width="156px" height="156px" + alt="" /> +</div> -<p><strong>Bridging notifications</strong></p> +<h4>Bridging notifications</h4> <p><strong>Notifications that should be bridged</strong></p> <ul> - <li> New instant messages + <li> New instant messages</li> </ul> <p><strong>Don't bridge</strong></p> <ul> - <li> If a podcasting app has new episodes available for download, keep this notification on the phone. + <li> If a podcasting app has new episodes available for download, + keep this notification on the phone.</li> </ul> -<p><strong>Bridging actions </strong></p> + + +<h4 style="clear:both">Bridging actions</h4></p> <p><strong>Actions to bridge</strong></p> <ul> - <li> Single tap actions such as +1, Like, Heart + <li> Single tap actions such as +1, Like, Heart</li> </ul> <p><strong>Actions not to bridge</strong></p> <ul> - <li> Actions that map to features that aren't possible on the watch + <li> Actions that map to features that aren't possible on the watch</li> </ul> -<p><strong>Unique actions to define for Wear</strong></p> +<div class="figure" style="margin-top:-10px"> + <img src="{@docRoot}preview/images/notifications/ReplyAction.png" width="156px" height="156px" + alt="" /> +</div> + +<p><b>Unique actions to define for Wear</b></p> <ul> - <li> Quick lists of canned responses such as "Be right back" - <li> Open on phone - <li> A "Comment" or "Reply" action that brings up the speech input screen - <li> Actions that can launch Wear-specific apps + <li> Quick lists of canned responses such as "Be right back"</li> + <li> Open on phone</li> + <li> A "Comment" or "Reply" action that brings up the speech input screen</li> + <li> Actions that can launch Wear-specific apps</li> </ul> +</div> -<p>[Asset needed: show one or more sample Wear notifications]</p> - -<p><strong>Heads-up Notification</strong></p> - -<p>When notifications with priority set to High (see below) arrives, it is presented to users for a short period of time on the device with an expanded layout with its actions exposed. After this period of time, it retreats back to the Notification shade. If a notification is flagged as High or Max or a full-screen takeover, it gets a HUN in L.</p> -<div class="figure" style="width:262px"> +<h2 style="clear:left">Heads-up Notification</h2> +<div class="figure" style="width:311px"> <img src="{@docRoot}preview/images/notifications/Headsup.png" - alt="" width="262" height="513" id="figure9" /> + alt="" width="311px" /> <p class="img-caption"> - <strong>Figure 6.</strong> Example of a Heads-up notification (incoming phone call, high priority) coming in on top of an immersive app + Example of a Heads-up notification (incoming phone call, high priority) coming in on top of an + immersive app </p> </div> -<p><strong>Good examples of Heads-up notifications</strong></p> +<p>When notifications with priority set to High (see right) arrives, it is presented to users for a +short period of time on the device with an expanded layout with its actions exposed.</p> +<p> After this period of time, it retreats back to the Notification shade. If a notification is +flagged as High or Max or a full-screen takeover, it gets a HUN in L.</p> + +<p><b>Good examples of Heads-up notifications</b></p> <ul> - <li> Incoming phone call when using device - <li> Alarm when using device - <li> New SMS message - <li> Low battery + <li> Incoming phone call when using device</li> + <li> Alarm when using device</li> + <li> New SMS message</li> + <li> Low battery</li> </ul> -<h2 id="guidelines">Guidelines</h2> +<h2 style="clear:both" id="guidelines">Guidelines</h2> -<div class="figure" style="width:366px"> +<div class="figure" style="width:311px; margin-top:40px"> <img src="{@docRoot}preview/images/notifications/Triggered.png" - alt="" width="366" height="142" id="figure10" /> + alt="" width="311px"/> <p class="img-caption"> - <strong>Figure 7.</strong> Notification that shows the person who triggered it and the content they are sending you + Notification that shows the person who triggered it and the content they are sending you </p> </div> -<h4 id="make_it_personal"><strong>Make it personal</strong></h4> +<h3 id="MakeItPersonal">Make it personal</h3> -<p>For notifications of items sent by another person (such as a message or status update), include that person's image using setLargeIcon. Also attach information about the person to the notification's metadata (see EXTRA_PEOPLE).</p> +<p>For notifications of items sent by another person (such as a message or status update), include +that person's image using setLargeIcon. Also attach information about the person to the +notification's metadata (see EXTRA_PEOPLE).</p> -<p>Your notification's main icon will still be shown, so the user can associate it with the icon visible in the status bar.</p> +<p>Your notification's main icon will still be shown, so the user can associate it with the icon +visible in the status bar.</p> -<h4 id="navigate_to_the_right_place"><strong>Navigate to the right place</strong></h4> +<h3 id="navigate_to_the_right_place">Navigate to the right place</h3> -<p>When the user touches the body of a notification (outside of the action buttons), open your app to the place where the user can view and act upon the data referenced in the notification. In most cases this will be the detail view of a single data item such as a message, but it might also be a summary view if the notification is stacked (see <em>Stacked notifications</em> below) and references multiple items. If in any of those cases the user is taken to a hierarchy level below your app's top-level, insert navigation into your app's back stack to allow them to navigate to your app's top level using the system back button. For more information, see the chapter on <em>System-to-app navigation</em> in the <a href="{@docRoot}design/patterns/navigation.html">Navigation</a> design pattern.</p> +<p>When the user touches the body of a notification (outside of the action buttons), open your app +to the place where the user can view and act upon the data referenced in the notification. In most +cases this will be the detail view of a single data item such as a message, but it might also be a +summary view if the notification is stacked (see <em>Stacked notifications</em> below) and +references multiple items. If in any of those cases the user is taken to a hierarchy level below +your app's top-level, insert navigation into your app's back stack to allow them to navigate to +your app's top level using the system back button. For more information, see the chapter on +<em>System-to-app navigation</em> in the <a href="/design/patterns/navigation.html">Navigation</a> +design pattern.</p> -<h4 id="correctly_set_and_manage_notification_priority"><strong>Correctly set and manage notification priority</strong></h4> +<h3 id="correctly_set_and_manage_notification_priority">Correctly set and manage notification +priority</h3> -<p>Starting with Jelly Bean, Android supported a priority flag for notifications. It allows you to influence where your notification will appear in comparison to other notifications and help to make sure that users always see their most important notifications first. You can choose from the following priority levels when posting a notification:</p> +<p>Starting with Jelly Bean, Android supported a priority flag for notifications. It allows you to +influence where your notification will appear in comparison to other notifications and help to make +sure that users always see their most important notifications first. You can choose from the +following priority levels when posting a notification:</p> <table> <tr> <td class="tab0"> @@ -231,77 +262,93 @@ and one that is synced as appropriate across all their Android devices.</p> </tr> <tr> <td class="tab1"> -<p>{@code MAX}</p> +<p><code>MAX</code></p> </td> <td class="tab1"> -<p>Use for critical and urgent notifications that alert the user to a condition that is time-critical or needs to be resolved before they can continue with a particular task.</p> +<p>Use for critical and urgent notifications that alert the user to a condition that is +time-critical or needs to be resolved before they can continue with a particular task.</p> </td> </tr> <tr> <td class="tab1"> -<p>{@code HIGH}</p> +<p><code>HIGH</code></p> </td> <td class="tab1"> -<p>Use high priority notifications primarily for important communication, such as message or chat events with content that is particularly interesting for the user. High priority notifications will get the Heads-Up Notification display starting in L.</p> +<p>Use high priority notifications primarily for important communication, such as message or chat +events with content that is particularly interesting for the user. High priority notifications will get the Heads-Up Notification display starting in L.</p> </td> </tr> <tr> <td class="tab1"> -<p>{@code DEFAULT}</p> +<p><code>DEFAULT</code></p> </td> <td class="tab1"> -<p>The default priority. Keep all notifications that don't fall into any of the other categories at this priority level.</p> +<p>The default priority. Keep all notifications that don't fall into any of the other categories at +this priority level.</p> </td> </tr> <tr> <td class="tab1"> -<p>{@code LOW}</p> +<p><code>LOW</code></p> </td> <td class="tab1"> -<p>Use for notifications that you still want the user to be informed about, but that rate low in urgency. LOW notifications will tend to show up at the bottom of the list, which makes them a good choice for things like pubic/undirected social updates: the user has asked to be notified about them, but they should never take precedence over urgent or direct communication.</p> +<p>Use for notifications that you still want the user to be informed about, but that rate low in +urgency. LOW notifications will tend to show up at the bottom of the list, which makes them a good +choice for things like pubic/undirected social updates: the user has asked to be notified about +them, but they should never take precedence over urgent or direct communication.</p> </td> </tr> <tr> <td class="tab1"> -<p>{@code MIN}</p> +<p><code>MIN</code></p> </td> <td class="tab1"> -<p>Contextual/background information (e.g. weather information, contextual location information). Minimum priority notifications will not show in the status bar. The user will only discover them when they expand the notification shade.</p> +<p>Contextual/background information (e.g. weather information, contextual location information). +Minimum priority notifications will not show in the status bar. The user will only discover them +when they expand the notification shade.</p> </td> </tr> </table> -<h4 id="how_to_choose_an_appropriate_priority"><strong>How to choose an appropriate priority</strong></h4> +<h4 id="how_to_choose_an_appropriate_priority"><strong>How to choose an appropriate +priority</strong></h4> -<p>Default, High, and Max priority are interruptive priority levels and risk interrupting the user from what they are doing. This should not not be taken lightly, so these levels should be reserved for notifications that:</p> +<p>Default, High, and Max priority are interruptive priority levels and risk interrupting the user +from what they are doing. This should not not be taken lightly, so these levels should be reserved +for notifications that:</p> <ul> - <li> Involve another person - <li> Are time-sensitive - <li> Might immediately change the user's behavior in the real world + <li> Involve another person</li> + <li> Are time-sensitive</li> + <li> Might immediately change the user's behavior in the real world</li> </ul> -<p>Notifications set to Low and Min can still be very valuable for the user. Many if not most notifications just don't need to command the user's immediate attention, or vibrate the user's wrist, yet contain information that they will find valuable when they choose to look for notifications. Criteria for Low and Min priority notifications:</p> +<p>Notifications set to Low and Min can still be very valuable for the user. Many if not most +notifications just don't need to command the user's immediate attention, or vibrate the user's +wrist, yet contain information that they will find valuable when they choose to look for +notifications. Criteria for Low and Min priority notifications:</p> <ul> - <li> Don't involve other people - <li> Aren't time sensitive - <li> Is content the user might be interested in but could choose to browse at their leisure + <li> Don't involve other people</li> + <li> Aren't time sensitive</li> + <li> Is content the user might be interested in but could choose to browse at their leisure</li> </ul> -<div class="figure" style="width:624px"> + <img src="{@docRoot}preview/images/notifications/notifications_pattern_priority.png" - alt="" width="624" height="210" id="figure11"> -</div> + alt="" width="700"/> -<h4 id="set_a_notification_category"><strong>Set a notification category</strong></h4> -<p>If your notification falls into one of the predefined categories (see below), assign it accordingly. Aspects of the system UI such as the notification shade (or any other notification listener) may use this information to make ranking and filtering decisions.</p> +<h3 style="clear:both" id="set_a_notification_category">Set a notification category</h3> + +<p>If your notification falls into one of the predefined categories (see below), assign it +accordingly. Aspects of the system UI such as the notification shade (or any other notification +listener) may use this information to make ranking and filtering decisions.</p> <table> <tr> <td> -<p>{@code Notification.CATEGORY_CALL}</p> +<p><code>Notification.CATEGORY_CALL</code></p> </td> <td> <p>Incoming call (voice or video) or similar synchronous communication request</p> @@ -309,7 +356,7 @@ and one that is synced as appropriate across all their Android devices.</p> </tr> <tr> <td> -<p>{@code Notification.CATEGORY_MESSAGE}</p> +<p><code>Notification.CATEGORY_MESSAGE</code></p> </td> <td> <p>Incoming direct message (SMS, instant message, etc.)</p> @@ -317,7 +364,7 @@ and one that is synced as appropriate across all their Android devices.</p> </tr> <tr> <td> -<p>{@code Notification.CATEGORY_EMAIL}</p> +<p><code>Notification.CATEGORY_EMAIL</code></p> </td> <td> <p>Asynchronous bulk message (email)</p> @@ -325,7 +372,7 @@ and one that is synced as appropriate across all their Android devices.</p> </tr> <tr> <td> -<p>{@code Notification.CATEGORY_EVENT}</p> +<p><code>Notification.CATEGORY_EVENT</code></p> </td> <td> <p>Calendar event</p> @@ -333,7 +380,7 @@ and one that is synced as appropriate across all their Android devices.</p> </tr> <tr> <td> -<p>{@code Notification.CATEGORY_PROMO}</p> +<p><code>Notification.CATEGORY_PROMO</code></p> </td> <td> <p>Promotion or advertisement</p> @@ -341,7 +388,7 @@ and one that is synced as appropriate across all their Android devices.</p> </tr> <tr> <td> -<p>{@code Notification.CATEGORY_ALARM}</p> +<p><code>Notification.CATEGORY_ALARM</code></p> </td> <td> <p>Alarm or timer</p> @@ -349,7 +396,7 @@ and one that is synced as appropriate across all their Android devices.</p> </tr> <tr> <td> -<p>{@code Notification.CATEGORY_PROGRESS}</p> +<p><code>Notification.CATEGORY_PROGRESS</code></p> </td> <td> <p>Progress of a long-running background operation</p> @@ -357,7 +404,7 @@ and one that is synced as appropriate across all their Android devices.</p> </tr> <tr> <td> -<p>{@code Notification.CATEGORY_SOCIAL}</p> +<p><code>Notification.CATEGORY_SOCIAL</code></p> </td> <td> <p>Social network or sharing update</p> @@ -365,7 +412,7 @@ and one that is synced as appropriate across all their Android devices.</p> </tr> <tr> <td> -<p>{@code Notification.CATEGORY_ERROR}</p> +<p><code>Notification.CATEGORY_ERROR</code></p> </td> <td> <p>Error in background operation or authentication status</p> @@ -373,7 +420,7 @@ and one that is synced as appropriate across all their Android devices.</p> </tr> <tr> <td> -<p>{@code Notification.CATEGORY_TRANSPORT}</p> +<p><code>Notification.CATEGORY_TRANSPORT</code></p> </td> <td> <p>Media transport control for playback</p> @@ -381,7 +428,7 @@ and one that is synced as appropriate across all their Android devices.</p> </tr> <tr> <td> -<p>{@code Notification.CATEGORY_SYSTEM}</p> +<p><code>Notification.CATEGORY_SYSTEM</code></p> </td> <td> <p>System or device status update. Reserved for system use.</p> @@ -389,7 +436,7 @@ and one that is synced as appropriate across all their Android devices.</p> </tr> <tr> <td> -<p>{@code Notification.CATEGORY_SERVICE}</p> +<p><code>Notification.CATEGORY_SERVICE</code></p> </td> <td> <p>Indication of running background service</p> @@ -397,15 +444,16 @@ and one that is synced as appropriate across all their Android devices.</p> </tr> <tr> <td> -<p>{@code Notification.CATEGORY_RECOMMENDATION}</p> +<p><code>Notification.CATEGORY_RECOMMENDATION</code></p> </td> <td> -<p>A specific, timely recommendation for a single thing. For example, a news app might want to recommend a news story it believes the user will want to read next.</p> +<p>A specific, timely recommendation for a single thing. For example, a news app might want to +recommend a news story it believes the user will want to read next.</p> </td> </tr> <tr> <td> -<p>{@code Notification.CATEGORY_STATUS}</p> +<p><code>Notification.CATEGORY_STATUS</code></p> </td> <td> <p>Ongoing information about device or contextual status</p> @@ -413,214 +461,251 @@ and one that is synced as appropriate across all their Android devices.</p> </tr> </table> +<h3 id="summarize_your_notifications">Summarize your notifications</h3> -<p> </p> - -<h4 id="summarize_your_notifications"><strong>Summarize your notifications</strong></h4> - -<p>If your app creates a notification while another of the same type is still pending, avoid creating an altogether new notification object. Instead, turn it into a summary notification for the app.</p> +<p>If your app creates a notification while another of the same type is still pending, avoid +creating an altogether new notification object. Instead, turn it into a summary notification for +the app.</p> -<p>A summary notification builds a summary description and allows the user to understand how many notifications of a particular kind are pending.</p> +<p>A summary notification builds a summary description and allows the user to understand how many +notifications of a particular kind are pending.</p> -<p><strong>Don't</strong>:</p> +<div class="col-6"> +<p><strong>Don't</strong></p> -<div class="figure" style="width:325px"> <img src="{@docRoot}preview/images/notifications/Summarise_Dont.png" - alt="" width="325" height="361" id="figure12" /> + alt="" width="311px" /> + </div> -<p><strong>Do</strong>:</p> +<div> +<p><strong>Do</strong></p> -<div class="figure" style="width:318px"> <img src="{@docRoot}preview/images/notifications/Summarise_Do.png" - alt="" width="318" height="293" id="figure13" /> + alt="" width="311px"/> </div> -<p>You can provide more detail about the individual notifications that make up a summary by using the expanded digest layout. This allows users to gain a better sense of which notifications are pending and if they are interesting enough to be read in detail within the associated app.</p> - -<div class="figure" style="width:370px"> - <img src="{@docRoot}preview/images/notifications/ExpandedText.png" - alt="" width="370" height="309" id="figure14" /> +<p style="clear:left">You can provide more detail about the individual notifications that make up a + summary by using the expanded digest layout. This allows users to gain a better sense of which + notifications are pending and if they are interesting enough to be read in detail within the + associated app.</p> +<div class="col-6"> + <img src="{@docRoot}preview/images/notifications/Stack.png" style="margin-bottom:30px" + alt="" width="311px" /> <p class="img-caption"> - <strong>Figure 8.</strong> Expanded and contracted notification that is a summary (using InboxStyle) + Expanded and contracted notification that is a summary (using InboxStyle) </p> </div> -<h4 id="make_notifications_optional"><strong>Make notifications optional</strong></h4> - -<p>Users should always be in control of notifications. Allow the user to disable your app's notifications or change their alert properties, such as alert sound and whether to use vibration, by adding a notification settings item to your application settings.</p> - -<h4 id="use_distinct_icons"><strong>Use distinct icons</strong></h4> - -<p>By glancing at the notification area, the user should be able to discern what kinds of notifications are currently pending.</p> +<h3 style="clear:both" id="make_notifications_optional">Make notifications optional</h3> -<p><strong>Do</strong></p> - -<p>Look at the notification icons Android apps already provide and create notification icons for your app that are sufficiently distinct in appearance.</p> +<p>Users should always be in control of notifications. Allow the user to diszable your app's +notifications or change their alert properties, such as alert sound and whether to use vibration, +by adding a notification settings item to your application settings.</p> -<p>[asset: include some sample visuals of notification icons]</p> +<h3 id="use_distinct_icons">Use distinct icons</h3> +<p>By glancing at the notification area, the user should be able to discern what kinds of +notifications are currently pending.</p> -<div class="figure" style="width:405px"> - <img src="{@docRoot}preview/images/notifications/figure15.png" - alt="" width="405" height="80" id="figure15" /> +<div class="figure"> + <img src="{@docRoot}preview/images/notifications/ProductIcons.png" + alt="" width="420" /> </div> -<p><strong>Do</strong></p> + <div><p><strong>Do</strong></p> + <p>Look at the notification icons Android apps already provide and create notification icons for + your app that are sufficiently distinct in appearance.</p> -<p>Use the proper <a href="{@docRoot}design/style/iconography.html#notification">notification icon style</a> for small icons, and the Material Light <a href="{@docRoot}design/style/iconography.html#action-bar">action bar icon style</a> for your action icons. Do not place any additional alpha (dimming or fading) into your small icons and action icons; they can have anti-aliased edges, but because L uses these icons as masks (that is, only the alpha channel is used), the image should generally be drawn at full opacity.</p> + <p><strong>Do</strong></p> + <p>Use the proper <a href="/design/style/iconography.html#notification">notification icon + style</a> for small icons, and the Material Light + <a href="/design/style/iconography.html#action-bar">action bar icon style</a> for your action + icons. Do not place any additional alpha (dimming or fading) into your small icons and action + icons; they can have anti-aliased edges, but because L uses these icons as masks (that is, only + the alpha channel is used), the image should generally be drawn at full opacity.</p> +<p ><strong>Do</strong></p> +<p >Keep your icons visually simple and avoid excessive detail that is hard to discern.</p> -<p>[asset: show a zoomed example of how this should look]</p> - -<div class="figure" style="width:348px"> - <img src="{@docRoot}preview/images/notifications/figure16.png" - alt="" width="348" height="300" id="figure16" /> </div> - -<p><strong>Do</strong></p> - -<p>Keep your icons visually simple and avoid excessive detail that is hard to discern.</p> - -<p><strong>Don't</strong></p> +<p style="clear:both"><strong>Don't</strong></p> <p>Use color to distinguish your app from others. Notification icons should only be a white-on-transparent background image.</p> -<h4 id=pulse_the_notification_led_appropriately><strong>Pulse the notification LED appropriately</strong></h4> - -<p>Many Android devices contain a notification LED, which is used to keep the user informed about events while the screen is off. Notifications with a priority level of MAX, HIGH, or DEFAULT should cause the LED to glow, while those with lower priority (LOW and MIN) should not.</p> -<p>The user's control over notifications should extend to the LED. When you use DEFAULT_LIGHTS, the LED will glow with a white color. Your notifications shouldn't use a different color unless the user has explicitly customized it.</p> +<h3 id="pulse_the_notification_led_appropriately">Pulse the notification LED appropriately</h3> -<h2 id=building_notifications_that_users_care_about>Building notifications that users care about</h2> +<p>Many Android devices contain a notification LED, which is used to keep the user informed about +events while the screen is off. Notifications with a priority level of MAX, HIGH, or DEFAULT should +cause the LED to glow, while those with lower priority (LOW and MIN) should not.</p> -<p>To create an app that users love, it is important to design your notifications carefully. Notifications embody your app's voice, and contribute to your app's personality. Unwanted or unimportant notifications can annoy the user or make them resent how much attention the app wants from them, so use notifications judiciously.</p> +<p>The user's control over notifications should extend to the LED. When you use DEFAULT_LIGHTS, the +LED will glow with a white color. Your notifications shouldn't use a different color unless the +user has explicitly customized it.</p> -<h4 id=when_to_display_a_notification><strong>When to display a notification</strong></h4> +<h2 id="building_notifications_that_users_care_about">Building notifications that users care about</h2> -<p>To create an application that people enjoy using, it's important to recognize that the user's attention and focus is a resource that must be protected. While Android's notification system has been designed to minimize the impact of notifications on the user's attention, it is nonetheless still important to be aware of the fact that notifications are interrupting the user's task flow. 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 the notifications priority flag to Low or Min to avoid distracting the user while they are doing something else.</p> +<p>To create an app that users love, it is important to design your notifications carefully. +Notifications embody your app's voice, and contribute to your app's personality. Unwanted or +unimportant notifications can annoy the user or make them resent how much attention the app wants +from them, so use notifications judiciously.</p> -<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> - -<p>Notifications should be used primarily for <strong>time sensitive events</strong>, and especially if these synchronous events <strong>involve other people</strong>. For instance, an incoming chat is a real time and synchronous form of communication: there is another user actively waiting on you to respond. Calendar events are another good example of when to use a notification and grab the user's attention, because the event is imminent, and calendar events often involve other people.</p> - -<div class="figure" style="width:624px"> - <img src="{@docRoot}preview/images/notifications/figure17.png" - alt="" width="624" height="232" id="figure17" /> +<h3 id="when_to_display_a_notification">When to display a notification</h3> +<div class="figure"> + <img src="{@docRoot}preview/images/notifications/TimeSensitive.png" + alt="" width="311px" /> <p class="img-caption"> - <strong>Figure 8.</strong> Time sensitive notification examples + Time sensitive notification examples </p> </div> +<p>To create an application that people enjoy using, it's important to recognize that the user's +attention and focus is a resource that must be protected. While Android's notification system has +been designed to minimize the impact of notifications on the user's attention, it is nonetheless +still important to be aware of the fact that notifications are interrupting the user's task flow. +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 +the notifications priority flag to Low or Min to avoid distracting the user while they are doing +something else.</p> -<p> </p> - -<h4 id=when_not_to_display_a_notification><strong>When not to display a notification</strong></h4> - -<p>There are however many other cases where notifications should not be used:</p> - -<ul> - <li> Avoid notifying the user of information that is not directed specifically at them, or information that is not truly time sensitive. For instance the asynchronous and undirected updates flowing through a social network generally do not warrant a real time interruption. For the users that do care about them, allow them to opt-in. - <li> Don't create a notification if the relevant new information is currently on screen. Instead, use the UI of the application itself to notify the user of new information directly in context. For instance, a chat application should not create system notifications while the user is actively chatting with another user. - <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> 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> Don't create notifications that have no true notification content and merely advertise your app. A notification should provide useful, timely, new information and should not be used to merely launch an app. - <li> Don't create superfluous notifications just to get your brand in front of users. Such notifications will only frustrate and likely alienate your audience. The best way to provide the user with a small amount of updated information and to keep them engaged with your application is to develop a widget that they can choose to place on their home screen. -</ul> +<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> -<div class="figure" style="width:373px"> - <img src="{@docRoot}preview/images/notifications/figure18.png" - alt="" width="373" height="734" id="figure18" /> - <p class="img-caption"> - <strong>Figure 9.</strong> Anti-examples of notifications - </p> -</div> +<p>Notifications should be used primarily for <strong>time sensitive events</strong>, and especially + if these synchronous events <strong>involve other people</strong>. For instance, an incoming chat + is a real time and synchronous form of communication: there is another user actively waiting on you + to respond. Calendar events are another good example of when to use a notification and grab the + user's attention, because the event is imminent, and calendar events often involve other people.</p> -<h2 id=interacting_with_notifications>Interacting With Notifications</h2> +<h3 style="clear:both" id="when_not_to_display_a_notification">When not to display a notification</h3> -<div class="figure" style="width:444px"> +<div class="figure" style="margin-top:60px"> <img src="{@docRoot}preview/images/notifications/AntiSample1.png" - alt="" width="444" height="188" id="figure19" /> + alt="" width="311px" /> </div> -<p>Notifications are indicated by icons in the status bar and can be accessed by opening the notification drawer.</p> +<p>There are however many other cases where notifications should not be used:</p> + +<ul> + <li> Avoid notifying the user of information that is not directed specifically at them, or + information that is not truly time sensitive. For instance the asynchronous and undirected updates + flowing through a social network generally do not warrant a real time interruption. For the users + that do care about them, allow them to opt-in.</li> + <li> Don't create a notification if the relevant new information is currently on screen. Instead, + use the UI of the application itself to notify the user of new information directly in context. + For instance, a chat application should not create system notifications while the user is actively chatting with another user.</li> + <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> + <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> + <li> Don't create notifications that have no true notification content and merely advertise your + app. A notification should provide useful, timely, new information and should not be used to + merely launch an app.</li> + <li> Don't create superfluous notifications just to get your brand in front of users. + Such notifications will only frustrate and likely alienate your audience. The best way to provide + the user with a small amount of updated information and to keep them engaged with your + application is to develop a widget that they can choose to place on their home screen.</li> +</ul> -<p>Touching a notification opens the associated app to detailed content matching the notification. Swiping left or right on a notification removes it from the list.</p> +<h2 style="clear:left" id="interacting_with_notifications">Interacting With Notifications</h2> -<h4 id=ongoing_notifications><strong>Ongoing notifications</strong></h4> +<p>Notifications are indicated by icons in the status bar and can be accessed by opening the +notification drawer.</p> -<p>Ongoing notifications keep users informed about an ongoing process in the background. For example, music players announce the currently playing track in the notification system and continue to do so until the user stops the playback. They can also be used to show the user feedback for longer tasks like downloading a file, or encoding a video. Ongoing notifications cannot be manually removed from the notification drawer.</p> +<p>Touching a notification opens the associated app to detailed content matching the notification. +Swiping left or right on a notification removes it from the list.</p> -<div class="figure" style="width:337px"> +<h3 id="ongoing_notifications">Ongoing notifications</h3> +<div class="figure" style="width:311px"> <img src="{@docRoot}preview/images/notifications/MusicPlayback.png" - alt="" width="337" height="196" id="figure20" /> + alt="" width="311px" /> <p class="img-caption"> - <strong>Figure 10.</strong> Ongoing notification due to music playback + Ongoing notification due to music playback </p> </div> +<p>Ongoing notifications keep users informed about an ongoing process in the background. +For example, music players announce the currently playing track in the notification system and +continue to do so until the user stops the playback. They can also be used to show the user +feedback for longer tasks like downloading a file, or encoding a video. Ongoing notifications +cannot be manually removed from the notification drawer.</p> -<p>The L lockscreen doesn't show transport controls for RCC (RemoteControlClient)s anymore. But the lockscreen <em>does</em> show notifications, so each app's playback notification is now the primary way for users to control playback from a locked state. This gives apps more control over which buttons to show and in what way, while providing a consistent experience for the user whether on the lockscreen or unlocked.</p> +<p>The L lockscreen doesn't show transport controls for RCC (RemoteControlClient)s anymore. But the +lockscreen <em>does</em> show notifications, so each app's playback notification is now the primary +way for users to control playback from a locked state. This gives apps more control over which +buttons to show and in what way, while providing a consistent experience for the user whether on +the lockscreen or unlocked.</p> -<h4 id=dialogs_and_toasts_are_for_feedback_not_notification><strong>Dialogs and toasts are for feedback not notification</strong></h4> +<h3 style="clear:both" id="dialogs_and_toasts_are_for_feedback_not_notification">Dialogs +and toasts are for feedback not notifications</h3> -<p>Your app should not create a dialog or toast if it is not currently on screen. Dialogs and Toasts should only be displayed as the immediate response to the user taking an action inside of your app. For further guidance on the use of dialogs and toasts, refer to <a href="{@docRoot}design/patterns/confirming-acknowledging.html">Confirming & Acknowledging</a>.</p> +<p>Your app should not create a dialog or toast if it is not currently on screen. Dialogs and Toasts + should only be displayed as the immediate response to the user taking an action inside of your app. +For further guidance on the use of dialogs and toasts, refer to +<a href="/design/patterns/confirming-acknowledging.html">Confirming & Acknowledging</a>.</p> -<p><strong>Ranking and ordering</strong></p> +<h3>Ranking and Ordering</h3> -<p>Notifications are "news" and so they are essentially shown in reverse-chronological order, with special consideration given to the app's stated notification priority.</p> +<p>Notifications are "news" and so they are essentially shown in reverse-chronological order, with +special consideration given to the app's stated notification priority.</p> -<p>In L, notifications are now a key part of the lockscreen, and are featured prominently every time the device display comes on. Because space on the lockscreen is tight, it is more important than ever to identify the most urgent or relevant notifications.</p> +<p>In L, notifications are now a key part of the lockscreen, and are featured prominently every +time the device display comes on. Because space on the lockscreen is tight, it is more important +than ever to identify the most urgent or relevant notifications.</p> <p>Therefore, L has a more sophisticated sorting algorithm for notifications, taking into account:</p> <ul> - <li> The timestamp and application's stated priority, as before. - <li> Whether the notification has recently disturbed the user with sound or vibration. (That is, if the phone just made noise, and the user wants to know "what just happened?" the lockscreen should answer that at a glance.) - <li> Any people that are attached to the notification using {@code EXTRA_PEOPLE}, and in particular whether those are starred contacts. + <li> The timestamp and application's stated priority, as before.</li> + <li> Whether the notification has recently disturbed the user with sound or vibration. (That is, + if the phone just made noise, and the user wants to know "what just happened?" the lockscreen + should answer that at a glance.)</li> + <li> Any people that are attached to the notification using <code>EXTRA_PEOPLE</code>, and in + particular whether those are starred contacts.</li> </ul> -<p>To best take advantage of this sorting, developers should focus on the user experience they want to create rather than aiming for any particular spot on the list.</p> - -<p>An example:</p> +<p>To best take advantage of this sorting, developers should focus on the user experience they want +to create rather than aiming for any particular spot on the list.</p> -<div class="figure" style="width:624px"> <img src="{@docRoot}preview/images/notifications/AntiSample3.png" - alt="" width="624" height="334" id="figure21" /> - <p class="img-caption"> - <strong>Figure 11.</strong> Gmail notifications are default priority, so they normally sort below messages from an instant messaging app like Hangouts, but Gmail will get a temporary bump when new messages come in. + alt="" width="700px" /> + + <p class="img-caption" style="margin-top:20px">Gmail notifications are default priority, so they + normally sort below messages from an instant messaging app like Hangouts, but Gmail will get a + temporary bump when new messages come in. </p> -</div> -<p>Give the user choices: about whether to have notifications at all, whether they should vibrate or make sound.</p> -<p><strong>On the lockscreen</strong></p> +<h3>On the lockscreen</h3> -<p>Starting in L, notifications are visible on the lockscreen, and so we must consider the user's privacy. Notifications often contain sensitive information, and we must take care when showing it to anyone who picks up the device and turns on the display.</p> +<p>Starting in L, notifications are visible on the lockscreen, and so we must consider the user's +privacy. Notifications often contain sensitive information, and we must take care when showing it to +anyone who picks up the device and turns on the display.</p> <ul> - <li> For devices without a secure lockscreen, a simple slide gesture unlocks the whole device. Therefore, Android will always show the complete contents of all notifications on insecure lockscreens. - <li> When a device has a secure lockscreen (PIN, pattern, or password), however, it divides the interface into two spheres: "public", the things that are displayed atop a secure lockscreen and can therefore be seen by anyone; and "private", the world behind that lockscreen, which can only be accessed by supplying the correct authentication. + <li> For devices without a secure lockscreen, a simple slide gesture unlocks the whole device. + Therefore, Android will always show the complete contents of all notifications on insecure lockscreens.</li> + <li> When a device has a secure lockscreen (PIN, pattern, or password), however, it divides the + interface into two spheres: "public", the things that are displayed atop a secure lockscreen and + can therefore be seen by anyone; and "private", the world behind that lockscreen, which can only + be accessed by supplying the correct authentication.</li> </ul> -<div class="figure" style="width:249px"> +<h3>The user decides what shows on the secure lockscreen</h3> +<div class="figure" style="width:311px"> <img src="{@docRoot}preview/images/notifications/LockScreen.png" - alt="" width="249" height="482" id="figure22" /> + alt="" width="311px" /> <p class="img-caption"> - <strong>Figure 12.</strong> Notifications on the lockscreen followed by the Pattern Unlock when the user attempts to unlock the phone. + Notifications on the lockscreen followed by the Pattern Unlock when the user attempts to unlock the phone. </p> </div> -<p><strong>The user decides what shows on the secure lockscreen</strong></p> - <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> - -<p>To control the visibility level, call {@code android.app.Notification.Builder.setVisibility()} and specify one of these values:</p> +<p> To control the visibility level, call +<code>Notification.Builder.setVisibility()</code> and specify one of these values:</p> <ul> - <li>{@code android.app.Notification.VISIBILITY_PUBLIC}. Shows the notification's full content. This is the system default if visibility is left unspecified. - <li>{@code android.app.Notification.VISIBILITY_PRIVATE}. 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. + <li><code>Notification.VISIBILITY_PUBLIC</code>. Shows the notification's full content. + This is the system default if visibility is left unspecified.</li> + <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. <ul> - <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 android.app.Notification.publicVersion} field. + <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. <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. - <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}, but the {@code publicVersion} could still contain useful information like "3 new messages" without any other identifying details. + <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. </ul> - <li>{@code android.app.Notification.VISIBILITY_SECRET}. Shows only the most minimal information, excluding even the notification's icon. -</ul> - + </li> + <li><code>Notification.VISIBILITY_SECRET</code>. Shows only the most minimal information, excluding even the notification's icon.</li> +</ul>
\ No newline at end of file diff --git a/docs/html/preview/support.jd b/docs/html/preview/support.jd index 8efc4bc734f9..9d7844bf2102 100644 --- a/docs/html/preview/support.jd +++ b/docs/html/preview/support.jd @@ -7,7 +7,7 @@ page.title=Support our issue tracker.</p> <p>For more support, -<a href="https://plus.google.com/communities/113159138894928487684">join +<a href="https://plus.google.com/communities/101985907812750684586">join the L Developer Preview Google+ community</a> to discuss your development experiences. diff --git a/docs/html/training/wearables/apps/creating.jd b/docs/html/training/wearables/apps/creating.jd index 841f24a5a6d1..a5107d742536 100644 --- a/docs/html/training/wearables/apps/creating.jd +++ b/docs/html/training/wearables/apps/creating.jd @@ -126,7 +126,7 @@ Project</a>. As you follow the wizard, enter the following information:</p> <p class="note"><b>Note:</b> The <b>wear</b> module also contains a "Hello World" activity that uses a <code>WatchViewStub</code> that inflates a layout based on whether the device's screen is round or square. The <code>WatchViewStub</code> class is one of the UI widgets that's provided - by the <a href="{@docRoot}training/wearables/apps/layouts#UiLibrary">wearable support library</a>.</p> + by the <a href="{@docRoot}training/wearables/apps/layouts.html#UiLibrary">wearable support library</a>.</p> </li> <h2 id="Install">Install the Wearable app</h2> diff --git a/docs/html/training/wearables/data-layer/messages.jd b/docs/html/training/wearables/data-layer/messages.jd index a9dec75756ac..d0d5a0cc92ae 100644 --- a/docs/html/training/wearables/data-layer/messages.jd +++ b/docs/html/training/wearables/data-layer/messages.jd @@ -39,7 +39,7 @@ is received or when the request times out: <p class="note"><b>Note:</b> Read more about asynchronous and synchronous calls to Google Play services and when to use each in -<a href="google/auth/api-client.html#Communicating">Communicate with Google Play Services</a>. +<a href="{@docRoot}google/auth/api-client.html#Communicating">Communicate with Google Play Services</a>. </p> <pre> |
