Android: Creating a custom notification layout (with an image or photo)
As you probably know, there are quite a few possibilities when configuring a notification to be shown in Android. From setting some basic values like the small icon or the title, to other advanced ones like preconfigured styles, priority, cancellabillity and so on. If you want to learn more about the basics, visit the documentation https://developer.android.com/training/notify-user/build-notification and https://developer.android.com/training/notify-user/custom-notification.
Here we are going beyond that, creating a custom layout and using it directly in the notification UI area. We are going to show some information and an image to show a photo.
You have probably already seen a few of them. For instance, here is an example of Youtube showing a custom notification with video suggestions. I’m going to show you how we do it on Degoo.
The layout
First of all, we need to create the layout that we are going to use in the notification. You are totally free to include whatever element you want. But keep in mind that the cleaner the better. So, try to include the information in the most possible simple way.
Two important tips after suffering by myself:
Dark mode and themes
It doesn’t matter the theme the device is using, you don’t want to show a broken or ilegible notification. (I can name a very famous bank application showing a useless notification in Dark mode). Luckily we can use the Compat style to help with that.
@style/TextAppearance.Compat.Notification.Title@style/TextAppearance.Compat.Notification.Info@style/TextAppearance.Compat.Notification.Media@style/TextAppearance.Compat.Notification.Time
No ConstaintLayout
This layout and the notification style don’t get on well. So if you want to avoid issues or you are smashing your head against the keyboard because the notification is not working at all. Here is a tip: don’t use ConstaintLayout
Taking that into account, here is the view code. We are basically creating a fixed size layout with two sections: info and image.
The code
I would say that once you achieve the goal, the flow is pretty easy to understand. But you need to be very careful of not forgetting any step.
First of all, create a simple notification:
Once we have it, we can now add the extra configuration for the custom UI with RemoteViews and build it, so it’s ready to be shown:
Note: in order to avoid the system wrapping your layout with basic notification info, you should not call setStyle() at any point.
And this is how they finally look:
Bonus
It can happen that some Android versions or manufacturers can have troubles showing these type of notifications, so we can create a fallback with a standard (but richer than the simple one) notification style.
If an error occurs while building the custom layout notification, just use a default instead. Here is ALL the code (notice that the code used previously is a bit refactored to better fit this this last completion):
