Notifications

Read below for details on configuring notification icons and colors.

Changing Notification Icon

By default Firebase will use the app icon as the notification icon. The icon is treated as a silhouette, so if the app icon has a background, it might appear as a large blob. To change the icon, you need to add the icons to the project and configure firebase.

Add the icons

Add your icons to your project in your res directory, such as <projectroot>/res/native/android/res/<drawable-DPI>. Make sure the icons all have the same name (example has ic_silhouette). Next, we will need to copy the icons over to the Android project when it is created. To do this, add the following lines to your config.xml.

<platform name="android">
....
    <resource-file src="res/native/android/res/drawable-hdpi/ic_silhouette.png" target="app/src/main/res/drawable-hdpi/ic_silhouette.png"/>
    <resource-file src="res/native/android/res/drawable-xhdpi/ic_silhouette.png" target="app/src/main/res/drawable-hdpi/ic_silhouette.png"/>
    ... Repeated for each screen resolution you have a notification icons for...
</platform>

Note: the src of the files is not important, but the target directory with the proper dpi filter is very imporant. You will also need to name all the icons the same name.

Configure Firebase

We need to copy a metadata flag into the Manifest to tell Firebase which icon to use. To do this, add the following line to your config.xml.

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

Note: If you have XML Namespace issues, which I encountered when trying to build in Android Studio, add this xmlns:android="http://schemas.android.com/apk/res/android" to the widget element at the root of the config.xml.

Notification Colors

To add color to the custom icon, you will need to create a color definition and configure firebase color.

Create a Color Definition

On Android Lollipop and above you can also set the accent color for the notification by adding a color setting.

<projectroot>/res/native/android/res/values/colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="primary">#FFFFFF00</color>
    <color name="primary_dark">#FF220022</color>
    <color name="accent">#FF00FFFF</color>
</resources>

You will again need to copy this file over to your project to get it to work by adding these lines to your config.xml

<platform name="android">
...
    <resource-file src="res/native/android/res/values/colors.xml" target="app/src/main/res/values/colors.xml"/>
</platform>

Configure Firebase Color

We need to copy a metadata flag into the Manifest to tell Firebase which color to use for the icon. To do this, add the following line to your config.xml.

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

Note: If you have XML Namespace issues, which I encountered when trying to build in Android Studio, add this xmlns:android="http://schemas.android.com/apk/res/android" to the widget element at the root of the config.xml.

Final Result

If you added a custom icon and color, your config.xml should include something like this.

<widget .... xmlns:android="http://schemas.android.com/apk/res/android">
...
    <platform name="android">
        <!-- Copy the color definition -->
        <resource-file src="res/native/android/res/values/colors.xml" target="app/src/main/res/values/colors.xml"/>
        <!-- Copy the icons -->
        <resource-file src="res/native/android/res/drawable-hdpi/ic_silhouette.png" target="app/src/main/res/drawable-hdpi/ic_silhouette.png"/>
        <resource-file src="res/native/android/res/drawable-xhdpi/ic_silhouette.png" target="app/src/main/res/drawable-xhdpi/ic_silhouette.png"/>
        <resource-file src="res/native/android/res/drawable-xxhdpi/ic_silhouette.png" target="app/src/main/res/drawable-xxhdpi/ic_silhouette.png"/>
        <resource-file src="res/native/android/res/drawable-xxxhdpi/ic_silhouette.png" target="app/src/main/res/drawable-xxxhdpi/ic_silhouette.png"/>

        <!-- Configure Firebase -->
        <config-file parent="/manifest/application" target="AndroidManifest.xml">
            <meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="@drawable/ic_silhouette" />
            <meta-data android:name="com.google.firebase.messaging.default_notification_color" android:resource="@color/primary" />
        </config-file>
    </platform>
</widget>