White notification icon for Android with Phonegap Build and PushPlugin - android

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")

Related

Cordova Android 10 - Trouble to assign the root path

As breautek wonderfully explain here , with Android 10 Platform (the mximum platform available at the moment on Cordova and the minimum platform required to publish on playstore) "XHR not CORS request" and "file://" not working if I don't set on my config.xml
<preference name="hostname" value="localhost" />
<preference name="AndroidInsecureFileModeEnabled" value="true" />
I'm pretty sure that this solution is useful... but temporary. I'm sure the PlayStore will impose a new restriction shortly and this solution will be in vain.
So I decided to not use them and carry on... I have solved my problem about XHR CORS request but I have no solution about how to set the root path... for example to assign it an image path
At the moment I get it as:
var urlRootMobile=cordova.file.applicationDirectory+'www/';
var img1 = urlRootMobile."/img/1.png";
var img2 = urlRootMobile."/img/2.png";
var img3 = urlRootMobile."/img/3.png";
Obviously don't work on my app because the path is : " file:///android_asset/www/img/1.png"
I tried to use "https://localhost/www"
I tried to use "https://localhost"
I tried to use "/"
But nothing...
I there some other command or trick ???
You need to use cordova-plugin-file to read these files.
If you just need to read images from www then the path is simply '/img/1.png'

SVG images is not showing in Nativescript

I am trying to use svg images for android in native-script. Here is my code
<StackLayout xmlns:svg="#teammaestro/nativescript-svg">
<svg:SVGImage src="~/images/app_settings.svg" height="250" width="250" /> </StackLayout>
I am using this native-script plugin . However I am not getting any error. But the images are not showing in android emulator.
Finally, I solved this issue on my side.
Firstly, I use this package from SergeyMell: nativescript-svg. Those two packages are very similar since they both forked this same package peoplewareDo/-nativescript-svg.
I moved all the SVG files from App_Ressources to an assets folder in the app folder.
Then I added this line in webpack.config.js:
{ from: '**/*.svg', noErrorOnMissing: true, globOptions: { dot: false, ...copyIgnore } }
Finally,
<SVGImage src="~/assets/file.svg"></SVGImage>
This answer is not a big thing but now it's working fine for my project. Some of the steps were already done and the big changes are the folders move. Perhaps Android ignores for some conditions some files from App_Resources.
I hope it'll help as it worked for me.

Flutter oneSignal notifications icon not set

I'm using one signal within my flutter app and everything is fine except the notifications have no icon ( comes with a default bill icon ).
I have read the documentation for one signal and generated an AssetsImage by Android Studio in PROJECT/android/res/ with name ic_stat_onesignal_default
Then I built the app using the command flutter run --release on a real device and still, the notification comes with default bill icon instead of my app icon!!
Is there some code required in the AndroidManifest.xml file too?
use these tool and upload image that is trnasperts
http://romannurik.github.io/AndroidAssetStudio/icons-notification.html#source.type=image&source.space.trim=1&source.space.pad=0&name=ic_stat_onesignal_default
for onesignal the folders names is drawable-xxxx
so you just download from the tool and extract inside the android\app\src\main\res
Note :-
Starting with Android 5, the OS forces Small Notification Icons to be all white when your app targets Android API 21+. If you don't make a correct icon, it will most likely be displayed as a bell or solid white icon in the status bar.
just do some simple things and it changes your default notification icon. I also face this problem in 2021 but I resolve it
in AndroidManifest.xml
<meta-data
android:name="com.onesignal.messaging.default_notification_icon"
android:resource="#mipmap/ic_stat_onesignal_default" />
in build.gradle
buildTypes {
debug {
defaultConfig {
manifestPlaceholders = [onesignal_app_id : "your onesignal app id put here",
onesignal_google_project_number: "your project number put here"]
}
}
}
put your pic in app/main/res/drawable and also in all mipmap with the name "ic_stat_onesignal_default" ..please must use this name otherwise it's not working ..

Icon is not displaying in push notifications in ionic 2

I am trying to display app icon in notification. But it is displaying blank icon.
I have given pushoptions as below:
const options: PushOptions = {
android: {
titleKey: 'App',
sound: 'true',
icon: 'res/drawable/notification_icon',
topics: ['MyTopic']
},
ios: {
alert: 'true',
badge: false,
sound: 'true'
},
windows: {}
};
and copied the icon image as below which has resolution of 40*40px.
<resource-file src="resources/notification_icon.png" target="res/drawable/notification_icon.png" />
Is there anything that I am missing?
Update:
I followed this link : https://github.com/ionic-team/ionic-cli/issues/608 and tried it by copying all the notification icon under resources/android/notification/drawable-XYZ/ic_stat_ac_unit.png to res/drawable-XYZ/ic_stat_ac_unit.png using the following statements:
<resource-file src="resources/android/notification/drawable-hdpi/ic_stat_ac_unit.png" target="res/drawable-hdpi/ic_stat_ac_unit.png" />
<resource-file src="resources/android/notification/drawable-mdpi/ic_stat_ac_unit.png" target="res/drawable-mdpi/ic_stat_ac_unit.png" />
<resource-file src="resources/android/notification/drawable-xhdpi/ic_stat_ac_unit.png" target="res/drawable-xhdpi/ic_stat_ac_unit.png" />
<resource-file src="resources/android/notification/drawable-xxhdpi/ic_stat_ac_unit.png" target="res/drawable-xxhdpi/ic_stat_ac_unit.png" />
<resource-file src="resources/android/notification/drawable-xxxhdpi/ic_stat_ac_unit.png" target="res/drawable-xxxhdpi/ic_stat_ac_unit.png" />
and modified PushOptions in app.component.ts to :
android: {
titleKey: 'App',
sound: true,
vibrate:true,
icon: 'ic_stat_ac_unit',
iconColor:'#343434',
topics: ['MyTopic']
}
Even this did not worked - Same Issue.
it is probably of not setting the alpha channel on the icon in the shape you want to display. Android 5.0+ adds a white mask to all small notification icons. you can be using the Android Asset Studio to create the icon set as it will show you how it will look on the device to make sure you have it correct.
In Android 5.0+, push notification icon has to be two-color:
transparent background + white foreground; otherwise the default app
icon is taken, and anything non-transparent is displayed as white (so
very likely, the user will see a white)
I think you get your answer from below link:
https://stackoverflow.com/a/30795471/7329597
I hope it helps you.:)
I used the ionic fcm plugin to fix the issue. I just replaced cordova push plugin with Cordova fcm plugin icon displayed. I wasted a lot of time on push plugin.I hope this answer helps others.
Please refer to below links for more information :
https://ionicframework.com/docs/native/fcm/
https://github.com/fechanique/cordova-plugin-fcm

Where to find default system icons in Nativescript?

I have created an empty Nativescript application with tns create myApp'. However,app/App_Resources/Android/drawable-hdpi` and other directories does not contain any default system icons. Thus, I cannot use them in the application. How can I find or install default system icons?
However, the default system icons are called using something like this:
<ActionItem ios:systemIcon="12" android:systemIcon="ic_menu_search" tap="showSearch" ios:position="right" android:position="actionBar" />
You can find a list (unfortunately without images) at https://developer.android.com/reference/android/R.drawable.html
For using your custom icons in the application, you have to add them in each drawable-XXX folder and then in your XML src="res://my_icon"
You can find more informations in the official documentation of NS : https://docs.nativescript.org/ui/ui-images#load-images-from-resource

Categories

Resources