Blog

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

Adding Android Oreo Adaptive Icon to a Cordova Project

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">:

<preference name="android-targetSdkVersion" value="27" />
<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/values/ic_launcher_background.xml" target="app/src/main/res/values/ic_launcher_background.xml" />
<resource-file src="res/android/drawable/ic_launcher_foreground.xml" target="app/src/main/res/drawable/ic_launcher_foreground.xml" />
<resource-file src="res/android/mipmap-anydpi-v26/ic_launcher.xml" target="app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml" />
<resource-file src="res/android/mipmap-anydpi-v26/ic_launcher_round.xml" target="app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.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" />

 

Finally, add xmlns:android="http://schemas.android.com/apk/res/android" in the <widget ...> tag at the top of config.xml.

 

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