Cordova-plugin-local-notifications: Modifying the bell icon in the Android notification tray

[carpiediem]

Great plugin, but there's one thing I can't figure out. Where in the code can I set a custom image to replace the bell that appears in Android's notification tray? Thanks.

[katzer]

Change the smallIcon property

[carpiediem]

Thanks for your quick help. I'm able to change the icon away from the bell, but no matter what I set smallIcon to, I just get a white square in the notification tray. I'm using a 24x24 png image that has a white logo, but is otherwise transparent. I've tried the following variations in my controller.

smallIcon: 'http://example.com/notificationIcon.png'
smallIcon: 'file://notificationIcon.png'
smallIcon: 'notificationIcon.png'
smallIcon: '/notificationIcon.png'

I've tried putting the file in myApp\www, in myApp\platforms\android\platform_www, and even myApp\platforms\android\res\drawable (which prevented the build in ant). This is in an Ionic project and I'm using ionic build android, if that matters.

Any idea what I'm doing wrong? Thanks again.

[w3apps]

I have the same problem as @carpiediem and not only for the "smallIcon" but for the "icon" as well. What size should the icon be and how should the path look like when the image is in the www/ folder?

[akreienbring]

Anybody found a solution for this issue?

[aidan2129]

Also having the same issue couldn't find much in the docs about it :(

[privatejava]

Having same issue :(

[seth100]

same for me

[privatejava]

It worked after i added icon in /platforms/android/res/drawable/new.png

As it takes R.drawable_id

So res://new.png is helpful

[bobbypriambodo]

I don't know if this is related to the issue, but I find myself in the same problem (smallIcon appearing as white square) and I finally got it working.

After some intensive google search, I stumbled upon this question. It seems that if we use android targetSdkVersion greater than 20, we cannot use colored images for notification icons. And yes, it happens that my icon was colored.

So I added <preference name="android-targetSdkVersion" value="19"/> to my config.xml file and the icon was drawn successfully. But then I find this, and I realized that the better approach was to use completely white icon (and some transparency) for my notification. So I did just that and removed the targetSdkVersion tag. It works as expected.

For extra information, I placed the icon image (22x22 px) at platforms/android/res/drawable/notification.png and then use it as

var notification = {
  id: id,
  title: title,
  text: message,
  smallIcon: 'notification'
};

$cordovaLocalNotification.schedule(notification);

Hope it helps.

[leommoore]

Thanks for that @bobbypriambodo . You are right. It does seem to look in the /platform/android/res/drawable folder for the smallIcon. I tried to use a uri but even then it looks for the smallIcon in the /platform/android/res/drawable folder. Also, the file name cannot have any spaces in it or it throws an error.

I found a really good site to help generate the files https://romannurik.github.io/AndroidAssetStudio

I did not need to specify the sdk version but maybe that is because the smallIcon was transparent. When I used a 48x48 png for the icon and did not specify a smallIcon it puts it in a circle. You can specify the color if you like.

      var notification = {
        id: 1,
        title: 'Hello World',  
        text: 'I just wanted to say hello', 
        icon: 'http://cdn.example.com/images/myicon_48x48.png',
        color: 'FF0000'
      }