How to create Android Notification icons — Dev Simplified
This article to gives the inside details of how Android notification icon behaves in React Native mobile applications and how to make sure your notification icon works perfectly.
At the end of this Article, you will be able to understand different scenarios/issues you may face and how to fix them and how to create your notification icon the way you want.
Let’s get started
We were recently working on implementing push notifications for our mobile application in React Native using React Native Push Notifications (link) and React Native Push notifications iOS.
We implemented the push notifications, it started working smoothly in both Android and iOS, in all 3 scenarios (Notifications when app is running, app is in background or App is killed).
But one thing we noticed with Android was, the app icon that appears in Android Status bar and at the top left corner of the notification window was showing in Grey color.
How we tracked down the root cause?
We looked into the official material design Android documentation, searched different articles and found, the Android notification icon must be completely transparent with white icon/text etc.
So icon must be completely white with transparent background? But how come other applications are showing the coloured icons?
After checking the source code of React Native Push Notifications library, we found
1. Library first checks if there is any icon sent by FCM in notification payload, otherwise,
2. It looks for the icon named ic_notification in app/mimmap-* folders and
3. Finally, if it doesn’t find any of these, library uses ic_launcher icon to show the notification icon.
Is that the only trick here? For sure NO :)
Even though you add a transparent ic_notification icon, Android behaves different based on its states.
If Android app is running, it picks ic_notification icon, but if App is in background or not running, then it again picks ic_launcher icon.
So, how do we make sure our Android app shows the ic_notification icon, which is transparent all times?
Actual Solution to show the perfect notification icon
There are 2 ways, you can handle this.
- Adding default notification icon from Android Manifest
While checking Firebase cloud messaging guide, we found that, we can add a default icon in the Android manifest that will be used for push notifications if server does not pass the notification icon.
So, we added the default Android notification icon as meta-data for Android in AndroidManifest.xml like this:
<meta-data android:name=”com.google.firebase.messaging.default_notification_icon”
android:resource=”@mipmap/ic_notification” />Adding Colors to notification icon:
Now we fixed issue of app icon not showing in Android notifications, but still our app was not showing the color in the app icon.
To add color to the Android notification icon, we found another meta-data property from Firebase Cloud Messaging guide:
<meta-data android:name=”com.google.firebase.messaging.default_notification_color”
android:resource=”@color/iconColor” />2. Sending the notification icon from Remote Notification Payload:
If you are using Remote notifications, you can also send the notification icon through notification payload from server. This also allows mobile apps to show different notification icons based on type and category of notifications.
How to create notification icon:
When creating notification, if you want to use colors in the notification icon, please make sure to keep the view in WHITE color that you want to have the color and remaining in transparent color.
Hope this article helps you understand the nitty gritty of how to design the notification icon for Android applications.
References:
1. https://github.com/zo0r/react-native-push-notification
2. https://firebase.google.com/docs/cloud-messaging/android/client
