Cordova-plugin-local-notifications: Bell icon on Android platform

[patrickboulay]

Your Environment

• Plugin version: master branch, latest version (May 31th)
• Platform: Android
• OS version: 5.1.1
• Device manufacturer / model: Samsung Grand Prime
• Cordova version: 7.0.1
• Cordova platform version :
  Installed platforms:
  android 6.2.3
  ios 4.4.0
• Plugin config
  cordova.plugins.notification.local.schedule({
  id: app.notificationId,
  title: "text",
  text: "text",
  });

Expected Behavior

When a notification pop, I should have my application icon in the notification bar.

Actual Behavior

On Android, I have a bell icon, I dont know where it come from. On iOS, I see my default application.

Steps to Reproduce

Schedule a notification.

Context

On going in background mode or when my application is in background.

Debug logs

The log file is attached to this issue.
log.txt.gz

[Tawpie]

The bell is Android's default icon, the bell is used when the operating system can't find a correct icon file. By correct, the icon files (there must be one file for each screen density), must be in the correctly named folder, must be the exact size specified and must be images that conform to Android's requirements.

Google for the Android requirements.

Android is very very very picky about this and if anything at all doesn't conform to requirements, Android will use the bell.

(spelling and grammer powered by autocorrupt)

On May 31, 2017, 7:42 PM -0700, patrickboulay [e-mail], wrote:

Your Environment

• Plugin version: master branch, latest version (May 31th)
• Platform: Android
• OS version: 5.1.1
• Device manufacturer / model: Samsung Grand Prime
• Cordova version: 7.0.1
• Cordova platform version :
Installed platforms:
android 6.2.3
ios 4.4.0
• Plugin config
cordova.plugins.notification.local.schedule({
id: app.notificationId,
title: "text",
text: "text",
});

Expected Behavior
When a notification pop, I should have my application icon in the notification bar.
Actual Behavior
On Android, I have a bell icon, I dont know where it come from. On iOS, I see my default application.
Steps to Reproduce
Schedule a notification.
Context
On going in background mode or when my application is in background.
Debug logs
The log file is attached to this issue.
log.txt.gz
—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub, or mute the thread.

[rwillett]

@tawpie is spot on here.

I also note that there is nothing in your code that actually puts your icon in place, so the system is working as designed.

[patrickboulay]

I though when the icon parameter was not passed, it will take my app icon
by default..

I tried some parameters and its not working..

in my config.xml, I have:

and in my platform/android folders(generated by cordova), I have:
res/mipmap-hdpi/icon.png
res/mipmap-ldpi/icon.png
res/mipmap-mdpi/icon.png
res/mipmap-xhdpi/icon.png
res/mipmap-xxhdpi/icon.png
res/mipmap-xxxhdpi/icon.png

My icons seems to be good because my app has

What should be the parameter?
icon: 'res://icon.png' ??
icon: 'res://icon' ??

No idea..

Thanks for the help.

On Thu, Jun 1, 2017 at 6:52 AM, Rob Willett [e-mail]
wrote:

@Tawpie https://github.com/tawpie is spot on here.

I also note that there is nothing in your code that actually puts your
icon in place, so the system is working as designed.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/katzer/cordova-plugin-local-notifications/issues/1308#issuecomment-305459291,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AZYc5fUexD2nPZmU-APx-09zc5du-U7Yks5r_pf1gaJpZM4NsbQF
.

[Tawpie]

@patrickboulay — you’re really close. Try adding smallicon: “res://icon” AND put your various icon files in platforms/android/res/drawable-hdpi, platforms/android/res/drawable-mpdi etc. Cordova generates the mipmap folders, but our mipmap folders do NOT have our action bar icons in them, only the app icons. Our action bar icons are in drawable- folders.

Of course, I’m assuming the icons are properly sized and grayscale with transparency per https://developer.android.com/guide/practices/ui_guidelines/icon_design_action_bar.html

BTW, it’s a terminology detail, but the bar at the top of the screen with the carrier and clock and battery etc. is called the “Action Bar” in android and the “Status Bar” in iOS. I’m assuming that’s what you meant by “notification bar”.

oh, one last thing. I don't use the icon: property—not sure when I dropped that, but our notifications get our app icon in the notification shade and our action bar icon (the smallicon) on the action bar for whatever that's worth. The two are different; the app icon is color, the notification/action bar icon is grayscale.

[rwillett]

@patrickboulay Did this work?

[MarcBalaban]

I believe android must have tightened up it's requirements recently. This problem also appeared for me in the last few weeks.

I've changed the icon size to 48x48 and set the icon colour scheme to black and white, but still getting the default bell icon.

[patrickboulay]

I didnt try, Im waiting about my friend to give me the icon for that.. I
let you know.

Pat

