Can't set custom notification icon on Android

[HamzaLJ]

Expected Behaviour

It should be possible to customize the icon of the notification

Actual Behaviour

It shows gray circle when I receive a new notification

Platform and Version (eg. Android 5.0 or iOS 9.2.1)

Android 7.0

(Android) What device vendor (e.g. Samsung, HTC, Sony...)

Motorola Moto C

Cordova CLI version and cordova platform version

cordova --version                                    7.0.1
cordova platform version android                    6.4.2

Plugin version

cordova plugin version | grep phonegap-plugin-push   2.0.0

Sample Push Data Payload

          {
          "icon": "icon",
          "title":"hey"
          }

I believe that the icon should have some specific dimensions and opacity settings (Not sure)

[macdonst]

@HamzaLJ did you follow all the info at: https://github.com/phonegap/phonegap-plugin-push/blob/master/docs/PAYLOAD.md#images

[HamzaLJ]

Of course, spent plenty of time with no result, does it has to have a particular dimensions, opacity settings, etc.. ?

[macdonst]

@HamzaLJ can you run adb logcat | grep Push and send your app a message. I want to see the logs. The actual icon would help as well.

[nprail]

I'm having this issue as well after upgrading to v2.

[macdonst]

@nprail some logs and the push payload you use please.

[nprail]

@macdonst adb logcat | grep Push

