适用于Android的白色通知图标，带有Phonegap Build和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

I have never used Phonegap build - I do the build process manually on my machine. Anyway, I think you should find the GCMIntentService.java file under src/com/plugin/gcm. In that file, search for the following line of code:

.setSmallIcon(context.getApplicationInfo().icon)

This may be replaced by the icon you want. If you place an icon named "notification.png" in the /res/drawable folder, you could change the code line to:

.setSmallIcon(your.package.name.R.drawable.notification);

Answer 2

在PhoneGap或Cordova config.xml上设置此项

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

Answer 3

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.

Answer 4

This is for the new plugin - phonegap-plugin-push

Might work for the old PushPlugin as well.

Android has set guidelines for the notification icon for Lollipop and above. The icon needs to be purely white and transparent.

What I did:

1. Generated different sizes for my logo image (lets name it "notif.png") which had transparent back, using this tool . Remember to have a transparent back image, if you dont have a transparent image, android will just show white icon only. Lets assume the generated icon's name is "ic_notif".

2. Copy the respective size images to res/drawables folder.

3. In the push JS code, give the value "ic_notif" to "icon" property. And "grey" to "iconColor" property like this: PushNotification.init({"android":{"senderId":"XX","icon":"ic_notif","iconColor":"grey"}});

Test your notification using this tool .

Answer 5

Android API 21+ uses only white color for small icon. Changing target SDK Version makes your compiler to use elder SDK so U`ll be cut in new SDK features. So the best way is to have two icons: small and big one (when bar is dragged down)

Answer 6

有一段时间，您可以将android-targetSdkVersion设置为API 20.此版本不使用新功能，这打破了旧资源。

Answer 7

For me the solution works when combining two answers from here:

First I set the target sdk version

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

And then I edited the plugin code as suggested here, in GCMIntentService class I modified the setNotificationSmallIcon method to be:

 private void setNotificationSmallIcon(Context context, Bundle extras, String packageName, Resources resources, NotificationCompat.Builder mBuilder, String localIcon) {
    mBuilder.setSmallIcon(getApplicationContext().getApplicationInfo().icon);
}

or if you want to set a custom icon then use

 private void setNotificationSmallIcon(Context context, Bundle extras, String packageName, Resources resources, NotificationCompat.Builder mBuilder, String localIcon) {
    mBuilder.setSmallIcon(<your.package.name>.R.drawable.<notification-drawable-name>);
}

Answer 8

I also faced too many problem in this but after searching all over the internet i found different solutions for this issue.Let me sum up all the solutions and explain:

Note:This solution is for Phonegap cordova users

1. Example

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

You need to set your android-targetSdkVersion value to less than 21. So after setting this value Notification icon image will appear till Android 6(Marshmallow), It won't work in Android 7(Nougat). This solution worked for me.

2. Change the statusbarStyle in your config file. Example

<preference name="StatusBarStyle" value="lightcontent" />

But this solution will work only when your app is opened. So, I guess this solution is not the best solution but it worked for many users.

3. Make your icon transparent. This solution worked for many people. Actually the thing is, In the development of Native aplication we need to provide them three images: (a)App icon (b)Notification icon (c)Status bar icon image, but in case of Hybrid mobile application development there is no option to do so. So make your icon transparent and this solution will solve your problem.

And I am sure one of the above solution will work for your issue.

Answer 9

With the recent update to PhoneGap Builder to version 2 (and CLI v7.0.1), I'm now able to get white notification icons to appear correctly with cordova-plugin-push.

I first created my .png icons (with transparency) in GIMP. I then put them in my project at /www/res/notify_icon/android/

Here are the relevant excerpts of my config.xml file:

<widget id="com.myapp.app" version="1.2.0" xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0">
    <preference name="phonegap-version" value="cli-7.0.1" />
    <preference name="pgb-builder-version" value="2" />

    ...

    <plugin name="phonegap-plugin-push" source="npm" spec="~2.0.0-rc5">
        <param name="SENDER_ID" value="1xxxxxxxxxx0" />
    </plugin>

    ...

    <platform name="android">
        <resource-file src="google-services.json" target="google-services.json" />
        <resource-file src="www/res/notify_icon/android/notify_icon-36-ldpi.png" target="res/drawable-ldpi/notify_icon.png" />
        <resource-file src="www/res/notify_icon/android/notify_icon-48-mdpi.png" target="res/drawable-mdpi/notify_icon.png" />
        <resource-file src="www/res/notify_icon/android/notify_icon-72-hdpi.png" target="res/drawable-hdpi/notify_icon.png" />
        <resource-file src="www/res/notify_icon/android/notify_icon-96-xhdpi.png" target="res/drawable-xhdpi/notify_icon.png" />
        <resource-file src="www/res/notify_icon/android/notify_icon-144-xxhdpi.png" target="res/drawable-xxhdpi/notify_icon.png" />
        <resource-file src="www/res/notify_icon/android/notify_icon-192-xxxhdpi.png" target="res/drawable-xxxhdpi/notify_icon.png" />

        ...

    </platform>
</widget>

Here is the where I initialize push:

    document.addEventListener("deviceready", function() {

        var push_options = {
            android: {
                senderID: "1xxxxxxxxxxx0",
                sound: true,
                vibrate: true,
                icon:  'notify_icon',
                iconColor: '#66CC00'
            },
            browser: {},
            ios: {
                senderID: "1xxxxxxxxxxx0",
                alert: true,
                badge: true,
                sound: true
            },
            windows: {}
        };

        var push = PushNotification.init(push_options);

Answer 10

You just need to the change the

android-targetSdkVersion

in your config.xml file.

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

20 android sdk version support the logo in Android. So you have to change the android sdk version in your code.

Answer 11

If you're using Build's PushPlugin ; local modifications to .setSmallIcon() ^#100 will be lost.

Unless you build locally or use an alternative GCM plugin, you're restricted to modifying:

title    extras.getString("title")
message  extras.getString("message")
msgcnt   extras.getString("msgcnt")