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.
Related
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 ..
I've been struggling to make tab icons show up on an actual Android device in a tab based application. It looks like icons cannot be found and all I can see is the tab text. Everything shows up fine though when running the app on the Android emulator. Has anybody had a similar problem and can give some valuable input? This issue happens only in actual Android devices, iOS works fine.
Dependencies used:
react-native : 0.49.5
react-native-navigation : 1.1.270
Code:
Navigation.startTabBasedApp({
tabs: [
{
label: 'Booking',
screen: 'LocationsForm',
icon : require('./src/assets/imgs/tabs/booking.png'),
title: 'Booking'
},
{
label: 'Account',
screen: 'AuthSplash',
icon : require('./src/assets/imgs/tabs/user.png'),
title: 'Account'
},
{
label: 'More',
screen: 'Extras',
icon : require('./src/assets/imgs/tabs/more.png'),
title: 'More'
}
]
});
UPDATE
For people that have the same problem. I could not find a way to make it work on an actual Android device when I was installing the debug.apk. The problem seems to solve itself though when you install the release.apk. So, all you have to do is assemble the production release of your app, install it, and you should be able to see the tab icons appearing fine on your Android device.
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
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.