AndroidPub
Published in

AndroidPub

Custom Layouts for your Push Notification

powered by

As you know the Android framework is open source and hence provides a lot of flexibility regarding each and every aspect of your app. Many mobile companies like Xiaomi, OnePlus and Samsung provide their mobile OS which is built on top of the stock Android OS. The flexibility is such that you can customise the look and feel of your app at the very minute detail, right from icons used to display as a widget on your phone’s screen to the push notifications which appear in your phone’s system tray.

In this article, we will be discussing how to render your own layout for a push notification. By default, a push notification from an app looks like this -

Default Push Notification

These notifications are very common and most of the notifications look pretty much the same. So if you want your app’s push notification to stand out for the user, how will you do it?

Android has the answer for you in it’s scarcely used class RemoteViews. Using RemoteViews, you can inflate pretty much any layout of your choice. Before we start with an example, an Android push notification has two styles. When the notification appears in the system it is in the normal style i.e, you cannot view the image attached to it (if there is one) and the other is the BigPicture style which renders the image as well. Android provides the capability to customise both these styles. Let’s start with the example now -

Pre-requisite

In this example, we are considering that your app is already integrated with CleverTap. If you have not, then visit CleverTap and integrate your app following their in-depth documentation. Also we are considering you are using FCM to register your app with Google to receive push notifications.

Layouts

We will start with creating the XML files for the two kinds of styles in which an Android push notification displays, the normal style and BigPicture style. Currently the Android OS only allows TextViews and ImageViews to be shown in a Push notification. Create the following two XML files in your layout folder under res folder of your project.

custom_notification.xml

XML Layout for the Big style

custom_notification_small.xml

XML layout for the normal style

Code to render these layouts

We are assuming that you have integrate FCM, if so you will have a class extending FirebaseMessagingService. The key values used in this code snippet is just for example, you can set any key of your choice.

Extending FirebaseMessagingService to render the notification

CleverTap Dashboard

On the CleverTap Dashboard, while creating a push notification, enter the Title and Message as it is mandatory and click on “Advanced” checkbox and then click “Add pair” under Custom Key-Value Pairs. Fill in the key value pairs as per your requirements. Click on “Send a test notification” and send a push notification to your FCM token and make sure it works.

CleverTap Dashboard

Power in your hands

So with this example, you can design fancy eye catching push notifications for your users. Pretty much everything is customisable, you can change the text colour, text size, text appearance and text placement too. The same goes with the images as well. You can have any number of images, you can keep them in your drawable or you can download it from a link the way it has been done in the above example code. The BigPicture style lets you have another proper image to be rendered. The height and width of the big picture can be customised. Any kind of image can be used, but it is advisable to use “.png” images in your drawable folder. If you are downloading the image from a URL then there are no such restrictions. The background colour of the push notification can be changed from the default white to any colour of your choice.

This is how your notification will look in the Normal style
This is how your notification will look in the Big style

The permutations and combinations are several and it is upto your creativity to make use of this feature provided by Android to the best of your app’s strength.

If you found this article of some help, please do comment and share it!

--

--

--

The (retired) Pub(lication) for Android & Tech, focused on Development

Recommended from Medium

Learning to Code: Day 32 — Building a Survey Page

Classes, Functions, Operators, Variables, Data Types, and Statics C# Explained by a Castle Mnemonic

Which makes Segment Routing the best suited approach for 5G?

The new network, supported by new technologies and new skills

Database View in Ruby on Rails

Database View | Photo by Paul Skorupskas on Unsplash

Creating a Blazor App with .Net Core

Laravel Multiple Guards Authentication: Setup and Login

Ubuntu upgrade from 18.04 to 20.04 LTS: Installation Requirements for an Existing Rails Application

Ubuntu upgrade from 18.04 to 20.04 LTS

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Darshan Pania

Darshan Pania

Android Engineer @ CleverTap, Developer by day, writer by night, turning coffee to code daily!

More from Medium

Android ViewModel and ViewModel Factory

Dagger with Android Achitecture Components using Kotlin

TDD — Part III, Hilt and Robolectric (Android)

Handling project dependencies using type-safe project accessor