Setting the small_icon: any guides?

Your Environment

• Plugin version: 0.9
• Platform: Android
• OS version: Android 7
• Device manufacturer / model: Moto 4G
• Cordova version (cordova -v): 8.0.0
• Cordova platform version (cordova platform ls): android 7.0.0
• Plugin config : N/A
• Ionic Version (if using Ionic): N/A

Expected Behavior

Want to set a small icon

Actual Behavior

I cannot set a small icon. I get a small gray circle all the time Is there any step by step guide to set up the requirements? I’ve been trying to do this for hours and I don’t know what to do even to debug this.

Steps to Reproduce

Context

Setting a small icon

Debug logs

N/A

Thanks!

[howlfu]

I got the same issue and fixed by below.

I think transparent icon means your icon color should set color opacity, or try this web to generate your small icon for test. https://romannurik.github.io/AndroidAssetStudio/icons-notification.html#source.type=clipart&source.clipart=directions_run&source.space.trim=0&source.space.pad=0.2&name=icon

I guess: cordova-plugin-local-notifications, search both drarwable andd mipmap file under android/app/src/main/res. cordova-plugin-background-mode, only search mipmap under android/app/src/main/res.

so your config should generate both icons. <icon> will go to mipmap. <resource-file> get point the target file. example config.xml:

<icon density="mdpi" src="res/icon/android/icon-48-mdpi.png" />
       <icon density="hdpi" src="res/icon/android/icon-72-hdpi.png" />
       <icon density="xhdpi" src="res/icon/android/icon-96-xhdpi.png" />

<resource-file density="mdpi" src="res/icon/android/icon2-48-mdpi.png" target="app/src/main/res/drawable-mdpi/icon2.png" />
       <resource-file density="hdpi" src="res/icon/android/icon2-72-hdpi.png" target="app/src/main/res/drawable-hdpi/icon2.png" />
       <resource-file density="xhdpi" src="res/icon/android/icon2-96-xhdpi.png" target="app/src/main/res/drawable-xhdpi/icon2.png" />

hope this will help.

[valdiego]

I had similar problem with “smallIcon” properties where the notification icon showed up as a “blank white square”. I fought frustratingly for few days, and now had resolved the issue. I wrote this to share what I did.

A. SYSTEM Android OS Cordova 8.0.0

B. DEVICES

1. Samsung Nexus Android 4.3
2. LG G4 Android 5.1
3. Emulator Android 7.0
4. ZTE Axon Android 7.1.1
5. Samsung Tablet S3 Android 8

C. PROBLEM To all of those devices, notifications were successfully triggered and showed up, but the smallIcon showed up as “blank white square” icon. I believe this means: The image is not found or invalid format.

D. ANALYSIS D.1. Default: smallIcon: "res://icon" This is the valid syntax we must follow (no file extension!). The default will look and use our app icon inside the platform’s “res directory”. As you all know, by default, Cordova will copy-paste and rename our app icon into: <project>\platforms\android\app\src\main\res\mipmap-mdpi\icon.png

However, with this default, it failed on devices 2->4. BUT it was curiously successful for device Android 4.3 (device 1) where the notification icon showed up exactly as my app icon, which is regular size 512 x 512 px. However, there was no resizing at all such that the icon was chopped off to fit the notification icon frame. Not good.

D.2. I overwrote the default to use my own: smallIcon: "res://app_notification" This was successful for my device 4.3, but continued to fail for other devices 2->4. I tried many possible assortment of solutions. Those included: Resizing the image, providing ALL of possible sizes (mdpi, hdpi, xxhdpi, and so on), copy-pastiing to both official image sub-dirs under res (mipmap and drawable), copy-pasting to ALL possible sub-dirs under res (mipmap-mdpi, mipmap-hdpi, drawable-mdpi, drawable-hdpi, and so on), redrawing the image from color to black and white, etc. Whatever suggestions I could find online. To all these “kitchen-sink” attempts, only my device 4.3 took them all and successfull 100%. But devices 2->4 continued to fail. Getting frustrated is an understatement (!!!)

E. SOLUTION Finally I came to senses and solve this with the following E.1. Define the property: smallIcon: "res://app_notification"

E.2. The image file = app_notification.png Size = 24x24 px, Color = black-white, Format = PNG. Yes, ONLY 1 size and it must be exact! As @Tawpie pointed out above, Android later versions are very STRICT about icon sizes. If the size is not that, it would fail and display “blank white square” icon. There is NO need to provide all variety of sizes. Just one image file. REF: http://www.androiddocs.com/design/style/iconography.html#notification

E.2. Copy-paste the icon into: <project>\platforms\android\app\src\main\res\mipmap-mdpi\ Yes, only into this one place. This is exactly the SAME path as where Cordova build would copy-paste our app icon. Use your own build script (whatever that is) to automatically copy-paste the icon from your source code to this target path. NO need to place the icon in any variety of paths such as drawable, drawable-hdpi, etc. Just one directory.

E.3. Clear my app CACHE inside every devices Before I redeployed my app to each device, I cleared my app cache from each device: Setting > Apps > [My app] > Clear cache. I’m not sure why I had to do this on devices 2->4. Without it, some device would randomly display the same “blank white square icon”.

I suspected (maybe, ridiculously?) the system cached the old icon and used it instead of using the new icon. I don’t know. Worse yet, for device 2 = LG Android 5.1, I must clear my app DATA (!) to force it pick up the new icon and be successful.

E.4. Successful to all devices 1->5