Cordova-plugin-local-notifications: The documentation isn't clear on where to put files to be used as a smallIcon resource

[carpiediem]

Closed issues like 230 and 398 make it clear that the smallIcon must be be placed in the res directory, but I'm having trouble figuring out how to do that in my Ionic project. It includes a resources/android directory with both icon & splash as sub-directories. Do I put the PNG file directly in there? In a new sub-directory? Somewhere else? What do I name the file so that I can refer to it in the schedule function?

cordova.plugins.notification.local.schedule({
  id: 1,
  title: title,
  text: message,
  at: new Date(now + delay * 1000),
  sound: sound,
  smallIcon: 'notification',
  led: 'FBA50A',
  badge: 1
});

[wworley]

I've got the same issue, by default the icon seems to be a alert bell icon which is android default, i've tried to change to file://res/icon/android/small.png and that didn't work, maybe in the latest version the small icon has been removed on accident?

[katzer]

See https://github.com/katzer/cordova-plugin-local-notifications/wiki/10.-URIs

res://icon/android/small.png (native ressource folder)
file://res/icon/android/small.png (www/res/...)

[wworley]

Still doesn't seem to work.

    function triggerMessage() {
        var msgNum = Math.floor((Math.random() * 100) + 1);
        window.plugin.notification.local.add({
            id:         msgNum,  // A unique id of the notifiction
            title:      '7:00PM - 8:00PM',  // The title of the message
            message:    'BOGO: Premium drinks at some bar!',  // The message that is displayed
            icon:       'file://icon.png',
            led:        '009900',
            sound:      'file://cricket.mp3',
            smallIcon:  'file://res/icon/android/small.png'
        });
    }

All i see if the main icon.png and where the small icon should be (normally the bell icon on android) there is just a black square, i've confirmed the small icon exists and is in the right location.

[wworley]

Not using the smallIcon param results in the below as expected.

i should also mention that when the smallIcon param is there and no icon shows up (black square) there is no icon in the status bar either where normally would be the bell icon.

[carpiediem]

Yeah, this is the same results I've been having. Perhaps something got broken during the recent rewrite?

[katzer]

@wworley, the reason is that on Android smallIcon needs to point to a native resource e.q res://.... The black square comes from the plugin because it cannot find the resource icon.

    /**
     * Small icon resource ID for the local notification.
     */
    public int getSmallIcon () {
        String icon = options.optString("smallIcon", "");

        int resId = assets.getResIdForDrawable(icon);

        if (resId == 0) {
            resId = android.R.drawable.screen_background_dark;
        }

        return resId;
    }

[wworley]

@katzer Ok so if i specify the same icon as the one used for param icon it seems to work just fine, however if i specify any other name other than "icon.png" i get the black square even though the icon does exist in the www directory

THIS WORKS
window.plugin.notification.local.add({
id: msgNum, // A unique id of the notifiction
title: '7:00PM - 8:00PM', // The title of the message
message: 'BOGO: Premium drinks at some bar!', // The message that is displayed
icon: 'file://icon.png',
smallIcon: 'file://icon.png',
led: '009900',
sound: 'file://cricket.mp3'
});

THIS DOES NOT WORK
window.plugin.notification.local.add({
id: msgNum, // A unique id of the notifiction
title: '7:00PM - 8:00PM', // The title of the message
message: 'BOGO: Premium drinks at some bar!', // The message that is displayed
icon: 'file://icon.png',
smallIcon: 'file://small.png',
led: '009900',
sound: 'file://cricket.mp3'
});

[carpiediem]

@katzer , I think the trouble I'm having might be related to the different file structures used in your kitchen sink app

/platforms/android/res/drawable-hdpi/icon.png  (12 other directories for various sizes)

and the Ionic starter app that my project is based on.

/resources/android/icon/drawable-hdpi-icon.png   (5 other icons for various sizes)

I've tried various versions of 'res://small' and tried putting my file in every location in the resources folder that I can think of, but I'm still getting a blank icon (strangely, mine is white instead of black). I can't even duplicate @wworley 's success using the same file:// address for both icon & smallIcon.

Do you have any idea how I refer to a specific resource in Ionic's file system? What should the string in my controller say? What should I name the file and where should it sit?

