3

A very frustrating issue while building an Ionic 4 app along with FCM plugin , is the inability to set a custom Notification Icon, with custom color. I figured out how to achieve this, so just wanted to share the solution with our beautiful StackOverflow community :)

So check out the solution to customize Firebase Cloud Messaging (FCM) Notification Icon and it's Color for Android platform, in my answer below.

Vadim Kotov
  • 8,084
  • 8
  • 48
  • 62
Devner
  • 6,825
  • 11
  • 63
  • 104

5 Answers5

15

I am using Ionic 4 + FCM plugin and here is what worked for me (November 2019). Please note that this solution is Android specific, i.e. the settings shown in this solution will help customize the Notification Icon look and feel on Android platform.

So let's begin in a series of steps:

1. In config.xml located in the root folder of your app: Example: (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:

Within the tags: <platform name="android"> and </platform>, add this:

<resource-file src="res/drawable-xhdpi/fcm_push_icon.png" target="app/src/main/res/drawable/fcm_push_icon.png" />
<resource-file src="res/drawable-hdpi/fcm_push_icon.png" target="platforms/android/res/drawable-hdpi/fcm_push_icon.png" />
<resource-file src="res/drawable-mdpi/fcm_push_icon.png" target="platforms/android/res/drawable-mdpi/fcm_push_icon.png" />
<resource-file src="res/drawable-xhdpi/fcm_push_icon.png" target="platforms/android/res/drawable-xhdpi/fcm_push_icon.png" />
<resource-file src="res/drawable-xxhdpi/fcm_push_icon.png" target="platforms/android/res/drawable-xxhdpi/fcm_push_icon.png" />
<resource-file src="res/drawable-xxxhdpi/fcm_push_icon.png" target="platforms/android/res/drawable-xxxhdpi/fcm_push_icon.png" />
<resource-file src="colors.xml" target="app/src/main/res/values/colors.xml" />
<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" />
    <meta-data android:name="com.google.firebase.messaging.default_notification_color" android:resource="@color/colorPrimary" />                      
</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 and copy contents to your app root folder:

Unzip the zip file that you just downloaded in the step above 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. Copy the res folder to project root:

Copy the res folder from the Point 4 above, to the root folder of your app. So it should look like this now:

yourApp/res/drawable-hdpi/fcm_push_icon.png
yourApp/res/drawable-mdpi/fcm_push_icon.png
yourApp/res/drawable-xhdpifcm_push_icon.png
yourApp/res/drawable-xxhdpi/fcm_push_icon.png
yourApp/res/drawable-xxxhdpi/fcm_push_icon.png

6. Create colors.xml in the root folder of your app:

Now create a new file called colors.xml in the root folder of your app. So it should look like this now:

yourApp > colors.xml

7. Copy following content into colors.xml:

Copy the following content into the file colors.xml that you created in the Step 6 above and save it.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3880ff</color>
    <color name="colorAccent">#3880ff</color>
    <color name="white">#FFFFFF</color>
    <color name="ivory">#FFFFF0</color>
    <color name="orange">#FFA500</color>
    <color name="navy">#000080</color>
    <color name="black">#000000</color>
</resources>

8. Change the value of colorPrimary:

Change the value inside the tags: <color name="colorPrimary"></color> to any color you like. For example, you can use:

<color name="colorPrimary">#eedd33</color>

9. Build your App:

That's it! Now just build your app. When the build runs, it will copy all the files from the src directory to the target directory and the app will read the contents from the target directory.

So from now on, whenever you send a notification on your Ionic based Android app, the receiver will see your Colored App icon in the notifications.

10. Enjoy!!!

Devner
  • 6,825
  • 11
  • 63
  • 104
  • How about IOS ? Do we need to do any setup for IOS as well? Please reply thanks in advance. – Ram May 26 '21 at 05:49
  • 1
    @Ram Yes, I believe there are different steps that we need to follow for iOS. I think the Steps 1 & 2 would vary. You would need to check the documentation on this. My requirement at that time was to ensure the issue is resolved in Android, hence my solution for Android. Maybe if you work on the iOS platform, consider sharing the solution with us? – Devner Jun 25 '21 at 07:28
2

AndroidManifest.xml duplicate line issue resolved!

I resolved this issue by adding a variable in package.json file.

Step 1: Visit the following link: Notification Icon Generator to generate your notification logo.

Step 2: If you open the zip file, you will get a "res" folder. Place the folder into your root directory

Step 3: "ANDROID_DEFAULT_NOTIFICATION_ICON": "@drawable/fcm_push_icon" - Add this line in your package.json file.

For example:

"cordova-plugin-fcm-with-dependecy-updated": {
        "ANDROID_DEFAULT_NOTIFICATION_ICON": "@drawable/fcm_push_icon",
        "ANDROID_FIREBASE_BOM_VERSION": "26.0.0",
        "ANDROID_GOOGLE_SERVICES_VERSION": "4.3.4",
        "ANDROID_GRADLE_TOOLS_VERSION": "4.1.0"
      }

Step 4:

Add these lines in your config.xml Inside platform name="android"

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

That's it!

Kar Thik
  • 41
  • 3
1

I followed Denver's solution too but I kept getting duplicate error in AndroidManifest while building the app so I removed this line from config.xml

<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" />
    <meta-data android:name="com.google.firebase.messaging.default_notification_color" android:resource="@color/colorPrimary" />                      
</config-file>

and replaced it with

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

The app builds and the notification icon works.

BabaTee
  • 11
  • 1
  • 1
0

Denver's solution worked for me greatly, but in compile time it gave AndroidManifest.xml duplicate line issues. If anyone facing same issue like me: Just delete

<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>

In step 2: In my case, I am not bother about colors. Add this in config.xml:

<plugin name="cordova-plugin-fcm-with-dependecy-updated" spec="^7.3.1">
    <variable name="ANDROID_DEFAULT_NOTIFICATION_ICON" value="@drawable/fcm_push_icon" />
</plugin>
fcdt
  • 2,371
  • 5
  • 14
  • 26
jagan reddy
  • 61
  • 5
0

I know this is old, but just in case someone faces the same error, with the latest version of IONIC (I´m using 6.12.2), I kept on having the same issue and looking in the file (AndroidManifest) which is located in PathToYourProject\platforms\android\app\src\main\AndroidManifest.xml I had found that the "build" creates 2 metas with the same value

<meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="@drawable/fcm_push_icon" />

&&

<meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="@someOtherName" />

So, what you have to do is:

  1. Add to your AndroidManifest, above the 2 meta-data:

  2. Delete the other 2 meta-data

  3. open the AndroidManifest with VSCode and when you build your project keep an eye on the build process. When you see "cordova.cmd build android", bring to the front your VSCode and wait until you see the 2 meta-data added again.

  4. As soon as you see them, delete the one with a name different than "@drawable/fcm_push_icon".

  5. Wait until the process finishes and test it. You are going to have the color push notification icon with the desired color as explained by @Devner.

Dharman
  • 30,962
  • 25
  • 85
  • 135
Gustavo Bocalandro
  • 23
  • 3