Adding Android Oreo Adaptive Icon to a Cordova Project

Use a cool Adaptive Icon to launch your Cordova Android app.

Updated June 14, 2019

Android 8.0 introduced Adaptive Icons, which dynamically change shape to match the rest of the icons on the device. Apache Cordova, a framework for making cross-platform mobile apps with web technologies, doesn’t natively support Adaptive Icons out of the box.

However, we can easily add an Adaptive Icon to a Cordova project using Android Studio.

From Android Studio, open the folder yourapp/platforms/android as a project. In the Project view, open app, right-click res, and click “New > Image Asset”. Design your app launcher icon using the “Configure Image Asset” wizard.

Now, open yourapp/platforms/android/app/src/main/res in a file manager. Copy all folders except xml into yourapp/res/android.

Open your Cordova config.xml and add the following below <platform name="android">

For an image icon:

<icon background="res/android/mipmap-mdpi/ic_launcher_background.png" density="mdpi" foreground="res/android/mipmap-mdpi/ic_launcher_foreground.png" src="res/android/mipmap-mdpi/ic_launcher.png" />
<icon background="res/android/mipmap-hdpi/ic_launcher_background.png" density="hdpi" foreground="res/android/mipmap-hdpi/ic_launcher_foreground.png" src="res/android/mipmap-hdpi/ic_launcher.png" />
<icon background="res/android/mipmap-xhdpi/ic_launcher_background.png" density="xhdpi" foreground="res/android/mipmap-xhdpi/ic_launcher_foreground.png" src="res/android/mipmap-xhdpi/ic_launcher.png" />
<icon background="res/android/mipmap-xxhdpi/ic_launcher_background.png" density="xxhdpi" foreground="res/android/mipmap-xxhdpi/ic_launcher_foreground.png" src="res/android/mipmap-xxhdpi/ic_launcher.png" />
<icon background="res/android/mipmap-xxxhdpi/ic_launcher_background.png" density="xxxhdpi" foreground="res/android/mipmap-xxxhdpi/ic_launcher_foreground.png" src="res/android/mipmap-xxxhdpi/ic_launcher.png" />

For a vector icon:

<icon background="res/android/drawable/ic_launcher_background.xml" density="ldpi" foreground="res/android/drawable/ic_launcher_foreground.xml" src="res/android/mipmap-ldpi/ic_launcher.png" />
<icon background="res/android/drawable/ic_launcher_background.xml" density="mdpi" foreground="res/android/drawable/ic_launcher_foreground.xml" src="res/android/mipmap-mdpi/ic_launcher.png" />
<icon background="res/android/drawable/ic_launcher_background.xml" density="hdpi" foreground="res/android/drawable/ic_launcher_foreground.xml" src="res/android/mipmap-hdpi/ic_launcher.png" />
<icon background="res/android/drawable/ic_launcher_background.xml" density="xhdpi" foreground="res/android/drawable/ic_launcher_foreground.xml" src="res/android/mipmap-xhdpi/ic_launcher.png" />
<icon background="res/android/drawable/ic_launcher_background.xml" density="xxhdpi" foreground="res/android/drawable/ic_launcher_foreground.xml" src="res/android/mipmap-xxhdpi/ic_launcher.png" />
<icon background="res/android/drawable/ic_launcher_background.xml" density="xxxhdpi" foreground="res/android/drawable/ic_launcher_foreground.xml" src="res/android/mipmap-xxxhdpi/ic_launcher.png" />

For a vector icon with solid color background:

<resource-file src="/res/android/values/ic_launcher_background.xml" target="/app/src/main/res/values/ic_launcher_background.xml" /> <icon background="@color/ic_launcher_background" density="ldpi" foreground="res/android/drawable/ic_launcher_foreground.xml" src="res/android/mipmap-ldpi/ic_launcher.png" />
<icon background="@color/ic_launcher_background" density="mdpi" foreground="res/android/drawable/ic_launcher_foreground.xml" src="res/android/mipmap-mdpi/ic_launcher.png" />
<icon background="@color/ic_launcher_background" density="hdpi" foreground="res/android/drawable/ic_launcher_foreground.xml" src="res/android/mipmap-hdpi/ic_launcher.png" />
<icon background="@color/ic_launcher_background" density="xhdpi" foreground="res/android/drawable/ic_launcher_foreground.xml" src="res/android/mipmap-xhdpi/ic_launcher.png" />
<icon background="@color/ic_launcher_background" density="xxhdpi" foreground="res/android/drawable/ic_launcher_foreground.xml" src="res/android/mipmap-xxhdpi/ic_launcher.png" />
<icon background="@color/ic_launcher_background" density="xxxhdpi" foreground="res/android/drawable/ic_launcher_foreground.xml" src="res/android/mipmap-xxxhdpi/ic_launcher.png" />

You might need to add an extra line to config.xml and create a short XML file at res/android/mipmap-anydpi-v26/ic_launcher.xml if the icon doesn’t work right, substituting “@mipmap” with “@color” for solid colors or “@drawable” for vectors. If you get an error such as “failed linking file resources”, “AAPT: error: resource … not found”, or “Failed to execute aapt” when building, update Cordova to 9.0 or higher, remove the Android platform, and re-add it.

<resource-file src="res/android/mipmap-anydpi-v26/ic_launcher.xml" target="app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml" />

 

<?xml version="1.0" encoding="utf-8"?>
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android"> <background android:drawable="@mipmap/ic_launcher_background"/> <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
</adaptive-icon>

Your Cordova application should now use an Adaptive Icon on newer devices, and fallback to a regular image icon for older devices.