[Resolved] How to add items in Cordova's config.xml to support Android Adaptive Icons

The App.icons() function in mobile-config.js does not support adaptive icons. In order to support adaptive icons, the following changes must be done to Cordova’s config.xml

<platform name="android">
        <edit-config file="AndroidManifest.xml" mode="merge" target="/manifest/application">
            <application android:icon="@mipmap/ic_launcher" android:roundIcon="@mipmap/ic_launcher_round" />
        </edit-config>
        <resource-file src="resources/android/drawable/ic_launcher_background.xml" target="res/drawable/ic_launcher_background.xml" />
        <resource-file src="resources/android/drawable/ic_launcher_foreground.xml" target="res/drawable/ic_launcher_foreground.xml" />
        <resource-file src="resources/android/mipmap-anydpi-v26/ic_launcher.xml" target="res/mipmap-anydpi-v26/ic_launcher.xml" />
        <resource-file src="resources/android/mipmap-anydpi-v26/ic_launcher_round.xml" target="res/mipmap-anydpi-v26/ic_launcher_round.xml" />
        <resource-file src="resources/android/mipmap-hdpi/ic_launcher.png" target="res/mipmap-hdpi/ic_launcher.png" />
        <resource-file src="resources/android/mipmap-hdpi/ic_launcher_round.png" target="res/mipmap-hdpi/ic_launcher_round.png" />
        <resource-file src="rresourcess/android/mipmap-mdpi/ic_launcher.png" target="res/mipmap-mdpi/ic_launcher.png" />
        <resource-file src="resources/android/mipmap-mdpi/ic_launcher_round.png" target="res/mipmap-mdpi/ic_launcher_round.png" />
        <resource-file src="resources/android/mipmap-xhdpi/ic_launcher.png" target=res/mipmap-xhdpi/ic_launcher.png" />
        <resource-file src="resources/android/mipmap-xhdpi/ic_launcher_round.png" target="res/mipmap-xhdpi/ic_launcher_round.png" />
        <resource-file src="resources/android/mipmap-xxhdpi/ic_launcher.png" target="res/mipmap-xxhdpi/ic_launcher.png" />
        <resource-file src="resources/android/mipmap-xxhdpi/ic_launcher_round.png" target="res/mipmap-xxhdpi/ic_launcher_round.png" />
        <resource-file src="resources/android/mipmap-xxxhdpi/ic_launcher.png" target="res/mipmap-xxxhdpi/ic_launcher.png" />
        <resource-file src="resources/android/mipmap-xxxhdpi/ic_launcher_round.png" target="res/mipmap-xxxhdpi/ic_launcher_round.png" />
    </platform>

Then the <widget> tag in config.xml must be updated to include the attribute xmlns:android="http://schemas.android.com/apk/res/android"

There is also a need for the files to be moved to the cordova-build/resources folder.

The moving of the files can be done manually but the changes in config.xml are not sticking because config.xml is being recreated on build

Any ideas?

I think I may have a working solution (so far tested on Pixel 8.1.0 device, and Samsung running Android 6.0 for backwards compatibility).

Minimal edits to mobile-config.js and adding assets to cordova-build-override folder is all it takes!

  1. Create adaptive and legacy assets using Android’s Image Studio. Note: I chose to use the standard filename of ic_launcher
  2. Transfer these files created from step 1 into: cordova-build-override/platforms/android/res/ in your meteor project root
    • mipmap-anydpi-v26/ic_launcher_round.xml
    • mipmap-anydpi-v26/ic_launcher.xml
    • mipmap-hdpi/ic_launcher_foreground.png
    • mipmap-hdpi/ic_launcher_round.png
    • mipmap-hdpi/ic_launcher.png
    • mipmap-mdpi/ic_launcher_foreground.png
    • mipmap-mdpi/ic_launcher_round.png
    • mipmap-mdpi/ic_launcher.png
    • mipmap-xhdpi/ic_launcher_foreground.png
    • mipmap-xhdpi/ic_launcher_round.png
    • mipmap-xhdpi/ic_launcher.png
    • mipmap-xxhdpi/ic_launcher_foreground.png
    • mipmap-xxhdpi/ic_launcher_round.png
    • mipmap-xxhdpi/ic_launcher.png
    • mipmap-xxxhdpi/ic_launcher_foreground.png
    • mipmap-xxxhdpi/ic_launcher_round.png
    • mipmap-xxxhdpi/ic_launcher.png
    • values/ic_launcher_background.xml
  3. Edit mobile-config.js as such: Remove android icons, and add appendToConfig
// mobile-config.js

App.icons({
  /* REMOVE ANDROID ICONS */
  // android_mdpi: '../icons/android_mdpi.png',
  // android_hdpi: '../cons/android_hdpi.png',
  // android_xhdpi: '../icons/android_xhdpi.png',
  // android_xxhdpi: '../icons/android_xxhdpi.png',
  // android_xxxhdpi: '../icons/android_xxxhdpi.png',
  ...
});

App.appendToConfig(`
<platform name="android">
...
  <edit-config file="AndroidManifest.xml"
        mode="merge"
        target="/manifest/application">
       <application
           android:icon="@mipmap/ic_launcher" 
           android:roundIcon="@mipmap/ic_launcher_round"
           xmlns:android="http://schemas.android.com/apk/res/android"/>
  </edit-config>
...
</platform>`);

Where ic_launcher and ic_launcher_round reference the .png of the name of launcher icon, and be sure to include the xmlns to use the android namespace, otherwise you’ll get an error on build.

And that’s it!

Just for complete reference, I don’t think it is a factor, but I will include them here anyway. I am using

  • cordova-custom-config@5.0.2 (which has breaking changes from previous versions)
  • Also, I delete cordova-build on every run (rm -rf ./.meteor/local/cordova-build). This was done from the early days where artifacts left over created issues. It may not be necessary anymore?.. But, this setup re-builds all the files I need, including the adaptive icons!
2 Likes

Thanks. I was also able to make it work but it was a hack. The thing I was missing was the cordova override folder.

Nice one

It worked. Thanks a lot.

I just have to create the folders cordova-build-override/platforms/android/res and place the assets there

Yes - I forgot to state the full path. Glad you got it to work!

(I’ve updated my response above to include the full path)

@rjdavid, im following your thread, your breadcrumbs… now i’m getting this error:

AAPT: error: resource mipmap/ic_launcher

how did you got adaptative icons on Meteor?

Same error @victorfcm – did you figure it out?

Edit: Cordova has added support for adaptive icons. Added the following to my mobile-config.js file and it worked like a charm:

App.appendToConfig(`
    <platform name="android">
        <icon background="../../../private/assets/icon/android/ldpi.png" density="ldpi" foreground="../../../private/assets/icon/android/ldpi.png" />
        <icon background="../../../private/assets/icon/android/mdpi.png" density="mdpi" foreground="../../../private/assets/icon/android/mdpi.png" />
        <icon background="../../../private/assets/icon/android/hdpi.png" density="hdpi" foreground="../../../private/assets/icon/android/hdpi.png" />
        <icon background="../../../private/assets/icon/android/xhdpi.png" density="xhdpi" foreground="../../../private/assets/icon/android/xhdpi.png" />
        <icon background="../../../private/assets/icon/android/xxhdpi.png" density="xxhdpi" foreground="../../../private/assets/icon/android/xxhdpi.png" />
        <icon background="../../../private/assets/icon/android/xxxhdpi.png" density="xxxhdpi" foreground="../../../private/assets/icon/android/xxxhdpi.png" />
    </platform>
`)