cordova-plugin-local-notifications
cordova-plugin-local-notifications copied to clipboard
smallIcon doesn't work any way
Your Environment
-
Plugin version: 0.9.0-beta.2
-
Platform: Android
-
OS version: 10
-
Device manufacturer / model: Xiaomi Mi 8 Lite, but tried with differents emulator and other devices
-
Cordova version (
cordova -v
): 9.0.0 -
Cordova platform version (
cordova platform ls
): android 8.1.0 -
Plugin config
Expected Behavior
Hi, I'm using this plugin in order to send a local notification to my user. I'm using this code:
cordova.plugins.notification.local.schedule({
id: Math.floor(Math.random() * 100),
title: "Notifica di prova",
text: 'Testo cordova',
icon: 'https://myurl.com/image.png', //this work
smallIcon: 'res://ic_launcher', // this doesn't work
led: "FF0266",
});
and my config.xml is setted like this:
<platform name="android">
<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="android-minSdkVersion" value="21" />
<preference name="SplashMaintainAspectRatio" value="true" />
<splash density="land-hdpi" src="res/screen/android/drawable-hdpi/screen.png" />
<splash density="land-mdpi" src="res/screen/android/drawable-mdpi/screen.png" />
<splash density="land-xhdpi" src="res/screen/android/drawable-xhdpi/screen.png" />
<splash density="land-xxhdpi" src="res/screen/android/drawable-xxhdpi/screen.png" />
<splash density="land-xxxhdpi" src="res/screen/android/drawable-xxxhdpi/screen.png" />
<splash density="port-hdpi" src="res/screen/android/drawable-hdpi/screen.png" />
<splash density="port-mdpi" src="res/screen/android/drawable-mdpi/screen.png" />
<splash density="port-xhdpi" src="res/screen/android/drawable-xhdpi/screen.png" />
<splash density="port-xxhdpi" src="res/screen/android/drawable-xxhdpi/screen.png" />
<splash density="port-xxxhdpi" src="res/screen/android/drawable-xxxhdpi/screen.png" />
<icon density="ldpi" src="res/icon/android/mipmap-ldpi/ic_launcher.png" />
<icon density="mdpi" src="res/icon/android/mipmap-mdpi/ic_launcher.png" />
<icon density="hdpi" src="res/icon/android/mipmap-hdpi/ic_launcher.png" />
<icon density="xhdpi" src="res/icon/android/mipmap-xhdpi/ic_launcher.png" />
<icon density="xxhdpi" src="res/icon/android/mipmap-xxhdpi/ic_launcher.png" />
<icon density="xxxhdpi" src="res/icon/android/mipmap-xxxhdpi/ic_launcher.png" />
</platform>
Actual Behavior
But when the phone recive the local notification, smallIcon is not shown. I see only a gray circular icon
My question
I've tried all the solution proposed in this issue repository and all answers on stackoverflow. Is this plugin version bugged or I'm doing something wrong?
It does work. It's just a little bit hard to make it work :)
There are specific requirements for the image itself (transparency) and the location.
You need to put the icon here: platforms/android/app/src/main/res/drawable (manually create it)
And then use smallIcon: 'res://logo.png'
Here are two topics, read them carefully:
https://github.com/katzer/cordova-plugin-local-notifications/issues/966
https://github.com/katzer/cordova-plugin-local-notifications/wiki/10.-URIs
@AsoStrife How did you manage to solve this issue?
It worked for me with following setup:
config.xml
<platform name="android">
<resource-file src="resources/android/notification/mia_icon_hdpi.png" target="/app/src/main/res/drawable-hdpi/mia_notification_icon.png" />
<resource-file src="resources/android/notification/mia_icon_mdpi.png" target="/app/src/main/res/drawable-mdpi/mia_notification_icon.png" />
<resource-file src="resources/android/notification/mia_icon_xhdpi.png" target="/app/src/main/res/drawable-xhdpi/mia_notification_icon.png" />
<resource-file src="resources/android/notification/mia_icon_xxhdpi.png" target="/app/src/main/res/drawable-xxhdpi/mia_notification_icon.png" />
<resource-file src="resources/android/notification/mia_icon_xxxhdpi.png" target="/app/src/main/res/drawable-xxxhdpi/mia_notification_icon.png" />
</platform>
Icon should have transparent background. It's not possible to have differente colors, Android will apply color show it grayscaled (or the color you define - see below).
Don't use dashes (-
) in the filename. Otherwise, you get errors on building.
then use the following in the trigger event:
{
// .. other settings
smallIcon: 'res://mia_notification_icon`,
color: '#D3002E' // color for icon and action buttons
}
I can confirm the solution provided by @chvonrohr worked for me, tested on Android 10 and Android 8 (oneplus6 and samsung j3)
No still facing the problem even after trying with above information .As explained above ,I placed the icon in 'platforms/android/app/src/main/res/drawable' but it was not showing the icon still
i would add a note, color profile of the images is very important, i spent couple of hours to understand it, then i found this tool
https://romannurik.github.io/AndroidAssetStudio/index.html
just click on "notification icon generator" and follow the instructions
It worked for me with following setup:
config.xml
<platform name="android"> <resource-file src="resources/android/notification/mia_icon_hdpi.png" target="/app/src/main/res/drawable-hdpi/mia_notification_icon.png" /> <resource-file src="resources/android/notification/mia_icon_mdpi.png" target="/app/src/main/res/drawable-mdpi/mia_notification_icon.png" /> <resource-file src="resources/android/notification/mia_icon_xhdpi.png" target="/app/src/main/res/drawable-xhdpi/mia_notification_icon.png" /> <resource-file src="resources/android/notification/mia_icon_xxhdpi.png" target="/app/src/main/res/drawable-xxhdpi/mia_notification_icon.png" /> <resource-file src="resources/android/notification/mia_icon_xxxhdpi.png" target="/app/src/main/res/drawable-xxxhdpi/mia_notification_icon.png" /> </platform>
Icon should have transparent background. It's not possible to have differente colors, Android will apply color show it grayscaled (or the color you define - see below). Don't use dashes (
-
) in the filename. Otherwise, you get errors on building.then use the following in the trigger event:
{ // .. other settings smallIcon: 'res://mia_notification_icon`, color: '#D3002E' // color for icon and action buttons }
Thanks. This worked for me.