Push Notification is a powerful tool for companies to send out important messages to their users. If used correctly — it can significantly increase user engagement. An average US smartphone user receives 46 push notifications daily. With so many push notifications on a device, your notification must stand out from the rest. Starting with Android 8.0, a lot of styling options have been introduced in android push notifications to make them look more appealing. We’ll review all these styling options available in android along with the methods to implement them.
Note: Since there are a lot of styling options available, we will cover them in a 2 part series. This is the first part where we will talk about styling options that enhance the design of a push notification. In the next article, we’ll cover advanced options available in push notifications such as sticky notification, grouping, timeout, etc.
Before designing a push notification, let’s first take a look at how a push notification appears on a user’s device.
How a Push notification appears on an android device
There are 5 major locations and formats in which push notifications can be visible to the user:
1. Icon in the status bar
When you trigger a notification, your app icon appears in the status bar showing that there is an unread notification from the app
2. Notification drawer
Users can swipe down on the status bar to open the notification drawer, where they see the notification first in collapsed mode
Users can drag down on a notification in the drawer to reveal the expanded view or click on the down arrow next to the header, which shows additional content and action buttons, if provided.
A notification remains visible in the notification drawer until dismissed by the app or by the user.
3. A Badge on app’s icon
A coloured dot with a counter on the app launcher icon to indicate new notifications. Supported in Android 8.0 (API level 26) and higher.
To learn more about how badges work, read Notification badges.
4. Lock screen
Beginning with Android 5.0, notifications can appear on the lock screen. You can programmatically set the level of detail visible on the lock screen, or should the notification be shown on the lock screen at all. For instance, you might not want to show OTP / verification code on lock screen or do not show the content of chat app notifications on lock screen.
Setting lock screen visibility for a notification
A user may choose to show notifications when their screen is locked. You can control which part of the notification content should be visible on the lock screen based on the visibility options.
For each notification you create, there are 3 visibility options available:
1. Public
Show the notification's full content.
2. Private
Show basic information, such as the notification's icon and the content title, but hides the notification's full content. In place of the regular content – which will be hidden – you can show text that doesn't reveal personal information, such as "2 new messages"
3. Secret
You can set the lock screen visibility with the setVisibility() method in notification.builder.
Starting with Android 8.0, lock screen visibility is set at notification channel level. This gives the flexibility to your users to manage the lock screen appearance for each channel, including the option to disable all lock screen notifications.
5. Heads-up notification
Beginning with Android 5.0, notifications can briefly appear in a floating window called a heads-up notification. Only high-priority notifications appear in the heads-up window, and it appears only if the device is unlocked.
You can use this behavior to send important updates which need immediate action by the user. For example - An incoming message by a user on a chat app.
The heads-up notification appears the moment your app issues the notification and it disappears after a moment, but remains visible in the notification drawer as usual.
To trigger heads-up notifications, you’ll have to set notification priority and notification channel importance as `high`.
You can learn more about how the notification visibility changes based on notification priority in the next sections.
6.Wear OS devices
If the user has a paired Wear OS device, all your notifications appear there automatically, including expandable detail and action buttons.
You can also enhance the experience by customizing some appearances for the notification on wearables and providing different actions, including suggested replies and voice input replies. For more information, see how to add wearable-specific features to your notification.
Now that we have understood how the push notifications appear on your mobile and wearable device, we can move on to designing our push notification.
How Priority Settings Impact Push Notification Visibility and Interruption level?
All notifications show up in the notification drawer and app icon badge, irrespective of their importance.
Other interruptions like making a sound, appearing in the heads-up window and status bar are determined by notification priority for Android 7.1 and lower, notification channel importance level for Android 8 and above.
Starting in Android 8, every notification should be assigned a channel, which represents the category to which the notification belongs. For instance, offers can be a category that includes all messages related to new updates and offers, while authentication can be a category for sending OTPs and verification messages.
For each channel, you can set the visual and auditory behavior that is applied to all notifications in that channel. The importance of your notification channel is set when you send your first notification to that channel, and it cannot be altered afterwards. Only the user can change the channel behaviors from the system settings.
Interruption level based on notification importance
After setting the visual and auditory behavior of a notification, the next step is to design the notification.
Designing the push notification
A typical push notification structure consists of 3 main components:
- Header area
- Content area
- Action area
The visibility of the content depends on how the user is viewing the notification. Generally the notification is visible in collapsed mode where the header area and some subtext is visible. If the user expands the notification, they can see the entire notification content along with the action area.
1. Header Area
Header sets the context of “who sent the notification and when”.
2. Content Area
This is where you add the actual notification content. Only content title and one line of text (approx. 40 characters) will be shown in collapsed view. If you have content more than 40 characters in length, create an expandable notification.
Try not to have more than 3 lines of text (approx. 120 characters) in your content. Users generally don’t engage or read the notifications with lengthy content.
You can also have a requirement where you want to show the large icon only in collapsed mode and show a large image when the notification is expanded like in the below case. You can set it using NotificationCompat.BigPictureStyle.bigLargeIcon(). Refer add a large icon in expanded notification for further details
3. Action Area
There are 2 ways in which you can initiate an action after clicking on the notification:
- Notification tap
- Action buttons
Although it's not required, it's a good practice for every notification to open an appropriate app activity when it's tapped. You can use it to open a web link or an internal page inside the app.
In addition to this default notification action, you can add action buttons that complete an app-related task from the notification—often without opening the app. A notification can have up to three actions at the bottom. You can use the action button to either open a web page using http link, internal app page using deeplink or initiate a click action directly from the notification without opening the app like approving a request.
In Android 7.0 and later, actions are shown without icons to accommodate more text. An icon should still be provided because devices with earlier versions of the OS rely on it, as will Android Wear devices.
Allowed Action button text length depends on the number of buttons you are adding. If your button text is more than the allowed limit, the button text will be trimmed in final notification
For details on how to add an action button, refer to the add action button section.
You can also add a direct reply action which allows users to enter text directly into the notification. This response is delivered to your app without opening the app. For example, you can use a direct reply action to let users reply to text messages or update task lists from within the notification. Refer to the steps mentioned in notification.builder - add reply button to add a direct reply button.
If you're using this functionality for a messaging app, keep the notification present after the user has sent the reply, and wait until the conversation is paused before automatically dismissing it.
Other Styling Options
1. Add background color to your notification
Supported in Android 8 and above devices. You can change the background color of a notification by calling 2 methods:
- setcolor() - this is where you will set which color should be set as the background color
- setColorized() - set this to True if you want your background color to be displayed
2. Inbox-style notification
You can use inbox-style notification if you want to add multiple short summary lines each truncated to one line, such as snippets from incoming emails. Can be used for messaging and mailing applications.
You can add up to 6 lines of text. Set this with NotificationCompat.InboxStyle. To add a new line, call addLine()
3. Media style notification
Media style messages are best suitable for applications like music apps or podcast apps which will have continuous media playing in the background. You can add up to 5 action buttons in media style notification. It also gives the flexibility to add up to 3 action buttons in collapsed view
You can set this with NotificationCompat.MediaStyle method
These are all the methods available to design a rich notification experience for your user. Apart from designing, there are other configurations that give you control over how your user will interact with your notifications. We’ll cover those methods in our next article.
Too many methods and configurations to apply in android push notifications? Don’t worry, you can avoid building all these steps and try out SuprSend’s easy-to-use template editor for creating your android push notifications. It has all the advanced configuration options to design a notification that best suits your use case. Apart from the ease of designing the notification, you can also track which content is working for your users with notification analytics.
SuprSend gives you the flexibility to send notifications to all the channels (android, ios, web push, sms, email, slack, whatsapp, app inbox ) with a single API integration. Now, you can focus your engineering bandwidth on solving your core business problem, and let SuperSend handle the communication infrastructure for you. Give SuprSend a try!
