White notification icon for Android with Phonegap Build and PushPlugin

Question

I'm messing around with Phonegap using Adobe's Build service and I was wondering if (and if so, how) I could make my notifications display a white icon (as Google describes here). I'm using the PushPlugin but I couldn't find any documentation on this. At the moment my app just displays the launcher icon next to the notification content.

So does anyone know if there's some way to enable an alternate notification icon with the PushPlugin, am I stuck with the launcher icon or is there another plugin with this feature?

Thanks!

Answer 1

Set this on your PhoneGap or Cordova config.xml

<preference name="android-targetSdkVersion" value="20"/>

Answer 2

The new "phonegap-plugin-push" plugin has excellent support for notification icons for the new Lollipop.

Build an icon that has color on a transparent icon first. Per google's guidelines all notifications will display white on the notification tray.

So build the icon and then specify it as follows. "icon" specifies the image.

Place copies of "myicon" with appropriate resolutions in /platforms/android/res/drawable-RES/ folders as follows:

   mdpi    - 22x22 area in 24x24
   hdpi    - 33x33 area in 36x36
   xhdpi   - 44x44 area in 48x48
   xxhdpi  - 66x66 area in 72x72
   xxxhdpi - 88x88 area in 96x96

Now in your JS, specify your icon. The "iconColor" is optional and will specify the background when you swipe down.

var push = PushNotification.init({
    "android": {
        "senderID": "<<SENDER_ID>>",
        "icon": "myicon",
        "iconColor": "#123456"
    },

In your push payload you can now-override the icon that is specified on swipe down by adding an "image" parameter. Image can either be a resource, it can reference "www/image/image.png", or can be a full URL.

The "plugin docs" are excellent, I recommend reading them. Hope this is useful to somebody.