New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

The documentation isn't clear on where to put files to be used as a smallIcon resource #504

Closed
carpiediem opened this Issue Apr 9, 2015 · 25 comments

Comments

Projects
None yet
@carpiediem

carpiediem commented Apr 9, 2015

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

This comment has been minimized.

Show comment
Hide comment
@wworley

wworley Apr 9, 2015

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?

wworley commented Apr 9, 2015

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

This comment has been minimized.

Show comment
Hide comment
@katzer

katzer Apr 13, 2015

Owner

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/...)

Owner

katzer commented Apr 13, 2015

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

This comment has been minimized.

Show comment
Hide comment
@wworley

wworley Apr 13, 2015

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.

screenshot_2015-04-13-18-18-28

wworley commented Apr 13, 2015

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.

screenshot_2015-04-13-18-18-28

@wworley

This comment has been minimized.

Show comment
Hide comment
@wworley

wworley Apr 13, 2015

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

screenshot_2015-04-13-18-38-41

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.

wworley commented Apr 13, 2015

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

screenshot_2015-04-13-18-38-41

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

This comment has been minimized.

Show comment
Hide comment
@carpiediem

carpiediem Apr 14, 2015

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

carpiediem commented Apr 14, 2015

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

@katzer

This comment has been minimized.

Show comment
Hide comment
@katzer

katzer Apr 14, 2015

Owner

@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;
    }
Owner

katzer commented Apr 14, 2015

@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

This comment has been minimized.

Show comment
Hide comment
@wworley

wworley Apr 14, 2015

@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'
});
capture

wworley commented Apr 14, 2015

@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'
});
capture

@carpiediem

This comment has been minimized.

Show comment
Hide comment
@carpiediem

carpiediem Apr 15, 2015

@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?

carpiediem commented Apr 15, 2015

@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

This comment has been minimized.

Show comment
Hide comment
@wworley

wworley Apr 18, 2015

@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

wworley commented Apr 18, 2015

@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

This comment has been minimized.

Show comment
Hide comment
@katzer

katzer May 2, 2015

Owner

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.

Owner

katzer commented May 2, 2015

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

This comment has been minimized.

Show comment
Hide comment
@tribe84

tribe84 May 7, 2015

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'});

tribe84 commented May 7, 2015

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

This comment has been minimized.

Show comment
Hide comment
@wworley

wworley May 7, 2015

@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?

wworley commented May 7, 2015

@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

This comment has been minimized.

Show comment
Hide comment
@bolonmedia

bolonmedia May 25, 2015

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!

img2
img1
img3

bolonmedia commented May 25, 2015

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!

img2
img1
img3

@DarrylD

This comment has been minimized.

Show comment
Hide comment
@DarrylD

DarrylD Jun 15, 2015

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

Place in res, lowercase and underscores, use extension.

DarrylD commented Jun 15, 2015

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

Place in res, lowercase and underscores, use extension.

@souly1

This comment has been minimized.

Show comment
Hide comment
@souly1

souly1 Sep 10, 2015

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));
}
});
});

souly1 commented Sep 10, 2015

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

This comment has been minimized.

Show comment
Hide comment
@homen

homen commented Mar 2, 2016

Working @bolonmedia

@sirius2013

This comment has been minimized.

Show comment
Hide comment
@sirius2013

sirius2013 Sep 19, 2016

This is working now?

sirius2013 commented Sep 19, 2016

This is working now?

@GK303

This comment has been minimized.

Show comment
Hide comment
@GK303

GK303 Nov 2, 2016

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

GK303 commented Nov 2, 2016

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

This comment has been minimized.

Show comment
Hide comment
@heekinho

heekinho Dec 21, 2016

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
}

heekinho commented Dec 21, 2016

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

This comment has been minimized.

Show comment
Hide comment
@iamola

iamola Feb 8, 2017

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

iamola commented Feb 8, 2017

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

@flint002

This comment has been minimized.

Show comment
Hide comment
@flint002

flint002 Feb 16, 2017

I have the same problem #ionic v2

flint002 commented Feb 16, 2017

I have the same problem #ionic v2

@rwillett

This comment has been minimized.

Show comment
Hide comment
@rwillett

rwillett Feb 16, 2017

Collaborator

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.

Collaborator

rwillett commented Feb 16, 2017

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

This comment has been minimized.

Show comment
Hide comment
@flint002

flint002 Feb 16, 2017

I solve this by adding smallicon param

without smallicon param give me blank square on the icon

thank you

flint002 commented Feb 16, 2017

I solve this by adding smallicon param

without smallicon param give me blank square on the icon

thank you

@Power-kxLee

This comment has been minimized.

Show comment
Hide comment
@Power-kxLee

Power-kxLee Feb 21, 2017

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

Power-kxLee commented Feb 21, 2017

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

@Power-kxLee

This comment has been minimized.

Show comment
Hide comment
@Power-kxLee

Power-kxLee Feb 21, 2017

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

Power-kxLee commented Feb 21, 2017

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment