Cordova-android how to correctly declare an adaptive icon

[kalwinskidawid]

Hi,
I'm writing here because I can't find the discussion panel in the cordova-android branch.
I'm using version 12.0.1 and I have a problem with adaptive icons. I have read #1616, however I still can't generate a working icon.
In documentation it says that I should do:

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

  <icon monochrome="res/icon/android/ldpi-monochrome.png" background="@color/background" density="ldpi" foreground="res/icon/android/ldpi-foreground.png" />
  <icon monochrome="res/icon/android/mdpi-monochrome.png" background="@color/background" density="mdpi" foreground="res/icon/android/mdpi-foreground.png" />
  <icon monochrome="res/icon/android/hdpi-monochrome.png" background="@color/background" density="hdpi" foreground="res/icon/android/hdpi-foreground.png" />
  <icon monochrome="res/icon/android/xhdpi-monochrome.png" background="@color/background" density="xhdpi" foreground="res/icon/android/xhdpi-foreground.png" />
  <icon monochrome="res/icon/android/xxhdpi-monochrome.png" background="@color/background" density="xxhdpi" foreground="res/icon/android/xxhdpi-foreground.png" />
  <icon monochrome="res/icon/android/xxxhdpi-monochrome.png" background="@color/background" density="xxxhdpi" foreground="res/icon/android/xxxhdpi-foreground.png" />
</platform>

However when I generate icons in Android Studio I get:

Monochrome is defined at anydpi-v26, so how should I define the <icon> attributes? I tried importing the icons via the <resource-file> tag and modifying the AndroidManifest without the <icon> tag in config.xml, but then I got an error that ic_launcher.webp already exists (the default cordova icon). I also tried:

<icon monochrome="res/android/drawable/ic_launcher_foreground.xml" background="@color/ic_launcher_background" density="mdpi"     
            foreground="res/android/drawable/ic_launcher_foreground.xml" src="res/android/mipmap/mdpi/ic_launcher.webp"/>
[...]

But it does not work as it should. Android Studio does not generate ldpi. How to define it correctly?

[breautek]

If ldpi is the only one that doesn't work, it should be safe to omit that resource honestly. I do not think there is any device supported (that runs API 24) that is a low density resolution device.

I believe anydpi is used for vectors, since they can scale to any DPI.

If you have a source SVG vector, this is what I did.

1. Open/Create new android studio project (Can only access the Vector Asset Tool from within a project)
2. Via Resource Manager, Click on the + button
3. Select Image Asset, which will open a Asset Studio dialog where you can experiment with different settings and preview your icons.

4. Configure the settings to your preferences.
5. You'll likely need to rescale your SVG, even if your SVG follows the recommended DP sizes. If your SVG uses the recommended, then a scale of ~62% seems to work good (judging based on 3 different apps that I've done this with).

The monochrome icon should follow the same thing as your foreground, except it should be binary colour (e.g. only white #FFFFFF and black (#000000). The colour that gets filled in depends on user settings and whether they are in dark mode or not.

[kalwinskidawid]

After several hours of testing different ways and dozens of compilations I managed to define all the icons correctly (WOOOOOOHO!), if anyone would be interested I attach below how it should look like: .
So in config for android platform I did:

<edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application">
         <application android:icon="@mipmap/ic_launcher" android:roundIcon="@mipmap/ic_launcher_round"/>
</edit-config>
<!-- colors include <resources><color name ="ic_launcher_background">#FFFFFF</color></resources> -->
<resource-file src="res/android/colors.xml" target="/app/src/main/res/values/colors.xml" />
<!-- import drawable -->
<resource-file src="res/android/drawable/ic_launcher_foreground.xml" target="app/src/main/res/drawable/ic_launcher_foreground.xml" />
<!-- import anydpi -->
<resource-file src="res/android/mipmap/anydpi-v26/ic_launcher.xml" target="app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml" />
<!-- import rounded icons --> 
<resource-file src="res/android/mipmap/anydpi-v26/ic_launcher_round.xml" target="app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml" />
<resource-file src="res/android/mipmap/hdpi/ic_launcher_round.webp" target="app/src/main/res/mipmap-hdpi/ic_launcher_round.webp" />
<resource-file src="res/android/mipmap/mdpi/ic_launcher_round.webp" target="app/src/main/res/mipmap-mdpi/ic_launcher_round.webp" />
<resource-file src="res/android/mipmap/xhdpi/ic_launcher_round.webp" target="app/src/main/res/mipmap-xhdpi/ic_launcher_round.webp" />
<resource-file src="res/android/mipmap/xxhdpi/ic_launcher_round.webp" target="app/src/main/res/mipmap-xxhdpi/ic_launcher_round.webp" />
<resource-file src="res/android/mipmap/xxxhdpi/ic_launcher_round.webp" target="app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.webp" />
<!-- create icons -->
<icon monochrome="res/android/drawable/ic_launcher_foreground.xml" background="@color/ic_launcher_background" density="mdpi"     
            foreground="res/android/drawable/ic_launcher_foreground.xml" src="res/android/mipmap/mdpi/ic_launcher.webp"/>
<icon monochrome="res/android/drawable/ic_launcher_foreground.xml" background="@color/ic_launcher_background" density="hdpi"     
            foreground="res/android/drawable/ic_launcher_foreground.xml" src="res/android/mipmap/hdpi/ic_launcher.webp"/>
<icon monochrome="res/android/drawable/ic_launcher_foreground.xml" background="@color/ic_launcher_background" density="xhdpi"    
            foreground="res/android/drawable/ic_launcher_foreground.xml" src ="res/android/mipmap/xhdpi/ic_launcher.webp" />
<icon monochrome="res/android/drawable/ic_launcher_foreground.xml" background="@color/ic_launcher_background" density="xxhdpi"   
            foreground="res/android/drawable/ic_launcher_foreground.xml" src ="res/android/mipmap/xxhdpi/ic_launcher.webp" />
<icon monochrome="res/android/drawable/ic_launcher_foreground.xml" background="@color/ic_launcher_background" density="xxxhdpi"  
            foreground="res/android/drawable/ic_launcher_foreground.xml" src ="res/android/mipmap/xxxhdpi/ic_launcher.webp" />