docs/html/wear/notifications/pages.html - android_frameworks_base - Gitiles

 <!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>Adding Pages to a Notification | 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" >Adding Pages to a Notification</h1>


   <div id="jd-content">


     <div class="jd-descr" itemprop="articleBody">
     <img src="/wear/images/09_pages.png" height="200" style="float:right;margin:0 0 20px 40px" />
 <img src="/wear/images/08_pages.png" height="200" style="float:right;margin:0 0 20px 40px" />

 <p>When you'd like to provide more information without requiring users
 to open your app on their handheld device, you can
 add one or more pages to the notification on Android Wear. The additional pages
 appear immediately to the right of the main notification card.
 For information about when to use and how to design
 multiple pages, see the
 <a href="/wear/design/index.html#NotificationPages">Design Principles of Android
 Wear</a>.</p>


 <p>When creating a notification with multiple pages, start by creating the main notification
 (the first page) the way you'd like the notification to appear on a phone
 or tablet. Then, add pages one at a time with the
 <a href="/reference/android/preview/support/wearable/notifications/WearableNotifications.Builder.html#addPage(android.app.Notification)">
 <code>addPage()</code></a> method, or add multiple pages in a <code><a href="/reference/java/util/Collection.html">Collection</a></code> with the
 <a href="/reference/android/preview/support/wearable/notifications/WearableNotifications.Builder.html#addPages(java.util.Collection<android.app.Notification>)">
 <code>addPages()</code></a> method.</p>


 <p>For example, here's some code that adds a second page to a notification:</p>

 <pre>
 // Create builder for the main notification
 NotificationCompat.Builder notificationBuilder =
         new NotificationCompat.Builder(this)
         .setSmallIcon(R.drawable.new_message)
         .setContentTitle("Page 1")
         .setContentText("Short message")
         .setContentIntent(viewPendingIntent);

 // Create a big text style for the second page
 BigTextStyle secondPageStyle = new NotificationCompat.BigTextStyle();
 secondPageStyle.setBigContentTitle("Page 2")
                .bigText("A lot of text...");

 // Create second page notification
 Notification secondPageNotification =
         new NotificationCompat.Builder(this)
         .setStyle(secondPageStyle)
         .build();

 // Create main notification and add the second page
 Notification twoPageNotification =
         new WearableNotifications.Builder(notificationBuilder)
         .addPage(secondPageNotification)
         .build();
 </pre>


 </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>
	<!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>Adding Pages to a Notification \| 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"> </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" >Adding Pages to a Notification</h1>






	<div id="jd-content">


	<div class="jd-descr" itemprop="articleBody">
	<img src="/wear/images/09_pages.png" height="200" style="float:right;margin:0 0 20px 40px" />
	<img src="/wear/images/08_pages.png" height="200" style="float:right;margin:0 0 20px 40px" />

	<p>When you'd like to provide more information without requiring users
	to open your app on their handheld device, you can
	add one or more pages to the notification on Android Wear. The additional pages
	appear immediately to the right of the main notification card.
	For information about when to use and how to design
	multiple pages, see the
	<a href="/wear/design/index.html#NotificationPages">Design Principles of Android
	Wear</a>.</p>


	<p>When creating a notification with multiple pages, start by creating the main notification
	(the first page) the way you'd like the notification to appear on a phone
	or tablet. Then, add pages one at a time with the
	<a href="/reference/android/preview/support/wearable/notifications/WearableNotifications.Builder.html#addPage(android.app.Notification)">
	<code>addPage()</code></a> method, or add multiple pages in a <code><a href="/reference/java/util/Collection.html">Collection</a></code> with the
	<a href="/reference/android/preview/support/wearable/notifications/WearableNotifications.Builder.html#addPages(java.util.Collection<android.app.Notification>)">
	<code>addPages()</code></a> method.</p>


	<p>For example, here's some code that adds a second page to a notification:</p>

	<pre>
	// Create builder for the main notification
	NotificationCompat.Builder notificationBuilder =
	new NotificationCompat.Builder(this)
	.setSmallIcon(R.drawable.new_message)
	.setContentTitle("Page 1")
	.setContentText("Short message")
	.setContentIntent(viewPendingIntent);

	// Create a big text style for the second page
	BigTextStyle secondPageStyle = new NotificationCompat.BigTextStyle();
	secondPageStyle.setBigContentTitle("Page 2")
	.bigText("A lot of text...");

	// Create second page notification
	Notification secondPageNotification =
	new NotificationCompat.Builder(this)
	.setStyle(secondPageStyle)
	.build();

	// Create main notification and add the second page
	Notification twoPageNotification =
	new WearableNotifications.Builder(notificationBuilder)
	.addPage(secondPageNotification)
	.build();
	</pre>




	</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>  \|
	<a href="/legal.html">Legal</a>  \|
	<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>