Outlook on Notifcations

A complete guide to Android Push Notifications - Part I: Design

April 3, 2023

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

Notification icons appear on the left side of the status bar

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

Notification in the drawer - collapsed view

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.

Notification in expanded view

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.

Counter on app icon showing there are new notifications

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.

Notifications on the lock screen with sensitive content hidden

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.

Notification with visibility set as Public
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"

Notification with visibility set as Private
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.

A heads-up notification appears in front of the foreground 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.

Notifications automatically appear on a paired Wear OS device

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.

Notification settings view on user's device for a Clock App

Interruption level based on notification importance

Importance Behaviour Usage Channel Importance Notification Priority
HIGH Makes a sound and appears in heads-up window Time-critical information that the user must know, or act on, immediately IMPORTANCE_HIGH PRIORITY_HIGH or PRIORITY_MAX
DEFAULT Makes a sound Information that should be seen at the user’s earliest convenience, but not interrupt what they're doing IMPORTANCE_DEFAULT PRIORITY_DEFAULT
LOW No sound but appears in the status bar Generic alerts and updates that the user can see at their preferred time IMPORTANCE_LOW PRIORITY_LOW
MIN No sound and does not appear in the status bar Non-essential information that can wait or isn’t specifically relevant to the user IMPORTANCE_MIN PRIORITY_MIN

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:

  1. Header area
  2. Content area
  3. 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”.

A notification with basic details - Header area

Field type and Requirement Obligation Description How to set it
Small icon Mandatory Small icon is visible at the top left side of your header area, generally used to show your app logo. If your app sends a wide variety of notifications, you may replace your app's identity icon with a symbol that reflects the content type. For example, Google Now uses a cloud icon for weather notifications. setSmallIcon()
App name NA The name of the app automatically appears in the notification. -
Header text Optional Header text is usually only needed if an app sends notifications from multiple sources, such as the account name for users with multiple accounts. setSubText()
Timestamp Optional Used to show the time of receiving the notification. This is generally provided by the system but you can override it with setWhen() setShowWhen(boolean)
Expand Indicator NA This appears if the notification has more content in the expanded view. -

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.

A notification with basic details - Content area

Field type and Requirement Obligation Description How to set it
Content Title Mandatory A brief headline for the notification. Keep it simple and crisp. Should not extend to more than 30 characters setContentTitle()
Content Text Mandatory Text of the notification that you want to send to your notifications. 1 line of text (approx. 40 characters) will be visible in collapsed mode. For large texts in expandable view, use bigTextStyle() method setContentText() for one line of text, set with NotificationCompat.BigTextStyle() for large text
Large icon Optional Large icon is visible at the left or right side of your notification content. Used generally to show the avatar or profile image of a person in chat platforms. Use a round icon to represent a person and a square icon for any other image. setLargeIcon()
Large image Optional Instead of giving content text, you can also add an image in the expandable notification. Please note that you can add either large text or an image in expanded view. If both image and text are added, 1 line of text will be shown in collapsed view, and the image will be shown in expanded view. NotificationCompat.BigPictureStyle

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

 Large icon - Collapsed view
Large image shown in Expanded view

3. Action Area

There are 2 ways in which you can initiate an action after clicking on the notification:

  1. Notification tap
  2. 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

# of buttons Text length (including spaces)
1 49 characters
2 24 characters each
3 14 characters each

For details on how to add an action button, refer to the add action button section.

A notification with basic details - Action Area

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.

Tapping the "Reply" button opens the text input

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:

  1. setcolor() - this is where you will set which color should be set as the background color
  2. 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

A notification using NotificationCompat.MediaStyle

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!

Written by:

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Implement a powerful stack for your notifications

By clicking “Accept All Cookies”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. View our Privacy Policy for more information.