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