Push notification icon missing (showing white box instead of app icon) in notification tray in Android 12 (SDK 32)

[vishal-revdiwala]

Bug Report

Push notification icon missing (showing white box instead of app icon) in notification tray in Android 12 (SDK 32)

Expected Behaviour

Should show app icon instead of white box

Actual Behaviour

notification icon missing and shows white box

Reproduce Scenario (including but not limited to)

Keep app in background and trigger one push notification to device.

Steps to Reproduce

Platform and Version (eg. Android 5.0 or iOS 9.2.1)

Android 12

(Android) Device Vendor (e.g. Samsung, HTC, Sony...)

Samsung, Redmi

cordova info Printout

Cordova Packages:

cli: 11.0.0
    common: 4.0.2
    create: 4.0.0
    lib: 11.0.0
        common: 4.0.2
        fetch: 3.0.1
        serve: 4.0.0

Project Installed Platforms:

android: 11.0.0
ios: 6.2.0

Project Installed Plugins:

@havesource/cordova-plugin-push: 4.0.0-dev.0
clovelced-plugin-audiomanagement: 1.0.2
com-sarriaroman-photoviewer: 1.2.4
cordova-background-geolocation-plugin: 2.0.7
cordova-plugin-android-permissions: 1.0.2
cordova-plugin-androidx-adapter: 1.1.3
cordova-plugin-app-version: 0.1.14
cordova-plugin-background-mode: 0.7.3
cordova-plugin-camera: 6.0.0
cordova-plugin-device: 2.0.2
cordova-plugin-file-opener2: 3.0.5
cordova-plugin-file-transfer: 1.7.1
cordova-plugin-file: 6.0.2
cordova-plugin-fingerprint-aio: 5.0.1
cordova-plugin-geolocation: 4.1.0
cordova-plugin-globalization: 1.11.0
cordova-plugin-ionic-keyboard: 2.2.0
cordova-plugin-ionic-webview: 5.0.0
cordova-plugin-market: 1.2.0
cordova-plugin-media: 5.0.4
cordova-plugin-nativeaudio: 3.0.9
cordova-plugin-network-information: 3.0.0
cordova-plugin-request-location-accuracy: 2.3.0
cordova-plugin-screen-orientation: 3.0.2
cordova-plugin-splashscreen: 6.0.2
cordova-plugin-statusbar: 3.0.0
cordova-plugin-vibration: 3.1.1
cordova-silent-mode: 0.9.0
cordova-sqlite-storage: 6.0.0
cordova-support-google-services: 1.4.1
cordova-wheel-selector-plugin: 1.0.0
cordova.plugins.diagnostic: 7.1.1
es6-promise-plugin: 4.2.2
phonegap-plugin-multidex: 1.0.0

Environment:

OS: macOS Ventura 13.0.1 (22A400) (darwin 22.1.0) arm64
Node: v16.17.0
npm: 8.15.0

android Environment:

android:

ERROR: Command failed with ENOENT: avdmanager list target
spawn avdmanager ENOENT

ios Environment:

xcodebuild:

Xcode 14.2
Build version 14C18

Sample Push Data Payload

Sample Code that illustrates the problem

Logs taken while reproducing problem

[preziotte]

+1 noticing the same issue

[jmdmpolo]

Same here.

[PowerP]

any Update on this?

[NityaSantosh26]

I face the same issue with few devices on Android 11 + versions. I only see a box instead of the notification icon.
Any update on this? Does any one have any workaround or a fix?

[vishal-revdiwala]

Workaround:

To create a notification icon set from Android Studio with a transparent background, follow these steps:

Open Android Studio and go to the "res" folder in your project's directory.
Right-click on "res" and select "New" > "Image Asset."
In the "Asset Type" dropdown, choose "Image."
Click on "Path" and browse to the location of your desired icon, ensuring that it has a transparent background.
Next, add the following meta tags to your AndroidManifest.xml file:

<meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="@drawable/ic_notification" />
<meta-data android:name="com.google.firebase.messaging.default_notification_color" android:resource="@color/notification_ic_color" />

Make sure that you've defined the icon background color in your colors.xml file as follows:

<color name="notification_ic_color">#D54E29</color>
By following these steps, you'll create a notification icon set with a transparent background in Android Studio. The meta tags in the AndroidManifest.xml file will reference the created icon and set the default notification color for your Firebase notifications.

[NityaSantosh26]

Hi @vishal-revdiwala, Thanks for your response.

To have the notification icon showing correctly the png should be an icon which is transparent + white color and put it in as drawable/notification_icon.png? - This I am asking because after following your steps, I get the image as a white png.
And I have iconColor included as part of PushOptions https://github.com/havesource/cordova-plugin-push/blob/master/docs/API.md#:~:text=include%20the%20extension.-,android.iconColor,-string
Do I have to remove it and just add the two tags that you've mentioned in the AndroidManifest.xml?
And an another doubt should I select the Icon Type as Notification Icons under ye "Image Asset."?

[vishal-revdiwala]

Hi @NityaSantosh26, just give it a try as I mentioned in the earlier comment. I also tried what you said, but it didn't work for me. After a couple of attempts, this method worked for me.

Is the icon type set as "Notification Icons" under the "Image Asset"? Yes.

[NityaSantosh26]

Hey @vishal-revdiwala, I have tried the way you've suggested but I don't get the icon and icon color and in the debug logs I see
D stored icon=null
D stored iconColor=null
D stored sound=true
D stored vibrate=true
D No icon color settings found
D No icon resource found from settings, using application icon
D create actions: with in-line

I've added the meta-data tags you've suggested but under application in AndroidManifest.xml but I don't see any difference.
Is any code change required for this?

[MiguelQueiroz]

This works for me: I have a PNG with alpha channel.
On cordova folder "config.xml" I have:

<resource-file src="alpha-logo-push-icon.png" target="/app/src/main/res/drawable/push_icon.png" />

Then on the plugin (javascript side) set to the name without file extension:

let push = PushNotification.init({
		android: { ... icon: 'push_icon' },