I’m facing a problem with notification icons with firebase : when the app is in background, notifications are displayed with custom icon as desired ; but when the app is opened, a color is displayed instead of the icon.
My config.xml file looks like :
<platform name="android">
[...]
<resource-file src="resources/android/notification/drawable-hdpi/ic_stat_app.png" target="app/src/main/res/drawable-hdpi/notification_icon.png" />
<resource-file src="resources/android/notification/drawable-mdpi/ic_stat_app.png" target="app/src/main/res/drawable-mdpi/notification_icon.png" />
<resource-file src="resources/android/notification/drawable-xhdpi/ic_stat_app.png" target="app/src/main/res/drawable-xhdpi/notification_icon.png" />
<resource-file src="resources/android/notification/drawable-xxhdpi/ic_stat_app.png" target="app/src/main/res/drawable-xxhdpi/notification_icon.png" />
<resource-file src="resources/android/notification/drawable-xxxhdpi/ic_stat_app.png" target="app/src/main/res/drawable-xxxhdpi/notification_icon.png" />
<meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="#drawable/notification_icon" />
</platform>
Icons were generated with : https://romannurik.github.io/AndroidAssetStudio/icons-notification.html
The icon name is mentioned in notification data as below :
var message = {
notification: {
body: event.messageBody,
title: event.messageTitle
},
android: {
notification: {
body: event.messageBody,
title: event.messageTitle,
sound: 'default',
icon: 'notification_icon',
color: event.notificationColor
}
},
token: registrationToken
};
I know that when the app is opened it is it's responsability to display notifications. But I don't understand why the icon is changing ?
Thanks !
When the app is in foreground, it is its responsability to handle notification.
I used FCM ionic plugin and handle push notifications directly. Problem solved.
I have created a new Ionic app and setup the cordova local notifications plugin to have notifications run in the background without the need for an external server such as Google Cloud Messaging using this plugin.
https://github.com/katzer/cordova-plugin-local-notifications
Everything seems to work but for some reason the icon shown in the notification isn't the one that I am setting in the js below - can anyone suggest what is wrong - it does show an icon, (an alarm bell) but it isn't the one that have I specified.
// within my $ionicPlatform.ready
$scope.scheduleSingleNotification = function () {
$cordovaLocalNotification.schedule({
id: 1,
title: 'Warning',
text: 'My first local notification this will stick!',
icon: '../img/github-icon.png'
}).then(function (result) {
console.log('Notification #1 triggered');
});
};
I had same problem few months back but than i have given a hit and trial an it worked for
create the icons of all sizes and copy them to /platforms/android/res/
and respective folders of sizes i hope that will solve problem
An always give the path of img respect to your index file not the file in which your are coding but to the main file in which it's included
Make sure that the icon has a white or transparent background. If you take a look at the documentation:
Android notifications
icons should only be a white-on-transparent background image.
in ionic push notifications, we can add "icon":"xxxxx" in "android" array to change a new (small) icon path ,
var push = new Ionic.Push({
"debug": true,
"pluginConfig": {
"android": {
"iconColor": "#343434",
"icon": "abc"
}
}
});
where the abc.png is from platform/android/res/drawable folder.
but is there any methods to change the push's large icon? Since, the iconColor is valid but I test lots of times , I cant change the color background to a large image.
anyone can help me.. Thanks!!
You can add an image property to the android object which is a string describing either a reference to an image in the drawables folder, an asset URI, or a remote URL. Although Ionic Push doesn't list itself as supporting this property, actual testing verifies it.
More information: https://github.com/phonegap/phonegap-plugin-push/blob/master/docs/PAYLOAD.md#images
Currently there is no support for the large icon through the FCM notification message payload.
See https://github.com/firebase/quickstart-android/issues/84 . The problem is known but the issue is closed.
I'm using ionic to build an android app. I'm using
$cordovaLocalNotification for local notifications. The notification works but it shows a default bell icon. How can I customize the notification icon?
$scope.scheduleSingleNotification = function () {
$cordovaLocalNotification.schedule({
id: 1,
title: 'GRM APP Builder',
text: 'Quer café?!?',
badge: 1,
icon: 'res://coffee.png',
data: {
customProperty: 'custom value 1'
}
}).then(function (result) {
console.log('Notification 1 triggered');
});
};
After spend hours with this question, I saw that one comment above it's really right.
If you want to change icon, you need to create a folder called "drawable" in "[my ionic app folder]\platforms\android\res\drawable".
But the trick is: after this you need to quit your livereload mode and execute again CLI command "ionic run android -l -c -s". It's necessary because you need to copy new assets to device.
I only tested with Android device, if you can test with iOS please send a review here.
According to this post on the forum, you can simply set the notification's icon and smallIcon properties. You have to put the files into /platforms/android/res/drawable/ folder. (also mind that the icon has to be started with 'res://somename')
Note: You shall replace ngCordova's notification handling functions, since they are faulty.
In the latest ionic-cli 3,
Copy your icon.png into the following folder.
platforms/android/res/drawable/icon.png
Note that this is in android only.
Once this is done( make sure that the image is a transparent icon),
next step is to initialize this icon in the notification.init function.
Now if we you are using push plugin
do the following;
const pushObj: PushObject = this.push.init({
android: {
senderID: "your_id",
icon: "icon",
forceShow: "true"
},
ios: {
alert: "true",
badge: "true",
sound: "true"
}
});
As you can see that the Only the name of the icon is added not the extenstion.
Once this is done, include a same key value pair in the server side code as well, which pushes the notification into your device.
All will be working well.
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!
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);
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.
Set this on your PhoneGap or Cordova config.xml
<preference name="android-targetSdkVersion" value="20"/>
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:
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".
Copy the respective size images to res/drawables folder.
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.
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)
For a time, you can set your android-targetSdkVersion to API 20.
This version don't use the new features, that broke the old resources.
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>);
}
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
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.
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.
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.
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);
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.
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")