09-07 15:18:56.920 12267 12354 V Push_Plugin: execute: action=init
09-07 15:18:56.922 12267 12355 V Push_Plugin: execute: data=[{"android":{"senderID":"8294496400","sound":true,"icon":"ic_stat_icon","iconColor":"#5083af"},"ios":{"senderID":"8294496400","badge":true,"sound":tr
ue}}]
09-07 15:18:56.930 12267 12355 V Push_Plugin: execute: jo={"senderID":"8294496400","sound":true,"icon":"ic_stat_icon","iconColor":"#5083af"}
09-07 15:18:56.932 12267 12355 V Push_Plugin: execute: senderID=8294496400
09-07 15:18:56.940 12267 12355 V Push_Plugin: onRegistered: {"registrationId":"crUbqYVeyI8:APA91bFcoa4kzDkh70gOyNJ-75SYlfI9MwLBZFsw9HOtoQHKfz0z1JpDeI55rO02BHhIvLvb5hRtLOPYxEeOEpNUGzu0UUecHlN_paz0o2h2CMA3--3lh6
uX38gDXfnW9LSSEAS9tF6Q","registrationType":"FCM"}
09-07 15:19:13.560 12267 12447 D Push_FCMService: onMessage - from: 8294496400
09-07 15:19:13.577 12267 12447 D Push_FCMService: normalize extras
09-07 15:19:13.577 12267 12447 D Push_FCMService: key = title
09-07 15:19:13.578 12267 12447 D Push_FCMService: replace key title with title
09-07 15:19:13.578 12267 12447 D Push_FCMService: key = message
09-07 15:19:13.578 12267 12447 D Push_FCMService: replace key message with message
09-07 15:19:13.578 12267 12447 D Push_FCMService: no locale found for key = message, error Value Test of type java.lang.String cannot be converted to JSONObject
09-07 15:19:13.578 12267 12447 D Push_FCMService: foreground
09-07 15:19:13.579 12267 12447 D Push_Plugin: convert extras to json
09-07 15:19:13.579 12267 12447 D Push_Plugin: key = message
09-07 15:19:13.579 12267 12447 D Push_Plugin: key = coldstart
09-07 15:19:13.579 12267 12447 D Push_Plugin: key = foreground
09-07 15:19:13.580 12267 12447 V Push_Plugin: extrasToJSON: {"message":"Test","additionalData":{"coldstart":false,"foreground":true}}

[macdonst]

@nprail push payload too

[nprail]

@macdonst Is this not the payload?

{"message":"Test","additionalData":{"coldstart":false,"foreground":true}}

If it isn't, where do I find the payload?

[macdonst]

@nprail I want the data you send to the push service.

[nprail]

@macdonst

var message = {
    to: deviceID,
    data: {
        title: 'Test',
        message: 'Just testing...'
    }
};

[macdonst]

@nprail payload looks correct but you appear to be in the foreground when you are receiving the message. Can you capture the logs with the app minimized?

[nprail]

09-07 15:59:18.251 28763 29269 D Push_FCMService: onMessage - from: 8294496400
09-07 15:59:18.303 28763 29269 D Push_FCMService: normalize extras
09-07 15:59:18.304 28763 29269 D Push_FCMService: key = title
09-07 15:59:18.304 28763 29269 D Push_FCMService: replace key title with title
09-07 15:59:18.304 28763 29269 D Push_FCMService: no locale found for key = title, error Value Test of type java.lang.String cannot be converted to JSONObject
09-07 15:59:18.305 28763 29269 D Push_FCMService: key = message
09-07 15:59:18.305 28763 29269 D Push_FCMService: replace key message with message
09-07 15:59:18.308 28763 29269 D Push_FCMService: no locale found for key = message, error Value Just of type java.lang.String cannot be converted to JSONObject
09-07 15:59:18.308 28763 29269 D Push_FCMService: background
09-07 15:59:18.308 28763 29269 D Push_FCMService: message =[Just testing...]
09-07 15:59:18.308 28763 29269 D Push_FCMService: title =[Test]
09-07 15:59:18.308 28763 29269 D Push_FCMService: contentAvailable =[null]
09-07 15:59:18.308 28763 29269 D Push_FCMService: forceStart =[null]
09-07 15:59:18.308 28763 29269 D Push_FCMService: create notification
09-07 15:59:18.312 28763 29269 E Push_FCMService: Number format exception - Error parsing notId: s == null
09-07 15:59:18.343 28763 29269 D Push_FCMService: stored icon=ic_stat_icon
09-07 15:59:18.343 28763 29269 D Push_FCMService: stored iconColor=#5083af
09-07 15:59:18.343 28763 29269 D Push_FCMService: stored sound=true
09-07 15:59:18.344 28763 29269 D Push_FCMService: stored vibrate=true
09-07 15:59:18.352 28763 29269 D Push_FCMService: using icon from plugin options
09-07 15:59:18.391 28763 29269 D Push_FCMService: create actions: with in-line

[macdonst]

@nprail yeah, so it seems like it is loading the icon:

09-07 15:59:18.343 28763 29269 D Push_FCMService: stored icon=ic_stat_icon
09-07 15:59:18.343 28763 29269 D Push_FCMService: stored iconColor=#5083af
09-07 15:59:18.352 28763 29269 D Push_FCMService: using icon from plugin options

What exactly are you seeing?

[nprail]

@macdonst This is what I am seeing:

---

[macdonst]

@nprail can you check to see if you see something like:

09-07 16:35:28.531 14415 15493 D Push_FCMService: no icon resource found - using application icon

In your logs?

[nprail]

There is nothing like that...

[macdonst]

@nprail How are you sending this message?

[nprail]

I'm sending it with fcm-node. I get the same result sending messages directly from the Firebase Console.

var FCM = require('fcm-node');
// Replace these with your own values.
var apiKey = "";
var deviceID = "";
var fcm = new FCM(apiKey);

var message = {
    to: deviceID,
    "notification": {
        "title": "Test Notification",
        "body": "This offer expires at 11:30 or whatever"
    }
};

fcm.send(message, function (err, response) {
    if (err) {
        console.log(err);
        console.log("Something has gone wrong!");
    } else {
        console.log("Successfully sent with response: ", response);
    }
})

[macdonst]

@nprail whelp, this is why I asked you for the payload. In this comment you show your push payload using the data section of the payload but in your code above you are sending it via a notification.

Change the above to:

var message = {
    to: deviceID,
    "data": {
        "title": "Test Notification",
        "body": "This offer expires at 11:30 or whatever"
    }
};

Re-test and it should be fine.

For an explanation why this is the case see: https://github.com/phonegap/phonegap-plugin-push/blob/master/docs/PAYLOAD.md#notification-vs-data-payloads

[nprail]

I just found that. When using the data section, the notification never appears. I get it in the on('notification') handler but it never makes a sound or shows in the system tray. Maybe this is a different issue, though.

[macdonst]

@nprail well the info needs to be in data for the plugin to work. If the notification never appears that's a whole other issue. Logs always help.

[Barathwaja]

For me the same issue , white box and I'm using the data payload only.. white box only appears in nougat not any other OS. Only in Nougat I'm facing that issue .. any idea??

[macdonst]

@Barathwaja please read the docs as your issue is explained there. Root cause, your icon has no transparent pixels.

[nprail]

This issue appears to be an issue with loading the icon, not an issue with the icon itself. The icon used to work just fine while using the exact same icon. Here is the file:

It looks like there is no image because it's only white and transparent like it is supposed to be...

This is the plugin init:

$cordovaPushV5.initialize({
          android: {
            senderID: 'xxxxxxxxxx',
            sound: true,
            icon: 'notification_icon',
            iconColor: 'blue'
          },
          ios: {
            senderID: 'xxxxxxxxxx',
            badge: true,
            sound: true
          }
        }).then(function (result) {
           console.log(result);
        });

After about 2 months of trying to figure out this issue, I decided to give up on phonegap-plugin-push and find a different push plugin. So I tried out cordova-plugin-firebase. Guess what I found out? The same issue existed there too.

[nprail]

@macdonst I ran the app on an older version of Android (older than 5.0) and it looks like it is using my apps default icon. Not the custom one.

I also tried downgrading back to version 1 but had the same problem.

[macdonst]

@nprail yeah, the icon itself is fine. Are you sure that notification_icon is being delivered to the platforms/android folder? Are you doing it via a hook or resource-file tag? As I said you'll need to use the data payload.

[nprail]

@macdonst I've checked and there is, in fact, a notification_icon.png in the platforms/android/res/drawable folder.

I have two different projects with the same problem. One uses the resource-file tag and the other uses a hook. Both get the file in the right location but neither has the correct notification icon.

[nprail]

I have tried various icon names files names and none of them work. I've tried using a default Android drawable resource to no avail. I even tried a non-existent icon name and checked logcat. I never saw anything like:

09-07 16:35:28.531 14415 15493 D Push_FCMService: no icon resource found - using application icon

I'm wondering if there is a problem with the icon loading code but I have no experience with Java so I can't investigate it myself.

[macdonst]

@nprail okay, so notification_icon.png is being delivered properly and if you are providing is in your init method then you should be good to go. Just make sure you use the data payload. If you aren't using data payload then the OS takes over and the plugin never gets to process it.

[ma77hi4s]

Can't get custom notification icons working on android. I'm seeing only white squares...

Icons should be ok, I've generated them with this online tool: https://romannurik.github.io/AndroidAssetStudio/icons-notification.html

I've manually copied them to the drawable folders in \platforms\android\res\drawable-***\ic_notify.png

Plugin Options: android: { iconColor: 'black', icon: 'ic_notify', sound: true, vibrate: true }

Im sending the notifications through the firebase online notification dashboard.

Plugin Version: 2.1.0 Cordova Cli: 7.1.0 Cordova platform version android: 6.3.0

[speedfl]

@ma77hi4s this is not woring anymore to put it in \platforms\android\res\drawable-***\. I had the same issue You need to put it in \platforms\android\res\drawable\

Tell me if it is working! For me now it is ok

[ma77hi4s]

@speedfl tried this, but it didn't work... What icon format, size, etc. do I have to use?

[speedfl]

96*96 in white transparent png file

[ma77hi4s]

Doesn't work for me...

[macdonst]

@nprail did this get resolved for you?

[nprail]

@macdonst I never did although, since the project I needed this for is a side project, I haven't really worked on it much. I've been quite busy with work. I may be able to try again next week or over Christmas break.

[lucasdavila]

I am having the same issue.

• The icon is copied by a hook to the android/res/drawable folder, before building the app.
• The info is passed as data.
• the icon is a 96x96 png file with transparency.
• I have Android 7.1.1
• The plugin is on 2.1.1 version

I tried to set the icon on the init and also send as data on the notification, in both cases I only see a circle, the icon color is working.

Hope it could help you guys fix the problem, I love this plugin <3, thanks.

This is what I see:

Here are the logs:

11-29 00:50:10.385 16466 16733 D Push_FCMService: onMessage - from: ***********
11-29 00:50:10.388 16466 16733 D Push_FCMService: normalize extras
11-29 00:50:10.388 16466 16733 D Push_FCMService: key = content-available
11-29 00:50:10.388 16466 16733 D Push_FCMService: replace key content-available with content-available
11-29 00:50:10.388 16466 16733 D Push_FCMService: key = image-type
11-29 00:50:10.389 16466 16733 D Push_FCMService: replace key image-type with image-type
11-29 00:50:10.389 16466 16733 D Push_FCMService: key = summaryText
11-29 00:50:10.389 16466 16733 D Push_FCMService: replace key summaryText with summaryText
11-29 00:50:10.389 16466 16733 D Push_FCMService: no locale found for key = summaryText, error Value %n% of type java.lang.String cannot be converted to JSONObject
11-29 00:50:10.389 16466 16733 D Push_FCMService: key = image
11-29 00:50:10.389 16466 16733 D Push_FCMService: replace key image with image
11-29 00:50:10.390 16466 16733 D Push_FCMService: key = notId
11-29 00:50:10.390 16466 16733 D Push_FCMService: replace key notId with notId
11-29 00:50:10.390 16466 16733 D Push_FCMService: key = style
11-29 00:50:10.390 16466 16733 D Push_FCMService: replace key style with style
11-29 00:50:10.390 16466 16733 D Push_FCMService: key = title
11-29 00:50:10.390 16466 16733 D Push_FCMService: replace key title with title
11-29 00:50:10.391 16466 16733 D Push_FCMService: no locale found for key = title, error Value Aula of type java.lang.String cannot be converted to JSONObject
11-29 00:50:10.391 16466 16733 D Push_FCMService: key = message
11-29 00:50:10.391 16466 16733 D Push_FCMService: replace key message with message
11-29 00:50:10.391 16466 16733 D Push_FCMService: no locale found for key = message, error Value Lucas of type java.lang.String cannot be converted to JSONObject
11-29 00:50:10.391 16466 16733 D Push_FCMService: background
11-29 00:50:10.391 16466 16733 D Push_FCMService: message =[Lucas D'Avila: Testing icon]
11-29 00:50:10.391 16466 16733 D Push_FCMService: title =[Aula 3 - Novo curso de uma turma]
11-29 00:50:10.391 16466 16733 D Push_FCMService: contentAvailable =[1]
11-29 00:50:10.391 16466 16733 D Push_FCMService: forceStart =[null]
11-29 00:50:10.391 16466 16733 D Push_FCMService: create notification
11-29 00:50:10.398 16466 16733 D Push_FCMService: stored icon=notificationicon
11-29 00:50:10.398 16466 16733 D Push_FCMService: stored iconColor=green
11-29 00:50:10.398 16466 16733 D Push_FCMService: stored sound=true
11-29 00:50:10.398 16466 16733 D Push_FCMService: stored vibrate=true
11-29 00:50:10.398 16466 16733 D Push_FCMService: using icon from plugin options
11-29 00:50:11.570 16466 16733 D Push_FCMService: using remote large-icon from gcm
11-29 00:50:11.573 16466 16733 D Push_FCMService: create actions: with in-line
11-29 00:50:11.579 16466 16733 D Push_FCMService: app is not running and content available true
11-29 00:50:11.579 16466 16733 D Push_FCMService: send notification event
11-29 00:50:11.579 16466 16733 D Push_Plugin: convert extras to json
11-29 00:50:11.579 16466 16733 D Push_Plugin: key = content-available
11-29 00:50:11.579 16466 16733 D Push_Plugin: key = image-type
11-29 00:50:11.579 16466 16733 D Push_Plugin: key = summaryText
11-29 00:50:11.579 16466 16733 D Push_Plugin: key = image
11-29 00:50:11.579 16466 16733 D Push_Plugin: key = notId
11-29 00:50:11.579 16466 16733 D Push_Plugin: key = style
11-29 00:50:11.579 16466 16733 D Push_Plugin: key = title
11-29 00:50:11.579 16466 16733 D Push_Plugin: key = message
11-29 00:50:11.579 16466 16733 D Push_Plugin: key = coldstart
11-29 00:50:11.579 16466 16733 D Push_Plugin: key = foreground
11-29 00:50:11.580 16466 16733 V Push_Plugin: extrasToJSON: {"image":"https:\/\/learning-app.s3.amazonaws.com\/development\/uploads\/avatars\/2d398d68-ad76-4168-b371-3b7b18a09a5c.jpg","title":"Aula 3 - Novo curso de uma turma","message":"Lucas D'Avila: Testing icon","additionalData":{"content-available":"1","image-type":"circle","summaryText":"%n% atualizações","notId":"13","style":"inbox","coldstart":true,"foreground":false}}

[ma77hi4s]

Well... everything works for me now. I was sending the notifications directly throught the firebase console. When sending the notifications on my own (simple post request) with the correct payload ("data" instead of "notification"), everything is working fine.

Is there a way to send "data" payload with the firebase console?

[lucasdavila]

I still have this problem, I am using https://github.com/spacialdb/fcm (a ruby gem) to send the notifications on backend.

This is the payload sent to the backend notifications lib:

{
  data:  {
    notId: 10,
    style: "inbox",
    summaryText: "%n% atualizações",
    title: "Aula 1 - Example course",
    message: "Lucas D'Avila testing notifications",
    image: "https//learning-app.s3.amazonaws.com/development/uploads/avatars/2d398d68-ad76-4168-b371-3b7b18a09a5c.jpg",
    "image-type": "circle",
    "content-available": 1
  }
}

This is what is received on the on('notification') callback:

{
  "image":"https://learning-app.s3.amazonaws.com/development/uploads/avatars/2d398d68-ad76-4168-b371-3b7b18a09a5c.jpg",
  "title":"Aula 1 - Example course",
  "message":"Lucas D'Avila: testing notifications",
  "additionalData":{
    "content-available":"1",
    "image-type":"circle",
    "summaryText":"%n% atualizações",
    "notId":"10",
    "style":"inbox",
    "coldstart":false,
    "foreground":true
  }
}

Not sure if it is related to the issue.

[ahmed-zekry]

I think the problem on the image. I used the android asset generator to generate the notification icon but when select .png icon the app not recognize it and gives me white image, whatever the image i give to it the result is the same white image but when downloading clip art from same site or try to generate text icon and download and put the icons on the drawable-** folder the notification icon works correctly. so i think the problem is the android not recognize the .png images don't know why but still searching....

[marcospereda]

Hi, I´ve found a "solution", I´ve realized that if you send using GCM will work fine in android and if you send with FCM works fine with ios. Its like sending with FCM just ignore the icon and iconColor, it doesnt matter if you send data or notification in the payload. below is my init.

app.push = PushNotification.init({ "android": {
"senderID": SENDER_ID
,"icon": "icon_android_push" ,"iconColor": "#ff6600"
}, "ios": { "sound": true, "vibration": true, "badge": true, "clearBadge": true }, "windows": {} }); conclusion to iOS, use FCM to Android use GCM

Hope you can fix this so we could only use FCM

[ahmed-zekry]

I found a solution on this link https://clevertap.com/blog/fixing-notification-icon-for-android-lollipop-and-above/ by following these recommendations it worked perfectly with me.

[marcospereda]

hi @ahmadzekry whould you mind sharing your logo, so I can test here ? because I´ve also have a logo that should be working, but is not and having a logo that is working fine will help me to find my true problem. thanks.

[AppwareDev]

@ma77hi4s is correct, the notification icon displays correctly and the device makes a sound when I send notifications via the REST API and send the payload in the data object as mentioned here.

However, if I send notifications via the Firebase console I receive the notification but the device does not sound an alert and the icon is a white square. Notifications sent from Firebase Console don't even show up in the adb logcat.

This presents a problem because we were hoping to send push notifications from the Firebase Console to avoid additional development overhead to develop a Node JS App to handle sending of notifications.

To repeat @ma77hi4s 's question, is it possible to send only the data object payload via Firebase Console or some other exisiting solution so that we don't have to commit to this additional development overhead? I have tried adding the title and body keys/values in the Advanced Options section of the Firebase Console however I'm required to enter a 'Message Text' value which seems to override any custom keys I enter and the resulting notification returns an incorrect payload.

[fsanzv]

I got it working from Firebase console with some advanced plumbing (thanks to my good friend and personal Android Guru Sebastián Gallego (@sgallego) ).

Firebase handles two message types, Notification messages (handled outside the App) and Data messages (handled into the app). The Firebase console sends Notifications messages and these messages are not covered by custom icon instructions found in this plugin documentation. (You can read more about FCM Messages Types here: https://firebase.google.com/docs/cloud-messaging/concept-options?hl=en-419)

To handle the Icon, I have used the 'cordova-custom-config' plugin, an I have added this lines to config.xml (into ):

        <config-file parent="./application" target="AndroidManifest.xml">
            <meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="@drawable/custom_push_logo" />
            <meta-data android:name="com.google.firebase.messaging.default_notification_color" android:value="\#FFDC9231" />
        </config-file>

The custom icon is working fine, now I can send Notifications from REST API and from Firebase Panel and the custom icon is always used, but the custom icon color is only working in REST API Notifications using data instead of notification payload.

Hope this helps somebody! (If someone get the color working for Notification messages, please tell us how you did it 😄 )

[AppwareDev]

@fsanzv Interesting solution, though a little bit hacky!

What about sounds? Notifications I send via the Firebase Console do not trigger a sound alert on my Android device yet REST API notifications do trigger a sound. I also do not get any push notification information in logcat unless I send via the REST API so something definitely isn't right with the Firebase Console payload.

[fsanzv]

Reading the Firebase docs, I have found a solution to Icon color!!!

https://firebase.google.com/docs/cloud-messaging/http-server-ref?hl=en-419#notification-payload-support

You can add a 'color' attribute in the notification (But I can't figure how to add this in the Firebase console)

@AppwareDev As you can see in the docs link above, there is a sound attribute too, and the Firebase console has an option to enable / disable the sound, but in my tests, the sound didn't work neither from Firebase console nor from REST API.

[rromildosf]

See this link https://firebase.google.com/docs/cloud-messaging/android/client. This working for me. I using ionic and cordova-plugin-firebase. Put this code in AndroidManifest.xml

<meta-data
android:name="com.google.firebase.messaging.default_notification_icon"
android:resource="@drawable/ic_stat_ic_notification" />
incoming
notification message. See README(https://goo.gl/6BKBk7) for more. -->
<meta-data
android:name="com.google.firebase.messaging.default_notification_color"
android:resource="@color/colorAccent" />

ic_stat_ic_notification: Your custom icon, I added the icon in drawable-XXXX folders colorAccent: your custom color, in my case defined in: android/app/src/main/res/values/colors.xml

[mauricemooij]

I'm using Ionic 3.20.0 with Android 7.1.0. The Phonegap documentation appears to suggest the notification icon must be placed inside platforms/android/res/drawable. That didn't work for me. What did work was placing it inside platforms/android/app/src/main/res/drawable. Now the icon is displayed instead of a white square.

E.g. place an icon named notification.png in the root of the Ionic project and add a resource-file line to the Android section of config.xml. See below. Ionic will add the icon automatically when running ionic cordova build android

<platform name="android">
   ...
   <resource-file src="notification.png" target="app/src/main/res/drawable/notification.png" />
</platform>

[slayer35]

@rromildosf thx ,your solution definetely works for me !