Setting icons?

[dnish]

Hey, I just want to ask, if it possible, to set some custom icons for a notification? In my Android app, I have an colored icon in my notification bar, but I want to set the "gray" one like other apps also do.

[jpgilchrist]

@dnish you need to setup your icons in your mobile-config.js file by establishing your

App.icons({
  // iOS
  'iphone': 'resources/icons/icon-60x60.png',
  'iphone_2x': 'resources/icons/[email protected]',
  'iphone_3x': 'resources/icons/[email protected]',
  'ipad': 'resources/icons/icon-76x76.png',
  'ipad_2x': 'resources/icons/[email protected]',

  // Android
  'android_ldpi': 'resources/icons/icon-36x36.png',
  'android_mdpi': 'resources/icons/icon-48x48.png',
  'android_hdpi': 'resources/icons/icon-72x72.png',
  'android_xhdpi': 'resources/icons/icon-96x96.png'
});

[pmwisdom]

So I can't figure out how to do this. But in the notification bar, for example, those resolutions work correctly. But when you open up your "action bar" (swipe from the top down) the notificaiton icon appears too small. Which corresponds to different sized icons as seen here:

Action bar, Dialog & Tab icons 24 × 24 area in 32 × 32 (mdpi) 36 × 36 area in 48 × 48 (hdpi) 48 × 48 area in 64 × 64 (xhdpi) 72 × 72 area in 96 × 96 (xxhdpi) 96 × 96 area in 128 × 128 (xxxhdpi)

vs

Notification icons 22 × 22 area in 24 × 24 (mdpi) 33 × 33 area in 36 × 36 (hdpi) 44 × 44 area in 48 × 48 (xhdpi) 66 × 66 area in 72 × 72 (xxhdpi) 88 × 88 area in 96 × 96 (xxxhdpi)

http://iconhandbook.co.uk/reference/chart/android/

Or maybe i'm missing something.

[dnish]

@pmwisdom I think we have to set both icons manually. I've used another Cordova plugin before, and there I've to set "smallIcon" and "icon" to use both (smallicon for notification bar and the normal icon for the action bar). I don't think that Android manages it automatically.

[pmwisdom]

@dnish Yes you are correct. I had to do some native android work a bit ago and to get it to work I had to both set notification.setSmallIcon(icon) and notification.setLargeIcon(larger-scaled-icon).

In the push plugin docs it says :

"Additionally, each push can include a large icon which is used to personalize each push."

[williamli]

So am I correct to say that if I do what to have a special grey icon to show when Android receive a push alert, I will need to build the PhoneGap project and then try to add it from Android Studio?

@pmwisdom where did you read that you can put a large icon with each push? I don't see it anywhere in the raix/push doc

[pmwisdom]

@williamli I scoured the code and I don't believe Raix has added support in his interface for adding large images. The actual phonegap plugin does support it though.

Check out : https://github.com/phonegap/phonegap-plugin-push#images. That's the plugin that's used in this package.

[williamli]

@pmwisdom any idea how I can hook into with a new drawable icon?

var push = PushNotification.init({ "android": { "senderID": "123456789", "icon": "phonegap", "iconColor": "blue"}, "ios": {"alert": "true", "badge": "true", "sound": "true"}, "windows": {} });

[williamli]

@pmwisdom just scan through part of the code again. it seems that the android icon and colour is mentioned in the code, just not documented: https://github.com/raix/push/blob/f08079304c1b69897ed05edc7d96954d0416e35e/plugin/push.configuration.js#L100-L106

[williamli]

yay! I got the icon colour working by setting "iconColor": "#FF1744" in the config.push.json file. still trying my luck with the icon though.

[williamli]

no idea how to make a drawable out of a new icon. but iconColor can be defined. If someone figured out how to make a drawable, you can set it as part of the config.push.json like https://github.com/raix/push/blob/f08079304c1b69897ed05edc7d96954d0416e35e/plugin/push.configuration.js#L100-L106

[povesteam]

@williamli cc @raix

A custom push icon (for Android at least) can be set this way: Create the .png icon in your_project/resources/icons/pushicon.png (or any other path you like) Create an executable file your_project/cordova-build-override/hooks/after_prepare/pushicon_copy.sh (any file name, but keep the dir names exact) and write something similar inside:

#!/bin/bash

set -e #exit on any error

PROJECT_PATH=~/your_project
LOGFILE=~/pushicon_copy.log
DRAWABLE_DIR=$PROJECT_PATH/.meteor/local/cordova-build/platforms/android/res/drawable

mkdir -p $DRAWABLE_DIR >>$LOGFILE 2>&1
cp $PROJECT_PATH/resources/icons/pushicon.png $DRAWABLE_DIR/pushicon.png >>$LOGFILE 2>&1

