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 -
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
custom_notification_small.xml
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.
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.
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.
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!
