Cordova - Adaptive icons on Android

Question

I have a generated set of icons using Android Image Asset Studio. However, I do not know how I can set those icons to my app in Cordova.

When following the documentation regarding icons in Cordova, I only managed to set the square icons to my project using the following code:

<platform name="android">
    <!--
        ldpi    : 36x36 px
        mdpi    : 48x48 px
        hdpi    : 72x72 px
        xhdpi   : 96x96 px
        xxhdpi  : 144x144 px
        xxxhdpi : 192x192 px
    -->
    <icon src="res/android/ldpi.png" density="ldpi" />
    <icon src="res/android/mdpi.png" density="mdpi" />
    <icon src="res/android/hdpi.png" density="hdpi" />
    <icon src="res/android/xhdpi.png" density="xhdpi" />
    <icon src="res/android/xxhdpi.png" density="xxhdpi" />
    <icon src="res/android/xxxhdpi.png" density="xxxhdpi" />
</platform>

However, say in Android Oreo the icons of apps are round and it does not display my app's icon properly on that phone. The icon is shrank inside the circle and has white background around it.

Question: How can I set the rounded icons that Image Asset Studio generated to my Cordova project?

Answer 1

This SO post is the top hit when you Google for "Cordova Android adaptive icons". The methods suggested here, particularly @VicJordan's answer are a complete solution. However, it should be noted that version 8 of Cordova Android introduced its own way of supporting adaptive icons that do not require you to use Android Asset Studio.

Here is what you need to do

• Remove the old style <icon density="?dpi" src = "path/to/icon/resource"/> statements in the config.xml file for your Cordova app
• Provide a <icon density = "?dpi" background = "path/to/icon/background"/> directive
• Provide a matching <icon density = "?dpi" background="path/to/icon/foreground"/> directive

where ? = l|m|h|x|xx|xxx

You can also use color blackgrounds rather than images. For full details on all of this refer to the Cordova 8 documentation.

Answer 2

Below is a tested and working solution for my project that is in production.

Copy all the generated icons to res/android at the root of your project (Same level as resources or platforms folders) and add the below configuration to config.xml file:

<widget xmlns:android="http://schemas.android.com/apk/res/android">
    <platform name="android">
        <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>
        <resource-file src="res/android/drawable/ic_launcher_background.xml" target="app/src/main/res/drawable/ic_launcher_background.xml" />
        <resource-file src="res/android/mipmap-hdpi/ic_launcher.png" target="app/src/main/res/mipmap-hdpi/ic_launcher.png" />
        <resource-file src="res/android/mipmap-hdpi/ic_launcher_round.png" target="app/src/main/res/mipmap-hdpi/ic_launcher_round.png" />
        <resource-file src="res/android/mipmap-mdpi/ic_launcher.png" target="app/src/main/res/mipmap-mdpi/ic_launcher.png" />
        <resource-file src="res/android/mipmap-mdpi/ic_launcher_round.png" target="app/src/main/res/mipmap-mdpi/ic_launcher_round.png" />
        <resource-file src="res/android/mipmap-xhdpi/ic_launcher.png" target="app/src/main/res/mipmap-xhdpi/ic_launcher.png" />
        <resource-file src="res/android/mipmap-xhdpi/ic_launcher_round.png" target="app/src/main/res/mipmap-xhdpi/ic_launcher_round.png" />
        <resource-file src="res/android/mipmap-xxhdpi/ic_launcher.png" target="app/src/main/res/mipmap-xxhdpi/ic_launcher.png" />
        <resource-file src="res/android/mipmap-xxhdpi/ic_launcher_round.png" target="app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png" />
        <resource-file src="res/android/mipmap-xxxhdpi/ic_launcher.png" target="app/src/main/res/mipmap-xxxhdpi/ic_launcher.png" />
        <resource-file src="res/android/mipmap-xxxhdpi/ic_launcher_round.png" target="app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png" />
    </platform>    
</widget>

Don't forget to add xmlns:android="http://schemas.android.com/apk/res/android" to your <widget>.

Remove <icon> if you have one as <widget> => <platform => <icon>.

After adding above changes to your config.xml, remove your Android platform with ionic cordova platform remove android or sudo ionic cordova platform remove android (depending upon your environment settings) and then add Android platform again with ionic cordova platform add android or sudo ionic cordova platform add android.

Create build, install and check the results.

I used above configurations in my production code and here are the results: