DEV Community

Cover image for Cordova FCM Custom Notification Icon
Ikwegbu George
Ikwegbu George

Posted on

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 😥
Enter fullscreen mode Exit fullscreen mode

Table of Content

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.
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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"
}
Enter fullscreen mode Exit fullscreen mode

You should be able to see the icon on the notification Status, when you send a push notification to the device. 🎇🎆🎇✨🎉🎊

Discussion (0)