Cordova-plugin-firebase: Notification icon problem

Created on 14 Sep 2017  ·  18Comments  ·  Source: arnesson/cordova-plugin-firebase

Hi, in the documentation is not clear how to change the notification icon in android. In the Notification Bar I would like to see a different icon than the one in the application. Can anyone explain the procedure to do this in detail?
Thank you.

Most helpful comment

  • First you need generate your icons here;
  • Next you should add the icons generated files in /plataforms/android/res folder;
  • After you should add in your /plataforms/android/AndroidManifest.xml this:
<meta-data
android:name="com.google.firebase.messaging.default_notification_icon"
android:resource="@drawable/notification_icon" />

*where notification_icon is the filename of your icon.

All 18 comments

Ok but in my ionic application I have to configure something?

  • First you need generate your icons here;
  • Next you should add the icons generated files in /plataforms/android/res folder;
  • After you should add in your /plataforms/android/AndroidManifest.xml this:
<meta-data
android:name="com.google.firebase.messaging.default_notification_icon"
android:resource="@drawable/notification_icon" />

*where notification_icon is the filename of your icon.

@pablozandona Can I also set the notification icon color from my AndroidManifest.xml?

@pablozandona I followed your instructions to a tee and it did not work for me

@hkhamm

  • Create platforms/android/res/values/styles.xml file with your color like this:
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="red">#FF8614</color>
</resources>
  • After you should add in your /plataforms/android/AndroidManifest.xml another meta-data:

    <meta-data android:name="com.google.firebase.messaging.default_notification_color" android:resource="@color/red"/>

@jskidd3 what exactly didn't work?

@pablozandona The icon stayed the same. It was a solid grey/white version of the app icon. I eventually managed to get it working by following the instructions found here with cordova-custom-config: https://github.com/arnesson/cordova-plugin-firebase/issues/53#issuecomment-304573222

I wish I knew why that fixed it though!

Don't know if this will help someone in the future or not, but in the instructions above, when it says to replace the notification_icon with the filename of your icon, you need to omit the .png ending in the AndroidManifest.xml file.

In case it helps anyone in the future, the meta-data tag goes within the application tag in the AndroidManifest.xml file. Like:

<?xml version='1.0' encoding='utf-8'?>
<manifest android:hardwareAccelerated="true" android:versionCode="1091" android:versionName="1.0.9.1" package="..." xmlns:android="http://schemas.android.com/apk/res/android">
    ...
    <application android:hardwareAccelerated="true" android:icon="@mipmap/icon" android:label="@string/app_name" android:supportsRtl="true">
        ...
        <meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="@drawable/notification_icon" />
    </application>
    ...
</manifest>

does the icon needs to be in @drawable or could it be in @mipmap. @gecko-8 . Thanks

@lexyfeito Sorry, not an expert on Android development but @drawable is the usual place for images.

hi @gecko-8, this solution doesnt work for me, i even type the tag manually in manifest and nothing. I dont know what i could be missing

i also notice in this repo that icons are weir (for a lack of a better term). Are the icons supposed to be on some kind of special format?

Nope, just a 48x48 png. The alpha channel in the image provides the icon shape.

To be totally clear, if you use my above code, make sure the image is 48x48, named notification_icon.png and is located in the platforms/android/res/drawable folder. I have a step in my build script to copy the image there so if I remove the platform it gets put back. To add the above to AndroidManifest.xml I used the cordova-custom-config plugin with the following in the config.xml:

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

In case this happens to anyone else:

@gecko-8
_ionic cordoba run android_ was givinig me this error:

Error parsing XML: unbound prefix

I solved it by adding the android namespace at the _config.xml_'s root:

In case it helps anyone in the future, the meta-data tag goes within the application tag in the AndroidManifest.xml file. Like:

<?xml version='1.0' encoding='utf-8'?>
<manifest android:hardwareAccelerated="true" android:versionCode="1091" android:versionName="1.0.9.1" package="..." xmlns:android="http://schemas.android.com/apk/res/android">
    ...
    <application android:hardwareAccelerated="true" android:icon="@mipmap/icon" android:label="@string/app_name" android:supportsRtl="true">
        ...
        <meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="@drawable/notification_icon" />
    </application>
    ...
</manifest>

This is very useful, working for my issue in oreo+ version.

I've got this error message when building project in Android platform.

The prefix "ns1" for attribute "ns1:name" associated with an element type "meta-data" is not bound.

This is my widget
<widget id="test" version="0.0.3" xmlns="http://www.w3.org/ns/widgets" xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools">

And my config file tag:
<hook src="package-hooks/android_custom_resources.js" type="after_prepare" />
<hook src="package-hooks/android_custom_values.js" type="after_prepare" />
<config-file parent="./application" target="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/red" />
</config-file>

Was this page helpful?
0 / 5 - 0 ratings