Adaptive Icon not working with cordova-android 12

[jamesfdickinson]

Bug Report

Error:
"One of the following attributes are set but missing the other for the density type: mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi. Please ensure that all required attributes are defined."

Problem

The adaptive icon is missing the background and the foreground is small with cordova-android 12.  The adaptive icon works properly with cordova-android 11.

What is expected to happen?

ic_launcher_background and ic_launcher_foreground assets are copied to the build.

What does actually happen?

Only ic_launcher is created and copied and not ic_launcher_background and ic_launcher_foreground.

Information

Config.xml

        <icon background="resources/android/icon/mipmap-mdpi/ic_launcher_background.png" density="mdpi" foreground="resources/android/icon/mipmap-mdpi/ic_launcher_foreground.png" />
        <icon background="resources/android/icon/mipmap-hdpi/ic_launcher_background.png" density="hdpi" foreground="resources/android/icon/mipmap-hdpi/ic_launcher_foreground.png" />
        <icon background="resources/android/icon/mipmap-xhdpi/ic_launcher_background.png" density="xhdpi" foreground="resources/android/icon/mipmap-xhdpi/ic_launcher_foreground.png" />
        <icon background="resources/android/icon/mipmap-xxhdpi/ic_launcher_background.png" density="xxhdpi" foreground="resources/android/icon/mipmap-xxhdpi/ic_launcher_foreground.png" />
        <icon background="resources/android/icon/mipmap-xxxhdpi/ic_launcher_background.png" density="xxxhdpi" foreground="resources/android/icon/mipmap-xxxhdpi/ic_launcher_foreground.png" />

Command or Code

Environment, Platform, Device

Dev environment: Windows 10
Target platform: Android

Version information

cordova-android 12.0.0
cordova-cli 12

Checklist

• I searched for existing GitHub issues
• I updated all Cordova tooling to most recent version
• I included all the necessary information above

[breautek]

Was able to reproduce the issue locally. I believe this is a regression from our #1550 update. I didn't notice it was an issue before since I have a src fallback.

Until a patch is made, I think there are two workarounds:

1. Include a src attribute to your icons, which should be a full android drawable (either a rasterized PNG, and I believe android's AVD is also suppported). This will include icons for pre API 26 devices (and will also apply to API 26+ devices if the adaptive icons aren't present, which due to this bug they aren't). This of course has the caveat that your icons won't be adaptive icons and animations and such won't apply.
2. If you include a monochrome icon via the monochrome attribute which should lead to an android drawable that is a black and white version of your icon, then the adaptive icons do work as expected (you'll have res/mipmap-<density>-v26/ with the background, foreground resources with the ic_launcher.xml that defines the adaptive icon. API 33 devices with themes enabled will use this icon to produce a themeable icon that works in light mode, dark mode, and their choice of primary colour.

It isn't intended for monochrome icon to be required to use adaptive icons. So specifying just the background and foreground attributes is suppose to continue to work as it did before, so I've marked this as a bug and will add this issue to a 12.0.1 milestone.

[jamesfdickinson]

Number 2 workaround including a monochrome icon resolved the adaptive icon bug.

Thank you for the quick reply. I had reverted back to cordova-android 11, but with the workaround I was able to cleanly deploy with cordova-android 12. It was a little more work than I was planning. On the plus side, my app now supports themed icons (monochrome icons).

[breautek]

Number 2 workaround including a monochrome icon resolved the adaptive icon bug.

Thank you for the quick reply. I had reverted back to cordova-android 11, but with the workaround I was able to cleanly deploy with cordova-android 12. It was a little more work than I was planning. On the plus side, my app now supports themed icons (monochrome icons).

Glad it works for you, and as a side effect you're more compliant with the android app ecosystem.

But yah, the intended behaviour is to to require foreground and background if either is defined, but not require monochrome. However, monochrome does require an adaptive icon, so if monochrome is defined, it must also have background and foreground defined. Obviously that's not the actual case here, and that's not documented as a breaking change.

I don't know if I'll have time this weekend to look into it, but it is something I'm planning on tackling soon (perhaps the following weekend).

[EYALIN]

@breautek is there any news regarding the icon?

[tkem]

I'm also wondering, what would be the correct format for a "monochrome" PNG? Grayscale, indexed, or what?

[breautek]

I'm also wondering, what would be the correct format for a "monochrome" PNG? Grayscale, indexed, or what?

The monochrome should be the same as your foreground adaptive icon image, except it should only consist of two colours: an transparent background and pure black.

Android will colour in the black pixels according to the user's configured Android theme.

[pr0pz]

I also managed to get it working but had to search deep to find out how to put an extra monochrome icon since it's not documented yet. This is my config.xml with vector based adaptive icons:

<icon foreground="xxx/ic_launcher_foreground.xml" background="xxx/ic_launcher_background.xml" monochrome="xxx/ic_launcher_monochrome.xml" density="XXX" src="xxx/XXX.png" />

The XML's are SVG's converted for android (Vector Drawable format, convert it here: https://svg2vector.com/ or in Android Studio )