VRT NWS Android Rich Push

How we managed to make our notification stand out from the crowd

Published in

VRT Digital Products

6 min readApr 11, 2019

Our VRT NWS app is in big competition with other news apps to grab your daily need for news. One effective approach to lure users is by using push notifications.
Every time a push is sent we see a huge influx on our dashboards.

Besides the content, the way a push notification is presented to the users can be a deciding factor.
Standing out is key!

Our custom notification features a full width image and allows for better branding (look at that big VRT NWS logo!).
Whilst still adhering to the look and feel of the Android ecosystem.

This post will be about how we went from a boring push notifications to a rich push notifications.

Incremental Steps

Android offers many ways of customizing your notification to your heart’s content.
Besides the obvious ways of choosing a custom notification icon or background color, Android also offers a few predefined views you can choose from:

BigTextStyle
Messaging Style
BigPictureStyle
InboxStyle
MediaStyle (shown above)

One such view we investigated was with the use of a BigPictureStyle.
It adds a placeholder where you can store an image.
However we did not like the way the text is cut off at the end and the placement of the featured image.

Another option is to use the .setLargeIcon(Bitmap bitmap)on the NotificationBuilder this adds a smaller icon on the right side of the notification.

Even though this might seems like a small change. Providing a small icon makes your notification stand out more than 99% of all the other notifications.
We opted to go live with this and let our user get accustomed to this little article photo.

But of course we did not stop there.
We drew inspiration from Kitchen Stories’ custom notification and wondered how they did it.

Custom Notification Layouts

Enter the realms of custom notification layouts.

RemoteView

A custom notification is done by setting a RemoteView on the NotificationBuilder
If you have ever created a widget this will be very familiar.
A RemoteView is limited to support for the following layouts:

This means:

No support for interactive views. So no view manipulations inside a notification. Even though ViewPager is supported you can’t just swipe between pages inside a notification.
No custom font. Even though TextView is supported.
No support for ConstraintLayout
However for a simple layout other ViewGroup‘s should be more than adequate.

We started off by creating a custom layout in XML

As you can see from the Layout Preview we provided a blackish gradient on top of the image, so the top - (logo) and bottom part (text) are more readable and the background image is a bit more muted.

Android provides the .setBigContentView and .setContentView methods.
Both take a RemoteView as an argument.

According to the official documentation a big content view can be up to 256dp maximum height and a small content view 64dp.

As the names suggest you can differentiate how your notification looks if the notification is expanded or not.
We simply opted for a normal text notification instead of providing an alternative small custom layout.

ConstraintLayout in RemoteView

Note that our notification_pill is a ‘complex’ custom view which makes extensive use of ConstraintLayout and custom drawables.
The custom view is used throughout the app and simply refactoring it to use the supported ViewGroup`s was no option. So we came up with an elegant solution to this problem.

We solved this by drawing a Bitmap of this image when creating the RemoteView.

Using this Bitmap and the Bitmap of the article, inflating and binding to this XML differs slightly from how you would normally inflate a layout.

After that it is as easy as setting this RemoteView on the builder.

Et voilà

Some lessons learned:

Make sure to test your rich push notifications on different devices. There is a reason why Android opted to go for a standardized way of showing notifications.
We learned this the hard way and of course it involved a Samsung phone.
They have a custom dark mode which made our white text unreadable.
When a push is received we do a backend call to get the image url to start downloading the image. If this were to fail we do not want the user to not see any notification. That is why we opted to push a normal text notification first and simultaneously starting the image download. When ready we again post a notification on the same notification id.
Test on multiple devices to see if your custom notification is readable and usable.
You can bind multiple click listeners on RemoteViews. You can simply have two views leading to different views inside your app.
Make sure your backend/image service is able to cope with the high load received from a push.
Creating a custom notification is low hanging fruit. We had half a day of development on Android.
Business loves rich push notifications ♥️

BONUS! Live Election Results

On the 26th of May 2019 the general elections will be held in Belgium.
As public broadcaster VRT has heavily invested in proper contextualization of these elections. A special page was therefore designed in the app with among other things: a voting guide, articles and explainer videos.

On the day of the elections we will automatically keep subscribers up to date with the latest results with a custom rich push notification.
The user doesn’t even have to open up the app.

The custom notification shows a little teaser image of the counted votes.
And as day goes by, the graph will expand full width indicating completion.

The payload of the push notification contains everything we need to construct this notification.
Yes, even that image. Encoded as Base64 inside the payload.

Thanks for reading this post.
Please feel free to clap, share or follow.

Questions? Leave them below and we will try and answer them.