Also, make sure you edit your config.push.json to include

{
    ...
    "icon": "pushicon",
    "iconColor": "#FF00FF",
    ...
}

Credit: http://devgirl.org/2013/11/12/three-hooks-your-cordovaphonegap-project-needs/

[raix]

@povesteam couldn't you just add the pushicon.png in the cordova-build-override/platforms/android/res/drawable/pushicon.png (instead of the prepare hook?)

[povesteam]

@raix I tried that first. :smile: But that way meteor build crashes when Cordova compiles for Android, telling me that the android dir isn't an Android application.

[raix]

did you report that as an issue to mdg :)

[povesteam]

Not yet, but I will. Thanks for the great push package, btw. :+1:

[lampe]

hey,

i have created a file in my-project/cordova-build-override/platforms/android/res/drawable/pushicon.png and added that to my config.push.json:

{
  ....
  "icon": "pushicon",
  "iconColor": "#FF1744"
 ....
}

when i look into the build folder i can see that the pushicon.png file is there but i still get a white square in my notification bar on android. when i pull the notification down i can see the iconColor but i see the square again there too. Can someone help ?

EDIT: after deleting .meteor/cordova-build and after rebuilding the app it worked

[williamli]

Yes, your icon need to be a png file with alpha (transparency). Android will colour in your icon in white with the background being transparent.

Sent from my iPhone

On 20 Jan 2016, at 08:07, Micha [email protected] wrote:

hey,

i have created a file in my-project/cordova-build-override/platforms/android/res/drawable/pushicon.png and added that to my config.push.json:

{ .... "icon": "pushicon", "iconColor": "#FF1744" .... } when i look into the build folder i can see that the pushicon.png file is there but i still get a white square in my notification bar on android. when i pull the notification down i can see the iconColor but i see the square again there too. Can someone help ?

— Reply to this email directly or view it on GitHub.

[VioletaCalvo]

Hi!

Adding icons in cordova-build-override/platforms/android/res/drawable/pushicon.png worked perfect for me, thank you! To generate all icons uder cordova-build-override/platforms/android/res/I used Android Asset Studio - Notification Icon Generator. Hope this help someone :blush:

[sahanDissanayake]

@VioletaCalvo what dimensions was the cordova-build-override/platforms/android/res/drawable/pushicon.png Please ?

And did you set it up inside config.push.json like this ?

"gcm": {
    "apiKey": "AIzaSyD5KCLx0q3W-9JXTZI800pYDaatIZDH9a2AY",
    "projectNumber": 107070611301087,
    "icon": "pushicon",
    "iconColor": "#FED121"
  },

[challett]

@sahanDissanayake By the look of the snippet Here, your icon and iconColor should be at the root of the object, not under gcm.

[sahanDissanayake]

ahh!!! Ok let me give that a go in the next couple of days when I get back to get it. Thanks

[mcoenca]

@sahanDissanayake @VioletaCalvo Using the tool Android Asset Studio - Notification Icon Generator, i get a cordova-build-override folder that looks like this

And with a server config like this,

I can't get the notif to show the right icon and background... Any idea ? :(

Android 5.1 and raix:[email protected]

[mcoenca]

Of course I found my stupid mistake 30 seconds after writing my comment ;) For future readers: all the icons config options should obviously be in CLIENT config. There is no more config.push.json mixing things up like sahanDissanayaka described before in

 "gcm": {
    "apiKey": "AIzaSyD5KCLx0q3W-9JXTZI800pYDaatIZDH9a2AY",
    "projectNumber": 107070611301087,
    "icon": "pushicon",
    "iconColor": "#FED121"
  },

Now you've got something like

[VioletaCalvo]

@mcoenca I set up them in the config.push.json in the app root folder, you can do that way too in Meteor < 1.3. See here the full advanced doc.

{
  "apn": {
    "passphrase": "xxxxxxxxxxxxxxxx",
    "key": "APPKey_prod.pem",
    "cert": "APPCert_prod.pem"
  },
  "apn-dev": {
    "passphrase": "xxxxxxxxxxxxxxxx",
    "key": "APPKey_dev.pem",
    "cert": "APPCert_dev.pem"
  },
  "gcm": {
    "apiKey":"xxxxxxxxxxxxxxxxxxxxxxxxxxx",
    "projectNumber":"00000000000"
  },
  "production":false,
  "badge": true,
  "sound": true,
  "alert": true,
  "vibrate": true,
  "icon": "pushiconfilename",
  "iconColor": "#6B97AF"
}

@sahanDissanayake sorry, I didn't see your question.