Android 4.1 Jelly Bean Notification Tutorial Part II


In Android 4.1 Jelly Bean Notification Tutorial we saw how simple notifications can be build on Android 4.1.

Now let us have a look at 3 new notification styles introduced in Jelly Bean.

There are 3 new classes Notification.InboxStyle, Notification.BigPictureStyle & Notification.BigTextStyle which which helps us in creating notifications with larger content area & picture review.

Let us have a look at how to use these notification styles and how exactly they look on device.

But before we start playing around with these styles, let us create coule of bitmaps for demonstration.

Bitmap smallBitmap = null;
Bitmap largeBitmap = null;
BufferedInputStream buf = null;
try {
	buf = new BufferedInputStream(getAssets().open("android1.jpg"));

	// Create the bitmap to be set in notification.
	largeBitmap = BitmapFactory.decodeStream(buf);
	buf.close();
} catch (Exception ex) {
	ex.printStackTrace();
}

try {
	buf = new BufferedInputStream(getAssets().open("me.jpeg"));

	// Create the bitmap to be set in notification.
	smallBitmap = BitmapFactory.decodeStream(buf);
	buf.close();
} catch (Exception ex) {
	ex.printStackTrace();
}

 
Now since we have the bitmaps ready, lets us have a look at Notification.BigPictureStyle first.

Builder builder = new Notification.Builder(this);
builder.setSmallIcon(R.drawable.ic_launcher);
builder.setTicker("Android Image downloaded.");
builder.setContentTitle("Android Image downloaded.");
builder.setContentText("View in full screen mode");
builder.setLargeIcon(smallBitmap);
builder.setAutoCancel(true);

Notification.BigPictureStyle bigPicutureStyle = new Notification.BigPictureStyle(builder);
bigPicutureStyle.bigLargeIcon(smallBitmap);
bigPicutureStyle.bigPicture(largeBitmap);
bigPicutureStyle.setBigContentTitle("Android Image downloaded.");
bigPicutureStyle.setSummaryText("Click on the image for full screen preview");

((NotificationManager) getSystemService(Context.NOTIFICATION_SERVICE)).notify(01, bigPicutureStyle.build());

 

And this is how it looks.

You can see that notification has taken bigger content area to display image which looks just awesome.
But there is a catch, the big content area is only assigned to the notification till it is the latest notification in the list. The moment you receive any other notification, it will shrink down and rely on the values set in Notification.Builder for display.

In next code snippet we will see how to use Notification.BigTextStyle as well as we will also see what happens to Notification.BigPictureStyle when the notification is pushed down from top position.

// POST A BIG PICTURE NOTIFICATION
{
	Builder builder = new Notification.Builder(this);
	builder.setSmallIcon(R.drawable.ic_launcher);
	builder.setTicker("Android Image downloaded.");
	builder.setContentTitle("Android Image downloaded.");
        builder.setContentText("View in full screen mode");
	builder.setLargeIcon(smallBitmap);
	builder.setAutoCancel(true);

	Notification.BigPictureStyle bigPicutureStyle = new Notification.BigPictureStyle(builder);
	bigPicutureStyle.bigLargeIcon(smallBitmap);
	bigPicutureStyle.bigPicture(largeBitmap);
	bigPicutureStyle.setBigContentTitle("Android Image downloaded.");
	bigPicutureStyle.setSummaryText("Click on the image for full screen preview");
        ((NotificationManager) getSystemService(Context.NOTIFICATION_SERVICE)).notify(01,bigPicutureStyle.build());
}
// AND THEN POST A BIG TEXT NOTIFICATION
{
	Builder builder = new Notification.Builder(this);
	builder.setSmallIcon(R.drawable.ic_launcher);
	builder.setTicker("Big Text Style Notification");
        builder.setContentTitle("BigTextStyle : This is very big content title for demonstration");
        builder.setContentText("BigTextStyle : This is very long summary text for demonstration");
	builder.setLargeIcon(smallBitmap);
	builder.setAutoCancel(true);

	Notification.BigTextStyle bigTextStyle = new Notification.BigTextStyle(builder);
	bigTextStyle.setBigContentTitle("BigTextStyle : This is very big content title for demonstration");
	bigTextStyle.setSummaryText("BigTextStyle : This is very long summary text for demonstration");
	((NotificationManager) getSystemService(Context.NOTIFICATION_SERVICE)).notify(02, bigTextStyle.build());
}

 

Fair enough.. now lets have a look at Notification.InboxStyle

Builder builder = new Notification.Builder(this);
builder.setSmallIcon(R.drawable.ic_launcher);
builder.setTicker("3 new messages from Chitranshu");
builder.setContentTitle("3 new messages from Chitranshu");
builder.setContentText("+ 5 more");
builder.setSubText("Inbox style notification demo");
builder.setLargeIcon(smallBitmap);
builder.setAutoCancel(true);

Notification.InboxStyle inboxStyle = new Notification.InboxStyle(builder);
inboxStyle.setBigContentTitle("3 new messages from Chitranshu");
inboxStyle.setSummaryText("+ 5 more");
((NotificationManager) getSystemService(Context.NOTIFICATION_SERVICE)).notify(03, inboxStyle.build());

 

And this is how it looks when we put all together.

Advertisements

5 comments

  1. Hi. First of all, thanks for the tutorial!
    I have one question: is it possible to show the big image in BigPictureStyle notification even when there are other notifications? Some way to stop it from shrinking..
    I don’t know if it’s already explained in the tutorial. If it is, I’m sorry, my English is not so good so I may not have seen it.
    Thanks!

  2. I’ve been fighting with the notification icon and cannot seem to remove the padding around it. How did you get the “bigPicture” and “largeIcon” to take up the entire square on the left side of the notification and not leave any padding? Thank you!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s