how the notification icon showed in backgroud

[Comeonzs]

I use cordova-plugin-fcm in my project, when app in backgroud the notifictation icon is white,not my wanted.can someone help

[devner007]

I am using the FCM plugin and here is what worked for me (September 2019):

1. In config.xml (yourapp/config.xml) Add the following to the <widget id=""...> tag at the end xmlns:android="http://schemas.android.com/apk/res/android"

It should look something like this now:

<widget id="com.mydomain.app" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0" xmlns:android="http://schemas.android.com/apk/res/android">

Or simply, copy the above line, replace the value of widget id, with your own.

2. In the same config.xml file: Just before the tag corresponding to , add this:

<config-file parent="/manifest/application/" target="app/src/main/AndroidManifest.xml">
            <meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="@drawable/fcm_push_icon" />
</config-file>

3. Visit the following link: Notification Icon Generator

Upload a White version (single color) of your logo on a Transparent background. If you upload a colored version, you will get a dark gray icon, which would look nasty. If you don't have a white version of your logo, get it designed. Leave the rest of the settings as they are. For the Name textbox value, enter: fcm_push_icon. Then click on the Blue colored round shaped button to download the zip file.

4. Unzip the zip file that you just downloaded it the above step and extract its contents to a folder. You will notice that it contains a res folder. If you open this folder, it will contain other folders with the following names:

• drawable-hdpi
• drawable-mdpi
• drawable-xhdpi
• drawable-xxhdpi
• drawable-xxxhdpi

Each of those folders will contain a PNG icon by the name "fcm_push_icon.png". The only difference between the icons in those different folders is their size.

5. Open the following file path in your app (If it doesn't exist, create it as shown below):

yourApp/platforms/android/app/src/main/res

Simply copy all the 5 folders listed in in the point 4 above, to the location shown just above i.e. into the res folder i.e. into yourApp/platforms/android/app/src/main/res

That's it! Now just build your app. Whenever you receive a notification, you will see your app icon in the notifications (at least on Android).

If anyone has figured out how to make colored icons appear in the Android notifications, please share your solution.

[aml25]

@devner007 omg, I can't tell you how long I googled for an answer to this and nothing worked! I actually don't really know what's different from your answer than others I found on the internet but copying what you have in here finally worked for me! 🙏 🤗.

I actually don't have to pass the icon tag in my notification payload anymore with this solution as it always falls back to this default icon.

PS. I'm working on getting colors to work, will let you know if I succeed

Thank you!

[aml25]

Update: I figured out how to make colors work. I followed, with some tweaks, this guide

Create a file called colors.xml in your project root (I added it to the same folder I added my icon folders to keep it all together).

In colors.xml add

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="primary">#FF375C</color>
    <!-- you can obviously change this as well as add more colors you want to defin -->
</resources>

Then, add to config.xml where you've already added the default_notification setting <meta-data android:name="com.google.firebase.messaging.default_notification_color" android:resource="@color/primary" />

So config.xml ends up looking like this

<config-file parent="/manifest/application/" target="app/src/main/AndroidManifest.xml">
         <meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="@drawable/notification_icon" />
         <meta-data android:name="com.google.firebase.messaging.default_notification_color" android:resource="@color/primary" />
</config-file>