Cordova - Adaptive icons on Android
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:
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 theconfig.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.