blob: e4f74a037b10c7328ade7ba61efd185be4fc35f8 [file] [log] [blame]
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width" />
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
<title>Stacking Notifications | Android Developers</title>
<!-- STYLESHEETS -->
<link rel="stylesheet"
href="//fonts.googleapis.com/css?family=Roboto:light,regular,medium,thin,italic,mediumitalic,bold" title="roboto">
<link href="/assets/css/default.css" rel="stylesheet" type="text/css">
<!-- JAVASCRIPT -->
<script src="//www.google.com/jsapi" type="text/javascript"></script>
<script src="/assets/js/android_3p-bundle.js" type="text/javascript"></script>
<script type="text/javascript">
var toRoot = "/";
var metaTags = [];
var devsite = false;
</script>
<script src="/assets/js/docs.js" type="text/javascript"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-5831155-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body class="gc-documentation
" itemscope itemtype="http://schema.org/Article">
<a name="top"></a>
<!-- Header -->
<div id="header">
<div class="wrap" id="header-wrap">
<div class="col-3 logo-wear">
<a href="/wear/index.html">
<img src="/wear/images/android-wear.png" height="16" alt="Android Wear" />
</a>
</div>
<div class="col-8" style="margin:0"><h1 style="margin:1px 0 0 20px;padding:0;line-height:16px;
color:#666;font-weight:100;font-size:24px;">Developer Preview</h1></div>
<!-- New Search -->
<div class="menu-container">
<div class="moremenu">
<div id="more-btn"></div>
</div>
<div class="morehover" id="moremenu">
<div class="top"></div>
<div class="mid">
<div class="header">Links</div>
<ul>
<li><a href="https://play.google.com/apps/publish/">Google Play Developer Console</a></li>
<li><a href="http://android-developers.blogspot.com/">Android Developers Blog</a></li>
<li><a href="/about/index.html">About Android</a></li>
</ul>
<div class="header">Android Sites</div>
<ul>
<li><a href="http://www.android.com">Android.com</a></li>
<li class="active"><a>Android Developers</a></li>
<li><a href="http://source.android.com">Android Open Source Project</a></li>
</ul>
<div class="header">Language</div>
<div id="language" class="locales">
<select name="language" onChange="changeLangPref(this.value, true)">
<option value="en">English</option>
<option value="es">Español</option>
<option value="ja">日本語</option>
<option value="ko">한국어</option>
<option value="ru">Русский</option>
<option value="zh-cn">中文 (中国)</option>
<option value="zh-tw">中文 (台灣)</option>
</select>
</div>
<script type="text/javascript">
<!--
loadLangPref();
//-->
</script>
<br class="clearfix" />
</div><!-- end mid -->
<div class="bottom"></div>
</div><!-- end morehover -->
<div class="search" id="search-container">
<div class="search-inner">
<div id="search-btn"></div>
<div class="left"></div>
<form onsubmit="return submit_search()">
<input id="search_autocomplete" type="text" value="" autocomplete="off" name="q"
onfocus="search_focus_changed(this, true)" onblur="search_focus_changed(this, false)"
onkeydown="return search_changed(event, true, '/')"
onkeyup="return search_changed(event, false, '/')" />
</form>
<div class="right"></div>
<a class="close hide">close</a>
<div class="left"></div>
<div class="right"></div>
</div>
</div><!-- end search -->
<div class="search_filtered_wrapper reference">
<div class="suggest-card reference no-display">
<ul class="search_filtered">
</ul>
</div>
</div>
<div class="search_filtered_wrapper docs">
<div class="suggest-card dummy no-display">&nbsp;</div>
<div class="suggest-card develop no-display">
<ul class="search_filtered">
</ul>
<div class="child-card guides no-display">
</div>
<div class="child-card training no-display">
</div>
<div class="child-card samples no-display">
</div>
</div>
<div class="suggest-card design no-display">
<ul class="search_filtered">
</ul>
</div>
<div class="suggest-card distribute no-display">
<ul class="search_filtered">
</ul>
</div>
</div><!-- end search_filtered_wrapper -->
</div>
<!-- end menu_container -->
</div><!-- end header-wrap -->
</div>
<!-- /Header -->
<div id="searchResults" class="wrap" style="display:none;">
<h2 id="searchTitle">Results</h2>
<div id="leftSearchControl" class="search-control">Loading...</div>
</div>
<div class="wrap clearfix" id="body-content">
<div class="col-4" id="side-nav" itemscope itemtype="http://schema.org/SiteNavigationElement">
<div id="devdoc-nav" class="scroll-pane">
<a class="totop" href="#top" data-g-event="left-nav-top">to top</a>
<ul id="nav">
<li class="nav-section">
<div class="nav-section-header empty"><a href="/wear/preview/start.html">Get Started
</a></div>
</li>
<li class="nav-section">
<div class="nav-section-header empty"><a href="/wear/design/user-interface.html">UI Overview
</a></div>
</li>
<li class="nav-section">
<div class="nav-section-header empty"><a href="/wear/design/index.html">Design Principles
</a></div>
</li>
<li class="nav-section">
<div class="nav-section-header empty"><a href="/wear/notifications/creating.html">Creating Notifications for Android Wear
</a></div>
</li>
<li class="nav-section">
<div class="nav-section-header empty"><a href="/wear/notifications/remote-input.html">Receiving Voice Input from a Notification
</a></div>
</li>
<li class="nav-section">
<div class="nav-section-header empty"><a href="/wear/notifications/pages.html">Adding Pages to a Notification
</a></div>
</li>
<li class="nav-section">
<div class="nav-section-header empty"><a href="/wear/notifications/stacks.html">Stacking Notifications
</a></div>
</li>
<li class="nav-section">
<div class="nav-section-header"><a href="/reference/android/preview/support/package-summary.html">Notification Reference</a></div>
<ul class="tree-list-children">
<li class="nav-section">
<div class="nav-section-header-ref"><span class="tree-list-subtitle package" title="android.preview.support.v4.app">android.preview.support.v4.app</span></div>
<ul>
<li><a href="/reference/android/preview/support/v4/app/NotificationManagerCompat.html">NotificationManagerCompat</a></li>
</ul>
</li>
<li class="nav-section">
<div class="nav-section-header-ref"><span class="tree-list-subtitle package" title="android.preview.support.wearable.notifications">android.preview.support.wearable.notifications</span></div>
<ul>
<li><a href="/reference/android/preview/support/wearable/notifications/RemoteInput.html">RemoteInput</a></li>
<li><a href="/reference/android/preview/support/wearable/notifications/RemoteInput.Builder.html" >RemoteInput.Builder</a></li>
<li><a href="/reference/android/preview/support/wearable/notifications/WearableNotifications.html">WearableNotifications</a></li>
<li><a href="/reference/android/preview/support/wearable/notifications/WearableNotifications.Action.html">WearableNotifications.Action</a></li>
<li><a href="/reference/android/preview/support/wearable/notifications/WearableNotifications.Action.Builder.html">WearableNotifications.Action.Builder</a></li>
<li><a href="/reference/android/preview/support/wearable/notifications/WearableNotifications.Builder.html">WearableNotifications.Builder</a></li>
</ul>
</li>
</ul>
</li>
<li class="nav-section">
<div class="nav-section-header empty"><a href="/wear/license.html">License Agreement</a></div>
</li>
</ul>
</div>
</div> <!-- end side-nav -->
<script>
$(document).ready(function() {
scrollIntoView("devdoc-nav");
});
</script>
<div class="col-12" id="doc-col" >
<h1 itemprop="name" >Stacking Notifications</h1>
<div id="jd-content">
<div class="jd-descr" itemprop="articleBody">
<img src="/wear/images/11_bundles_B.png" height="200" width="169" style="float:right;margin:0 0 20px 40px" />
<img src="/wear/images/11_bundles_A.png" height="200" width="169" style="float:right;margin:0 0 20px 40px" />
<p>When creating notifications for a handheld device, you should always aggregate similar
notifications into a single summary notification. For example, if your app creates notifications
for received messages, you should not show more than one notification
on a handheld device&mdash;when more than one is message is received, use a single notification
to provide a summary such as "2 new messages."</p>
<p>However, a summary notification is less useful on an Android wearable because users
are not able to read details from each message on the wearable (they must open your app on the
handheld to view more information). So for the wearable device, you should
group all the notifications together in a stack. The stack of notifications appears as a single
card, which users can expand to view the details from each notification separately. The new
<a href="/reference/android/preview/support/wearable/notifications/WearableNotifications.Builder.html#setGroup(java.lang.String, int)">
<code>setGroup()</code></a> method makes this possible while allowing you to still provide
only one summary notification on the handheld device.</p>
<p>For details about designing notification stacks, see the
<a href="/wear/design/index.html#NotificationStacks">Design Principles of Android
Wear</a>.</p>
<h2 id="AddGroup">Add Each Notification to a Group</h2>
<p>To create a stack, call <a
href="/reference/android/preview/support/wearable/notifications/WearableNotifications.Builder.html#setGroup(java.lang.String, int)">
<code>setGroup()</code></a> for each notification you want in the stack, passing the same
group key. For example:</p>
<pre style="clear:right">
final static String GROUP_KEY_EMAILS = "group_key_emails";
NotificationCompat.Builder builder = new NotificationCompat.Builder(mContext)
.setContentTitle("New mail from " + sender)
.setContentText(subject)
.setSmallIcon(R.drawable.new_mail);
Notification notif = new WearableNotifications.Builder(builder)
.setGroup(GROUP_KEY_EMAILS)
.build();
</pre>
<p>By default, notifications appear in the order in which you added them, with the most recent
notification visible at the top. You can define a specific position in the group
by passing an order position as the second parameter for <a
href="/reference/android/preview/support/wearable/notifications/WearableNotifications.Builder.html#setGroup(java.lang.String, int)">
<code>setGroup()</code></a>.</p>
<h2 id="AddSummary">Add a Summary Notification</h2>
<p>It's important that you still provide a summary notification that appears on handheld devices.
So in addition to adding each unique notification to the same stack group, also add a summary
notification, but set its order position to be <a
href="/reference/android/preview/support/wearable/notifications/WearableNotifications.html#GROUP_ORDER_SUMMARY"><code>GROUP_ORDER_SUMMARY</code></a>.</p>
<pre>
Notification summaryNotification = new WearableNotifications.Builder(builder)
.setGroup(GROUP_KEY_EMAILS, WearableNotifications.GROUP_ORDER_SUMMARY)
.build();
</pre>
<p>This notification will not appear in your stack of notifications on the wearable, but
appears as the only notification on the handheld device.
</body>
</html>
</div>
<div class="content-footer layout-content-row"
itemscope itemtype="http://schema.org/SiteNavigationElement">
<div class="layout-content-col col-9" style="padding-top:4px">
<div class="g-plusone" data-size="medium"></div>
</div>
<div class="paging-links layout-content-col col-4">
</div>
</div>
</div> <!-- end jd-content -->
<div id="footer" class="wrap" >
<div id="copyright">
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
License</a>.
</div>
<div id="footerlinks">
<p>
<a href="/about/index.html">About Android</a>&nbsp;&nbsp;|&nbsp;
<a href="/legal.html">Legal</a>&nbsp;&nbsp;|&nbsp;
<a href="/support.html">Support</a>
</p>
</div>
</div> <!-- end footer -->
</div><!-- end doc-content -->
</div> <!-- end body-content -->
<!-- Start of Tag -->
<script type="text/javascript">
var axel = Math.random() + "";
var a = axel * 10000000000000;
document.write('<iframe src="https://2507573.fls.doubleclick.net/activityi;src=2507573;type=other026;cat=googl348;ord=' + a + '?" width="1" height="1" frameborder="0" style="display:none"></iframe>');
</script>
<noscript>
<iframe src="https://2507573.fls.doubleclick.net/activityi;src=2507573;type=other026;cat=googl348;ord=1?" width="1" height="1" frameborder="0" style="display:none"></iframe>
</noscript>
<!-- End of Tag -->
</body>
</html>