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

rjdavid · June 17, 2018, 8:30pm

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?

polariswt · July 12, 2018, 6:01pm

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!

Create adaptive and legacy assets using Android’s Image Studio. Note: I chose to use the standard filename of ic_launcher
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
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!

rjdavid · July 12, 2018, 6:14pm

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

rjdavid · July 13, 2018, 3:12am

It worked. Thanks a lot.

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

polariswt · July 13, 2018, 3:21am

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)

victorfcm · May 25, 2020, 2:15pm

@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?

jasongrishkoff · June 24, 2021, 6:52pm

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>
`)