Cordova FCM Custom Notification Icon

Cover image from pexels by Pixabay

From my other blog post, about Cordova FCM-Push Notification, I want to write on how to add your user custom notification Icon in your App.

PS: This icon will only be of 1 color, black and white 😥

Table of Content

Modifying the Icon

Moving Downloaded Files to res Folder

Editing Config.xml

Updating the FCM JSON Data

Modifying the Icon ✨

One thing you need to have in mind is that the icon will be of one color (white & black), and must be in the correct dimension and package name. To be on a safe side, you will need to upload your icon to Android Asset Studio, which would help you format the icon, when you're done, click on the download icon, to download the zipped file.

Moving Downloaded Files to res Folder 💌

In your cordova root folder:

1. Open the 'res' folder found within your 'cordova' root folder.
2. Select (for the course of this blog) android folder.
3. Create a new Folder called 'notification_icon'.
4. Copy and paste the files from the zip file you downloaded earlier.

Editing Config.xml 🎮

Open your config.xml file, copy the below lines of code into the file:

<platform name="android">
        <resource-file src="res/android/notification_icon/drawable-mdpi/notification_icon.png" target="app/src/main/res/drawable-mdpi/notification_icon.png" />
        <resource-file src="res/android/notification_icon/drawable-hdpi/notification_icon.png" target="app/src/main/res/drawable-hdpi/notification_icon.png" />
        <resource-file src="res/android/notification_icon/drawable-xhdpi/notification_icon.png" target="app/src/main/res/drawable-xhdpi/notification_icon.png" />
        <resource-file src="res/android/notification_icon/drawable-xxhdpi/notification_icon.png" target="app/src/main/res/drawable-xxhdpi/notification_icon.png" />
        <resource-file src="res/android/notification_icon/drawable-xxxhdpi/notification_icon.png" target="app/src/main/res/drawable-xxxhdpi/notification_icon.png" />
  </platform>

Updating the FCM JSON Data 📀

On your FCM payload, either from Postman, or the Backend (server side), change the 'Icon' key's value to 'notification_icon'. e.g

{
  "notification":{
    "title":"Selyct",
    "body":"Otuonye Kossy accepted your ride",
    "sound":"default",
    "click_action":"FCM_PLUGIN_ACTIVITY",
    "icon":"notification_icon"
  },
  "data":{ Data you want to send to the device... },
  "to":"device_token",
  "priority":"high"
}