Blog

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

Adding Android Oreo Adaptive Icon to a Cordova Project

Updated May 7, 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" />

 

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

<< Go back to the previous page