1page.title=Using Big View Styles
2page.tags=notifications
3helpoutsWidget=true
4
5trainingnavtop=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="{@docRoot}design/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,
41normal view and big view. The big view of a notification only appears when the
42notification is expanded. This happens when the notification is at the top of
43the drawer, or the user clicks the notification. </p>
44
45<p>Big views were introduced in
46Android 4.1, and they're not supported on older devices. This lesson describes
47how to incorporate big view notifications into your app while still providing
48full functionality via the normal view. See the <a
49href="{@docRoot}guide/topics/ui/notifiers/notifications.html#BigNotify">
50Notifications 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
70big 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
78when the user clicks the notification. Keep this in mind as you design your notifications&mdash;first
79provide the functionality in the normal view, since
80this 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})
85to 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
91that will be launched if the user
92clicks the notification itself. The method
93{@link android.support.v4.app.NotificationCompat.Builder#setContentIntent setContentIntent()}
94defines a pending intent that should be fired when the user
95clicks the notification, thereby launching the activity.</p>
96
97<pre>Intent resultIntent = new Intent(this, ResultActivity.class);
98resultIntent.putExtra(CommonConstants.EXTRA_MESSAGE, msg);
99resultIntent.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.
104PendingIntent 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.
114builder.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.
124Intent dismissIntent = new Intent(this, PingService.class);
125dismissIntent.setAction(CommonConstants.ACTION_DISMISS);
126PendingIntent piDismiss = PendingIntent.getService(this, 0, dismissIntent, 0);
127
128Intent snoozeIntent = new Intent(this, PingService.class);
129snoozeIntent.setAction(CommonConstants.ACTION_SNOOZE);
130PendingIntent 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.
135It sets the style for the big
136view 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()}
138to add the <strong>Snooze</strong> and <strong>Dismiss</strong> buttons (and
139their associated pending intents) that will appear in the notification's
140big view:</p>
141
142<pre>// Constructs the Builder object.
143NotificationCompat.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