Update docs in regards to using adaptive icons with background colors

[igorsantos07]

Bug Report

As pointed more than a year ago, docs are telling us to create an inconsistent project state when trying to add a background color to adaptive icons.

At the time, Erisu agreed it was a problem and would update docs, but it haven't happened so far.

Problem

This is actually quite bad, since you cannot understand what's going on from console output, not even with --verbose. Since that's all "hidden magic" from Cordova, it should be clearer when something internal can't be found because the related file was probably overridden by you or a plugin.

I'm not sure if cordova prepare solves it once you rename the file, but I solved it by readding the platform. This is not a good experience.

What is expected to happen?

We should be able to follow docs and it should work.

What does actually happen?

This page tells us to override a file that Cordova creates internally, and then it breaks the build horribly in a very early step.

Information

Command or Code

<resource-file src="res/values/colors.xml" target="app/src/main/res/values/colors.xml" />

Version information

cordova-android 12.0.1 cordova cli 12.0.0 (cordova-lib 12.0.1)

Checklist

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

[globules-io]

We have the same problem. This does not work at all. Here's my SO thread about it with more info https://stackoverflow.com/questions/78494090/cordova-icon-background-color-no-build I'd also like to add to this is why people are moving away from Cordova. Basic functionalities are broken and fixes take more than a year...

[globules-io]

Here's my work around : Since I use the same color as the splashscreen, I bypassed the step to add the resource file and piggy back onto the splash screen color.

<icon density="ldpi" background="@color/cdv_splashscreen_background" foreground="res/icons/android/icon-36.png" />
<icon density="mdpi" background="@color/cdv_splashscreen_background" foreground="res/icons/android/icon-48.png" />
<icon density="hdpi" background="@color/cdv_splashscreen_background" foreground="res/icons/android/icon-72.png" />
<icon density="xhdpi" background="@color/cdv_splashscreen_background" foreground="res/icons/android/icon-96.png" />
<icon density="xxhdpi" background="@color/cdv_splashscreen_background" foreground="res/icons/android/icon-144.png" />
<icon density="xxxhdpi" background="@color/cdv_splashscreen_background" foreground="res/icons/android/icon-192.png" />

[globules-io]

A proper approach would be to add a variable like

 <preference name="AndroidIconBackgroundColor" value="#742A84" />

Which would create the variable in colors.xml such as

 <?xml version='1.0' encoding='utf-8'?>
 <resources xmlns:tools="http://schemas.android.com/tools">
     <color name="cdv_splashscreen_background">#742A84</color>
     <color name="cdv_icon_background">#742a84</color>
 </resources>

Then we should use (meaning it would auto add background="@color/cdv_icon_background")

  <icon density="ldpi" background="@color/cdv_icon_background" foreground="res/icons/android/icon-36.png" />