Android Oreo - how do I set Adaptive Icons in Cordova?

Question

Just wondering if anyone been able to set adaptive icons on Cordova for Android Oreo? I\'m using the android 6.4.0 and my square icon shrinks to fit the circle. I just want

Answer 1

WARNING: Don't use this answer. This is now supported out of the box as of Cordova 9. See https://stackoverflow.com/a/55169307/2947592

Recent Android uses Adaptive Icons which has background and foreground images along with some xml files. This is what I did to set-up Adaptive Icons in my ionic application:

1. In config.xml, I set android-minSdkVersion to version 26.

2. In config.xml, delete the icon density tags and remove these lines:

3. Next, I had to create the Android Adaptive Icons. For this I used Image Assets that comes as part of Android Studio. At first, I created 2 the background image and the transparent icon only image to use as foreground in png format from photoshop. After that, I did these steps to generate the icons:

• Open Android Studio and create a new project or open the existing project.

• Click on app -> res in the left sidebar. Right clicked on res -> New -> Image Assets

• Selected Foreground Layer -> Asset Type "Image" & selected Path with the icon only logo image and transparent background. Then selected Trim to Yes and Resize if needed.

• Selected Background Layer -> Asset Type "Image" & selected path. (Alternative, you can even set "Color")

• Click Next and clicked "Finish".

• Now, I right clicked on res folder and selected "Reveal in Finder".

• I copied all the folders inside the res folder and placed it inside: my-app/resources/android/adaptiveicon/

4. Next, I just need to add the below codes to the config.xml. Make sure each of every file in the adaptiveicon folder is linked here correctly, else it will throw "not found" errors during build.

Thats it. Now the App will have adaptive icons.