1 page.title=Using Big View Styles 2 Styles parent.title=Notifying the User 3 parent.link=index.html 4 5 trainingnavtop=true 6 next.title=Displaying Progress in a Notification 7 next.link=display-progress.html 8 9 @jd:body 10 11 <div id="tb-wrapper"> 12 <div id="tb"> 13 14 <!-- table of contents --> 15 <h2>This lesson teaches you to</h2> 16 <ol> 17 <li><a href="#activity">Set Up the Notification to Launch a New Activity</a></li> 18 <li><a href="#big-view">Construct the Big View</a></li> 19 </ol> 20 21 <!-- other docs (NOT javadocs) --> 22 <h2>You should also read</h2> 23 24 <ul> 25 <li> 26 <a href="{@docRoot}guide/topics/ui/notifiers/notifications.html">Notifications</a> API Guide 27 </li> 28 <li> 29 <a href="{@docRoot}guide/components/intents-filters.html"> 30 Intents and Intent Filters 31 </a> 32 </li> 33 <li> 34 <a href="{@docRoot}design/patterns/notifications.html">Notifications</a> Design Guide 35 </li> 36 </ul> 37 38 39 </div> 40 </div> 41 42 <p>Notifications in the notification drawer appear in two main visual styles, 43 normal view and big view. The big view of a notification only appears when the 44 notification is expanded. This happens when the notification is at the top of 45 the drawer, or the user clicks the notification. </p> 46 47 <p>Big views were introduced in 48 Android 4.1, and they're not supported on older devices. This lesson describes 49 how to incorporate big view notifications into your app while still providing 50 full functionality via the normal view. See the <a 51 href="{@docRoot}guide/topics/ui/notifiers/notifications.html#BigNotify"> 52 Notifications API guide</a> for more discussion of big views.</p> 53 54 <p>Here is an example of a normal view: </p> 55 56 <img src="{@docRoot}images/training/notifications-normalview.png" width="300" height="58" alt="normal view" /> 57 58 <p class="img-caption"> 59 <strong>Figure 1.</strong> Normal view notification. 60 </p> 61 62 63 <p>Here is an example of a big view:</p> 64 65 <img src="{@docRoot}images/training/notifications-bigview.png" width="300" height="143" alt="big view" /> 66 <p class="img-caption"> 67 <strong>Figure 2.</strong> Big view notification. 68 </p> 69 70 71 <p> In the sample application shown in this lesson, both the normal view and the 72 big view give users access to same functionality:</p> 73 74 <ul> 75 <li>The ability to snooze or dismiss the notification.</li> 76 <li>A way to view the reminder text the user set as part of the timer.</li> 77 </ul> 78 79 <p>The normal view provides these features through a new activity that launches 80 when the user clicks the notification. Keep this in mind as you design your notifications—first 81 provide the functionality in the normal view, since 82 this is how many users will interact with the notification.</p> 83 84 <h2 id="activity">Set Up the Notification to Launch a New Activity</h2> 85 86 <p>The sample application uses an {@link android.app.IntentService} subclass ({@code PingService}) 87 to construct and issue the notification.</p> 88 89 90 <p>In this snippet, the 91 {@link android.app.IntentService} method 92 {@link android.app.IntentService#onHandleIntent onHandleIntent()} specifies the new activity 93 that will be launched if the user 94 clicks the notification itself. The method 95 {@link android.support.v4.app.NotificationCompat.Builder#setContentIntent setContentIntent()} 96 defines a pending intent that should be fired when the user 97 clicks the notification, thereby launching the activity.</p> 98 99 <pre>Intent resultIntent = new Intent(this, ResultActivity.class); 100 resultIntent.putExtra(CommonConstants.EXTRA_MESSAGE, msg); 101 resultIntent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK | 102 Intent.FLAG_ACTIVITY_CLEAR_TASK); 103 104 // Because clicking the notification launches a new ("special") activity, 105 // there's no need to create an artificial back stack. 106 PendingIntent resultPendingIntent = 107 PendingIntent.getActivity( 108 this, 109 0, 110 resultIntent, 111 PendingIntent.FLAG_UPDATE_CURRENT 112 ); 113 114 // This sets the pending intent that should be fired when the user clicks the 115 // notification. Clicking the notification launches a new activity. 116 builder.setContentIntent(resultPendingIntent); 117 </pre> 118 119 <h2 id="big-view">Construct the Big View</h2> 120 121 <p>This snippet shows how to set up the buttons that will appear in the big view:</p> 122 123 <pre> 124 // Sets up the Snooze and Dismiss action buttons that will appear in the 125 // big view of the notification. 126 Intent dismissIntent = new Intent(this, PingService.class); 127 dismissIntent.setAction(CommonConstants.ACTION_DISMISS); 128 PendingIntent piDismiss = PendingIntent.getService(this, 0, dismissIntent, 0); 129 130 Intent snoozeIntent = new Intent(this, PingService.class); 131 snoozeIntent.setAction(CommonConstants.ACTION_SNOOZE); 132 PendingIntent piSnooze = PendingIntent.getService(this, 0, snoozeIntent, 0); 133 </pre> 134 135 <p>This snippet shows how to construct the 136 {@link android.support.v4.app.NotificationCompat.Builder Builder} object. 137 It sets the style for the big 138 view to be "big text," and sets its content to be the reminder message. It uses 139 {@link android.support.v4.app.NotificationCompat.Builder#addAction addAction()} 140 to add the <strong>Snooze</strong> and <strong>Dismiss</strong> buttons (and 141 their associated pending intents) that will appear in the notification's 142 big view:</p> 143 144 <pre>// Constructs the Builder object. 145 NotificationCompat.Builder builder = 146 new NotificationCompat.Builder(this) 147 .setSmallIcon(R.drawable.ic_stat_notification) 148 .setContentTitle(getString(R.string.notification)) 149 .setContentText(getString(R.string.ping)) 150 .setDefaults(Notification.DEFAULT_ALL) // requires VIBRATE permission 151 /* 152 * Sets the big view "big text" style and supplies the 153 * text (the user's reminder message) that will be displayed 154 * in the detail area of the expanded notification. 155 * These calls are ignored by the support library for 156 * pre-4.1 devices. 157 */ 158 .setStyle(new NotificationCompat.BigTextStyle() 159 .bigText(msg)) 160 .addAction (R.drawable.ic_stat_dismiss, 161 getString(R.string.dismiss), piDismiss) 162 .addAction (R.drawable.ic_stat_snooze, 163 getString(R.string.snooze), piSnooze); 164 </pre> 165 166 167 168
