Cordova-plugin-local-notifications: Android notification always appear to show the default ic_popup_reminder (bell-like) icon regardless

Created on 1 Mar 2016 · 12Comments · Source: katzer/cordova-plugin-local-notifications

I have setup the local notifications and they work really well with the Ionic framework. Within my Ionic Ready block I have the following code in which I have set the icon image (I am using this image http://sciactive.com/pnotify/includes/github-icon.png)

As the path is relative to the app.js file, the image is up a level within a folder called 'img' and the file is called 'github-icon.png'.

For some reason the same 'bell' default icon always appears?? Is this a bug? I am using Android 6.0.1 on my Nexus 5.

$scope.scheduleSingleNotification = function () {
      $cordovaLocalNotification.schedule({
        id: 1,
        title: 'Warning',
        text: 'my first notification!',
        icon: 'file://img/logo.png',
      }).then(function (result) {
        console.log('Notification #1 triggered');
      });
    };

https://github.com/katzer/cordova-plugin-local-notifications/wiki/10.-URIs
This is the image that appears in my local notification
ftp://ftp.gunadarma.ac.id/android/sdk/sdk_310712/docs/resources/samples/ApiDemos/res/drawable-hdpi/ic_popup_reminder.html

android Awaiting Information

Source

gkimpson

Most helpful comment

It took me a loooooong time but I think I have it completely under control!
My relevant notification options are:
{ icon: 'file://assets/icon/notification_icon.png', smallIcon: 'res://ic_notification_icon_large' }
The first is a 128x128 icon in /src/assets/icon/notification_icon.png (it's the one you see when you pull down the notification area) - I have tried several other sizes and this seemed the correct one.
The second (the res:// one) is actually a set of icons that I prepared with http://romannurik.github.io/AndroidAssetStudio/ using asset size = 24dp. The result is a handy zip containing a single "res" folder - just copy this folder in your /platforms/android folder so that it merges with the existing "res" folder there, and voilà, all the properly resized icons are there.

pgcd on 18 Mar 2017

👍4 🎉1

All 12 comments

Because the Android native code part of this plugin is looking for the asset, if you read the docs it says you have to use the res://filenamewithoutextension, and that it has to be in the res/drawable folder, not in the www folder.

EDIT: Actually, that's not technically true, supposedly a www image file works as well, (it is the smallIcon definition that says it requires the res file), however, this is the only way I managed to make it work.

mix3d on 2 Mar 2016

After digging into the code, I finally found out why exactly it doesn't work the way you'd expect. The docs should be improved (if I get a second I'll submit a PR for the wiki):

Small icons support resource files ONLY (see the javadocs here: http://developer.android.com/reference/android/support/v4/app/NotificationCompat.Builder.html#setSmallIcon(int) - note that the plugin uses NotificationCompat.Builder and not Notification.Builder for backwards support)
Large icons support bitmaps ONLY, but you can load the bitmap from a resource file or a URI (see javadocs again)

Because of these, the code is structured to check if the small icon is present. If it is not, it will attempt to set the small icon from the "icon" config param (only ends up using a resource file). If it is present, it will attempt to set the small and large icons as configured with large using the "icon" config param and supporting URI.

I'm going to test out a fix where I use a custom git-based plugin that I can use to get the resource file in there for phonegap build, since they don't support hooks there.

bluesliverx on 17 Mar 2016

I have the same problem...but with res:// file too.

gilvandev on 29 Mar 2016

@gilvandev, where is your file located, in the /platforms/android/ project? Are you familiar with the structure of Android projects? When you specify with res://, that means the url needs to point to a file in the platforms/android/res/ folder, but also split into the various DPI resolutions folders (drawable-xhdpi, drawable-hdpi, etc). Furthermore, because of the way android has setup it's 'drawable' resources, you don't add the filetype extension.

Example: you set the icon to "res://alerticon", and android will determine the screen density of the device running your app (lets say it is xhdpi), then it looks in the res/drawable-xhdpi/ folder for any file named "alerticon", and finds your icon as alerticon.png. If it doesn't find it in the "correct" density folder, it will look in all the other density folders for the closest match, finally looking in res/drawable/.

I have a script hook to copy my icon into the correct folders, that runs on the after_platform_add cordova hook, to copy them from my www folder into the correct res folder.

TLDR: res:// won't find files in the www folder

mix3d on 29 Mar 2016

👍2

@mix3d thanks buddy, you saved the day. You are the real MVP :+1: :+1: