Geek Answers Handbook

White notification icon for Android with Phonegap Build and PushPlugin

I messed around with Phonegap using the Adobe Build service, and I was wondering if (and if so, how) I could make my notifications a white icon (as Google describes here ). I am using PushPlugin , but I could not find any documentation on this. Right now, my application simply displays a launch icon next to the contents of the notifications.

And does anyone know if there is a way to enable an alternate notification icon using PushPlugin, am I stuck in the launch icon or is there another plugin with this feature?

Thanks!

+8
android build cordova icons notifications
source share
11 answers

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

Create an icon that first has a color on the transparent icon. In google recommendations, all notifications will be displayed in white in the notification panel.

So, create an icon, and then specify it as follows. "icon" indicates the image.

Put copies of "myicon" with the appropriate permissions in the / platform / android / res / drawable-RES / folder 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. "IconColor" is optional and will indicate the background when scrolling down.

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

In your push payload, you can now override the icon specified when scrolling down by adding the "image" parameter. The image can either be a resource, it can refer to "www / image / image.png", or it can be a full URL.

" plugin docs " is great, I recommend reading them. Hope this is helpful to someone.

+7
source share

I have never used the Phonegap build - I am doing the manual build process on my machine. In any case, I think you should find the GCMIntentService.java file in src / com / plugin / gcm. In this file, search for the following line of code:

 .setSmallIcon(context.getApplicationInfo().icon)

This can be replaced with the icon you want. If you put an icon named "notification.png" in the / res / drawable folder, you can change the line of code to:

 .setSmallIcon(your.package.name.R.drawable.notification);
+16
source share

Install this in your PhoneGap or Cordova config.xml

 <preference name="android-targetSdkVersion" value="20"/>
+8
source share

Android API 21+ uses only white for a small icon. Changing the target version of the SDK makes your compiler use the older SDK, so U`ll will be cut in the new SDK functions. So the best way is to have two icons: small and large (when the bar is dragged down)

+1
source share

For a while, you can configure your Android-targetSdkVersion to API 20. This version does not use new functions that broke old resources.

0
source share

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

May work for old PushPlugin.

Android has set rules for the notification icon for Lollipop and above. The icon should be pure white and transparent.

What I've done:

  • Different sizes were created for my logo (let's call it "notif.png"), which was transparent using this tool . Remember that you have a transparent reverse image, if you do not have a transparent image, android will only show a white icon. Suppose the generated icon name is "ic_notif".

  • Copy the appropriate size images to the res / drawables folder.

  • In the push JS code, specify the value "ic_notif" in the property "icon". And "gray" for the property "iconColor": PushNotification.init({"android":{"senderId":"XX","icon":"ic_notif","iconColor":"grey"}});

Check your notification using this tool .

0
source share

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

First I installed the target version of sdk

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

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

  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, 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>); }
0
source share

I also had too many problems with this, but after searching all over the internet I found different solutions for this problem. Let me summarize all the decisions and explain:

Note. This solution is for Phonegap cordova users.

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

You need to set the value of your Android-targetSdkVersion to less than 21. Therefore, after setting this value, the notification icon icon will appear before Android 6 (Marshmallow), it will not work in Android 7 (nougat). This solution worked for me.

  1. Change the statusbarStyle in your configuration file. Example

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

But this solution will only work when your application is open. So, I think this solution is not the best solution, but it worked for many users.

  1. Make your icon transparent. This solution worked for many people. In fact, the fact that when developing a Native application, we need to provide them with three images: (a) Application icon (b) Notification icon (c) Image of the status bar icon, but in the case of developing a hybrid mobile application there is no way to do this. Make your icon transparent and this solution will solve your problem.

And I'm sure one of the above solutions will work for your problem.

0
source share

With the recent upgrade of PhoneGap Builder to version 2 (and CLI v7.0.1), now I can get white notification icons to display correctly using push-push-push.

First I created my .png icons (with transparency) in GIMP. Then I put them in the project in /www/res/notify_icon/android/

Here are the relevant excerpts from the 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>

This is 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);
0
source share

You just need to change

Android targetSdkVersion

in the config.xml file.

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

Android sdk version 20 supports Android logo. Therefore, you must change the Android sdk version in your code.

0
source share

If you use Build PushPlugin ; local modifications to .setSmallIcon() # 100 will be lost.

If you are not creating locally or using an alternative GCM plugin, you can change it:

 title extras.getString("title") message extras.getString("message") msgcnt extras.getString("msgcnt")
-one
source share

More articles:


All Articles