Where to specify small icons (for notifications in status bar) in config.xml?

holp · February 16, 2019, 10:58pm

Just a update of @marcovtwout for Cordova 8, in the config.xml file:

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

Also the images sizes should be:

resources/android/notification/icon-mdpi.png     (24 × 24)
resources/android/notification/icon-hdpi.png     (36 × 36)
resources/android/notification/icon-xhdpi.png    (48 × 48)
resources/android/notification/icon-xxhdpi.png   (72 × 72)
resources/android/notification/icon-xxxhdpi.png  (96 × 96)

Then just use it, when you’ll be schedulelling the notifications as a property:

smallIcon: 'res://notification',

vigneshwaran2694 · June 26, 2019, 5:21pm

@holp

the small notification icon not showing correctly in oreo android os, but working on android version 6.0.1

In Oreo its showing only gray icon

but in lowest version the star icons shows correctly…

please help

config.xml

<platform name="android">
        <allow-intent href="market:*" />
        <splash density="land-ldpi" src="resources/android/splash/drawable-land-ldpi-screen.png" />
        <splash density="land-mdpi" src="resources/android/splash/drawable-land-mdpi-screen.png" />
        <splash density="land-hdpi" src="resources/android/splash/drawable-land-hdpi-screen.png" />
        <splash density="land-xhdpi" src="resources/android/splash/drawable-land-xhdpi-screen.png" />
        <splash density="land-xxhdpi" src="resources/android/splash/drawable-land-xxhdpi-screen.png" />
        <splash density="land-xxxhdpi" src="resources/android/splash/drawable-land-xxxhdpi-screen.png" />
        <splash density="port-ldpi" src="resources/android/splash/drawable-port-ldpi-screen.png" />
        <splash density="port-mdpi" src="resources/android/splash/drawable-port-mdpi-screen.png" />
        <splash density="port-hdpi" src="resources/android/splash/drawable-port-hdpi-screen.png" />
        <splash density="port-xhdpi" src="resources/android/splash/drawable-port-xhdpi-screen.png" />
        <splash density="port-xxhdpi" src="resources/android/splash/drawable-port-xxhdpi-screen.png" />
        <splash density="port-xxxhdpi" src="resources/android/splash/drawable-port-xxxhdpi-screen.png" />
        <icon src="resources/android/notification/icon-mdpi.png" target="app/src/main/res/drawable-mdpi/notification.png" />
        <icon src="resources/android/notification/icon-hdpi.png" target="app/src/main/res/drawable-hdpi/notification.png" />
        <icon src="resources/android/notification/icon-xhdpi.png" target="app/src/main/res/drawable-xhdpi/notification.png" />
        <icon src="resources/android/notification/icon-xxhdpi.png" target="app/src/main/res/drawable-xxhdpi/notification.png" />
        <icon src="resources/android/notification/icon-xxxhdpi.png" target="app/src/main/res/drawable-xxxhdpi/notification.png" />
        <resource-file src="resources/android/notification/icon-mdpi.png" target="app/src/main/res/drawable-mdpi/notification.png" />
        <resource-file src="resources/android/notification/icon-hdpi.png" target="app/src/main/res/drawable-hdpi/notification.png" />
        <resource-file src="resources/android/notification/icon-xhdpi.png" target="app/src/main/res/drawable-xhdpi/notification.png" />
        <resource-file src="resources/android/notification/icon-xxhdpi.png" target="app/src/main/res/drawable-xxhdpi/notification.png" />
        <resource-file src="resources/android/notification/icon-xxxhdpi.png" target="app/src/main/res/drawable-xxxhdpi/notification.png" />
    </platform>

in app.component.ts

pushSetUp() {
    const options: any = {
      android: {
        senderID: 'xxxxxxxxxxx',
        icon:'icon',
        smallIcon: 'res://notification',
        forceShow:'True'
      },
      ios: {
        alert: 'true',
        badge: true,
        sound: 'false'
      }

    };



    const pushObject: PushObject = this.push.init(options);




    pushObject.on('notification').subscribe((notification: any) => {
      console.log('Received a notification', notification)

      if (notification.additionalData.foreground) {
        this.showAlert(notification.title, notification.message)
        this.navCtrl.setRoot('DashboardPage');
      }
      else {
        localStorage.setItem('gotNotified', JSON.stringify(1));
        this.navCtrl.setRoot('DashboardPage');
      }

    });

iamanthony · September 16, 2019, 8:56pm

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

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.

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>

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.

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.

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.