On Sun, Jun 4, 2017 at 7:10 PM, Marc Balaban [e-mail]
wrote:

I believe android must have tightened up it's requirements recently. This
problem also appeared for me in the last few weeks.

I've changed the icon size to 48x48 and set the icon colour scheme to
black and white, but still getting the default bell icon.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/katzer/cordova-plugin-local-notifications/issues/1308#issuecomment-306073672,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AZYc5Z8-I5yPNzX6YiUOsfeasrj2E7zmks5sAzljgaJpZM4NsbQF
.

[Tawpie]

@MarcBalaban You need all 4 icons: 18x18, 24x24, 36x36 and 48x48, each being a png with an alpha channel (include transparency). Those icons must be in platforms/android/res/drawable-ldpi, -mdpi, -hdpi and -xhdpi. Try that.

[rwillett]

Just to add to this, some editors are not 100% accurate with getting the Alpha channel transparent. It's worth checking this.

From memory the Affinity products work, but there are online checkers as well. getting the Android icons right is hard work (for some reason) and you need to have it all right.

[patrickboulay]

I still didnt check the Android icon but I remark a problem on iOS side. On
an iPhone 6S plus, I saw the default Cordova icon.
This is my config.xml:






/>
width="80" />





/>
/>
width="100" />

In the cordova documention, the 6s plus should use the 180x180 icon.

Do im doing something wrong?

Pat

On Mon, Jun 5, 2017 at 10:43 AM, Rob Willett [e-mail]
wrote:

Just to add to this, some editors are not 100% accurate with getting the
Alpha channel transparent. It's worth checking this.

From memory the Affinity products work, but there are online checkers as
well. getting the Android icons right is hard work (for some reason) and
you need to have it all right.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/katzer/cordova-plugin-local-notifications/issues/1308#issuecomment-306205551,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AZYc5Y0eLTNl1Zhp-NUCRM1Nq-kpf4Gpks5sBBP-gaJpZM4NsbQF
.

[patrickboulay]

Alright, works fine on Android now!! Thanks a lot for you help!

But still have problem with the iPhone 6S notification icon. Does it have
something special for this?

Pat

On Mon, Jun 5, 2017 at 10:07 PM, Patrick Boulay [e-mail]
wrote:

I still didnt check the Android icon but I remark a problem on iOS side.
On an iPhone 6S plus, I saw the default Cordova icon.
This is my config.xml:

/>

/>

/>
width="40" />
width="80" />



/>

width="58" />
width="50" />
width="100" />

In the cordova documention, the 6s plus should use the 180x180 icon.

Do im doing something wrong?

Pat

On Mon, Jun 5, 2017 at 10:43 AM, Rob Willett [e-mail]
wrote:

Just to add to this, some editors are not 100% accurate with getting the
Alpha channel transparent. It's worth checking this.

From memory the Affinity products work, but there are online checkers as
well. getting the Android icons right is hard work (for some reason) and
you need to have it all right.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/katzer/cordova-plugin-local-notifications/issues/1308#issuecomment-306205551,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AZYc5Y0eLTNl1Zhp-NUCRM1Nq-kpf4Gpks5sBBP-gaJpZM4NsbQF
.

[rohitkawale]

I have a not.png file in android res folder

$cordovaLocalNotification.add({
id: "$"+data.id,
date: alarmTime2,
message: "1 day left for your favorite show to Begin!",
title: data.name+" "+alarmTime,
autoCancel: true,
sound: "file://sounds/reminder.mp3",
icon: "res://not.png",
smallicon: "res://not.png",
data:data.id
}).then(function () {
//alert("The notification for one day before has been set from dynamic");
});

i'm getting a bell icon

[anuj-njoshi]

how to pass large icon parameter

[marcovtwout]

In addition to the solution in https://github.com/katzer/cordova-plugin-local-notifications/issues/1308#issuecomment-305680542

If you are using a build service like Ionic Pro you cannot add the icons to platforms/android directly. However, you can make Cordova copy the files from a source folder by configuring your icons in config.xml with <resource-file>:

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

And you set the notification option like this (without extension):

smallIcon: "res://my_notification_icon",

[katzer]

That should be solved now. A small icon (smallIcon) is required on Android, the big icon (icon) is optional.

[brunosfreitas]

As @marcovtwout pointed out that was the only solution that worked for me. I've edited my config.xml adding all the <resource-file> references to the new folder resources/android/notification-icon. On this new folder i've put all the pngs with multiple resolutions. That solved the problem for the (small icon) but now that grayscale icon is on the Action bar and the notification panel.

I had to do the same thing with the (icon) because it used the same images as the (small icon) and i needed a different one (with colors). As so my config.xml is the same as @marcovtwout listed but with a second roll of icons for icon entry.

[katzer]

smallIcon has to be an android resource file and it should follow the style guidelines by Android for notification icons.