I'm also suspicious that the file size might be a factor in the problems I'm having. I've been testing with a 24x24px PNG image; should I use something else?

[wworley]

@carpiediem i think you can rule out the file dimensions and file size as the standard cordova icon is 128X128 and file size of 12KB the small icon i was trying to use was same size and similar in file size.

I should mention i'm using phonegap, phonegap build and obviously on android and have not yet tested on iOS

[katzer]

smallIcon only works with res:// uri because Android needs the resource ID for that file and therefor the file has to be placed in a special folder.

res://icon refers to _R.drawable.icon_. Not sure about the naming under ionic.

[tribe84]

Dropped my icons into the platforms/android/res/drawable folder and pointed to it using file:// and it all works as expected for me.

cordova.plugins.notification.local.schedule({title:"notification",message:"yeah boi", icon: 'file://notification_icon.png',smallIcon: 'file://notification_alert',led: '009900'});

[wworley]

@tribe84 please tell me how the small icon is working without the file extension? OR is the file extension no required which is why no one else but you can get it to work?

[bolonmedia]

If you are using Meteorjs, all you need to do is go to this link --> https://forums.meteor.com/t/meteor-cordova-www-directory/3851/5 read the comment and later use the solution @tribe84 provides, and everything will work as expected!

[DarrylD]

Not using meteor but, @bolonmedia works perfectly for me.

Place in res, lowercase and underscores, use extension.

[souly1]

A small simple workaround if you fear to change your platform folder manually is to add a Cordova 'after_prepare' hook and copy a file from folder a to platforms/android/res/drawable, this worked for me.

Simple code example for such a hook file:

!/usr/bin/env node

var filestocopy = [{
"www/img/notification_icon.png":
"platforms/android/res/drawable/notification_icon.png"
}];

var fs = require('fs');
var path = require('path');

// no need to configure below
var rootdir = process.argv[2];

filestocopy.forEach(function(obj) {
Object.keys(obj).forEach(function(key) {
var val = obj[key];
var srcfile = path.join(rootdir, key);
var destfile = path.join(rootdir, val);
//console.log("copying "+srcfile+" to "+destfile);
var destdir = path.dirname(destfile);
if (fs.existsSync(srcfile) && fs.existsSync(destdir)) {
fs.createReadStream(srcfile).pipe(
fs.createWriteStream(destfile));
}
});
});

[homen]

Working @bolonmedia

[sirius2013]

This is working now?

[GK303]

I use the phonegap for android and want to change the notification icon for the app ,I use your method,but it still not work?would you help me?if in the android workspace(phonegap),which foolder I should choose to put the icon?@bolonmedia

[heekinho]

I'm using ionic and I had the same problem as @carpiediem: the icon was entirely white.
That happened because I didn't realized at first that the icon should be flat. So I prepared an icon using only white and transparency and it's ok now.

I also prepared a similar hook like @souly1.

#!/usr/bin/env node

var fs = require('fs-extra');
var path = require('path');

var androidPlatformsDir = path.resolve(__dirname, '../../platforms/android/res'); 
var notificationIconsDir = path.resolve(__dirname, '../../resources/android/notification-icon');
fs.copy(notificationIconsDir, androidPlatformsDir);

Also, my configuration looks like this:
```
{
...
icon : 'file://img/icon.png', // This is on the www folder
smallIcon: 'res://ic_notification.png' // This is on the platform/android/res/drawable-* folders
}

[iamola]

@wworley I tried your method that works, does not work for me using Phonegap Build.
icon: 'file://icon.png', smallIcon: 'file://icon.png',

[flint002]

I have the same problem #ionic v2

[rwillett]

We have it working on Ionic 1, with PushWoosh and local notifications.

We use a very similar technique to populate the Android folders as @heekinho. The only differences is our start folder locations and we use a shell script and not JavaScript.

We don't use smallIcon though. We do use icon and its identical to @heekinho.

Works fine for us.

[flint002]

I solve this by adding smallicon param

without smallicon param give me blank square on the icon

thank you

[Power-kxLee]

@flint002 Thanks, the normal work. However, smallIcon and icon conflict, only one

[Power-kxLee]

@flint002 Try it, you can set smallIcon as file: //small.png can be compatible