We’ve discussed and implemented basic Notifications in this post. In this tutorial, we’ll be looking into more advanced features of android notification and styling our notifications in different ways.

Android Notification Styling

Android Notification have plenty of powerful features that when used correctly would significantly improve the UX and user engagement. Some noteworthy features that we’ll be covering in this Android Notification tutorial are listed below.

  1. Notification Actions
  2. Heads Up Notification
  3. Big Text Style Notification
  4. Big Picture Style Notification
  5. Inbox Style Notification
  6. Message Style Notification

Android notification consists of three major components:

  1. Small Icon (often our app logo)
  2. Title
  3. Content Text

The introduction of Android Nougat (API 24) has given a new look to notifications as shown below.

android-nougat-notification-template-

The large icon now appears on the right. There’s an arrow besides the notification title that lets us expand, collapse the notification.

In this tutorial, we’ll be styling our notifications using some pre-defined awesome styles that Android has in store for us. We’ll be covering the following features at length.

  1. Android Notification Actions
  2. Heads Up Notifications
  3. Rich Notifications

Android Notification Actions

Android Notification actions are basically buttons placed below the body of the notification. A Notification action must include an icon, a label, and a PendingIntent to be fired when the action is selected by the user.

With the Introduction of Android N, the icons are omitted from the action buttons to give space to other components.

An example of notification actions in Pre Nougat devices is given below.

android notification before android N

Pre-Nougat Notification Action Design

An example of Notification Actions in Android N and above is given below.

 

Notification Action in Android Nougat

Heads Up Notifications

With the introduction of Android Lollipop (API level 21), notifications can appear in a small floating window (also called a heads-up notification) when the device is active (that is, the device is unlocked and its screen is on).

Such type of notifications are commonly seen when you’re using an application and you get a call. A small floating notification known as heads up notifications pops up with the notification actions to accept or decline a call.

Rich Notifications

Android allows us to add rich styles to our application with the introduction of Android L. Using these styles would make the notification look more appealing than ever. Some of the known styles that are used in many applications are listed below and are self-explanatory.

  • BigTextStyle
  • BigPictureStyle
  • InboxStyle
  • MessageStyle

We know that notifications on Android N can be expanded using the arrows. To expand notifications on pre-Nougat versions, you can swipe down over the notification using two fingers.

Not all Android versions would support the above styles. In case an Android OS doesn’t support the rich style, that style would simply be ignored.

Now let’s jump into the business end of this tutorial and develop an application that’ll have all the above features.

Android Notification Tutorial Project Structure

android-efficient-search-project-structure-253x450

Android Notification Tutorial Code

The code for the activity_main.xml is given below:

We’ve added a button for each type of notification that we’ll be discussing.

The skeleton code for the MainActivity.java is given below.

The method clearNotification() is used to clear any existing notifications from the notification bar.
The method getLaunchIntent() returns an instance of PendingIntent which when triggered from the notification, will relaunch the application.

Before we delve into the implementation of each type of notification, let’s define the BroadcastReceiver as shown below.

Update the AndroidManifest.xml file with the receiver defined as shown below.

Adding actions inside a notification

In the above code, we set the various styles on the instance builder.

setColor() sets the custom color for the notification icon, title and action button texts.

addAction() is used to set the action buttons beneath the notification content. It expects three params: icon, text and the instance of PendingIntent.

setContentIntent() sets the PendingIntent that’ll be triggered when the body of the notification is clicked. In the above code we’ve simply added the PendingIntent to relaunch the application.

setAutoCancel(true) is used to dismiss the notification when its clicked.

NotificationManager class is used to display the notification.

The output of the application when the above type of notification is triggered is given below.
android notification example

Note:

  • When the VIEW button is clicked, the url is launched in the browser but the notification isn’t dismissed.
  • When the DISMISS button is clicked the notification is cleared but the notification tray stays open.
  • When the Notification content is clicked, the notification is dismissed as well as the activity is re-launched. This is where getLaunchIntent() and clearNotification() methods are invoked.

Implementing Heads Up Notification

To set a notification as heads up notification, two properties need to set on the builder instance.

Swiping a heads up notification would dismiss it. If it’s not dismissed, the heads-up notifications will fade away and change into a standard notification in the status bar.

The output of heads up notification is given below.
android notification heads up

BigTextStyle Notification

A notification can be customised into a big text style notification by setting the style as
NotificationCompat.BigTextStyle(). The string to be displayed is entered inside the method bigText().

The output of above type of notification is given below.
android notification big text style

BigPictureStyle Notification

For BigPicture to be displayed inside a notification the style is set as NotificationCompat.BigPictureStyle().bigPicture(bitmap)).

The output with the above type of notification is given below.
android notification custom style big picture

InboxStyle Notification

An inbox style notification is set by using the style new NotificationCompat.InboxStyle().
Each message is placed inside the method addLine(). The summary text of all the messages is placed inside the method setSummaryText().
setContentTitle() is replaced with setBigContentTitle() in this style

The output of the above type of notification is given below
custom android notification inbox style

Message Style Notification

Message Style is introduced with Android N. Typically used for chats.

In the above code NotificationCompat.MessagingStyle(String) contains a string that represents the current user(Typically in a chat its you!).
Each message is added in the method addMessage() with the timestamp as well as sender name.
If the sender name is set to null it signifies that the message is from the current user(you) and the name is taken from the constructor.

The output of the above type of notification is given below.
android message style notification

Adding all the above methods in the MainActivity.java would give us the below code.

This brings an end to android notification tutorial. We’ve styled our notifications in some interesting ways. You can download the final Android notification example project from the link below.

Reference: Official Doc

By admin

Leave a Reply

%d bloggers like this: