cordova-plugin-local-notifications icon indicating copy to clipboard operation
cordova-plugin-local-notifications copied to clipboard

smallIcon doesn't work any way

Open AsoStrife opened this issue 4 years ago • 7 comments

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?

AsoStrife avatar Apr 01 '20 09:04 AsoStrife

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

benzata avatar Apr 13 '20 08:04 benzata

@AsoStrife How did you manage to solve this issue?

Carlosps avatar May 16 '20 21:05 Carlosps

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
}

chvonrohr avatar May 18 '20 07:05 chvonrohr

I can confirm the solution provided by @chvonrohr worked for me, tested on Android 10 and Android 8 (oneplus6 and samsung j3)

argaar avatar Jun 19 '20 12:06 argaar

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

Vyshnavdev avatar Jun 19 '20 18:06 Vyshnavdev

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

alexnoise79 avatar Sep 05 '21 08:09 alexnoise79

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.

kellyblaire1 avatar Jan 19 '22 20:01 kellyblaire1