Android notification icon

[lpointet]

Android notification center doesn't show the app icon, but a white square. It may be related to "alpha transparency" image needed by Android new versions, or maybe we only need to reference a specific icon into config.xml file.

[blupu]

@lpointet I believe there's a way to solve the problem here: https://github.com/phonegap/build/issues/472.

If I am correct:

• We have to provide a specific icon for status bar notification icon
• This icon should be white with alpha transparency (@todo find the Android spec about that)
• This icon has to be stored in the res/drawables folder
• It also has to be referenced in the JS itself (?)
• The problem with PhoneGap Build is that you don't have access to the res/drawables folder (only www)
• However, it seems that since nov 2015, there is a way to copy things outside the www folder

For the record:

• http://community.phonegap.com/nitobi/topics/phonegap-builld-is-striping-images-from-res-drawable?rfm=1
• https://github.com/phonegap/phonegap-plugin-push/issues/118 (the problem is announced as solved in that thread too)

[lpointet]

AFAIK, Android spec is here: https://www.google.com/design/spec/style/icons.html#notification

[blupu]

There, a more digestible icon reference: http://iconhandbook.co.uk/reference/chart/android/

[blupu]

It seems that there's a solution: https://github.com/phonegap/build/issues/472

The idea is to use the mechanism to copy locale files to place the required white/transparency notification icon.

We should test that

I found that through:

• https://github.com/phonegap/phonegap-plugin-push/issues/118
• http://stackoverflow.com/questions/30802589/how-to-add-native-image-with-phonegap-build
• http://stackoverflow.com/questions/30802589/how-to-add-native-image-with-phonegap-build/33221780#33221780
• https://github.com/phonegap/build/issues/472

[blupu]

To solve the issue:

A good start about Android's notification icons can be found here: https://developer.android.com/guide/practices/ui_guidelines/icon_design_status_bar.html

Create a specific icon

• Android 4+ needs a specific icon for notifications
• It is used for notifications on lock screen (inside a colored circle) and in status bar
• This specific icon has to be white on transparent background
• It must be a 32bit PNG file
• It is necessary to provide an icon for each screen density (ldpi, mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi)
• a thin margin around the icon is a good practice

Sizes for various screen densities can be found here: http://iconhandbook.co.uk/reference/chart/android/

Add notification icons to your PGB project

• Notifications icons are stored in res/drawable folders (one per density)
• To have PGB copy the notification icons in the proper folders, icons has to be placed in the /locales/android/ folder
• eg. /locales/android/drawable-hdpi content will be copied to res/drawable-hdpi folder at compilation time

Great information about PhoneGap Build support for Android notification icons can be found here:

• https://documentation.onesignal.com/docs/customize-notification-icons
• https://github.com/phonegap/build/issues/472#issuecomment-172662620

PushWoosh

• To have PushWoosh use your Android notification icon, you have to name the notification files _pwnotification.png (ie. all files will have the same name but are stored in density folders)
• You can set the accent color of the circle used in locked screen notification message in the PushWoosh Send Message online interface: the field is called Image Background Color

More information about PushWoosh support of Android notification icons can be found here: http://docs.pushwoosh.com/docs/android-faq