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

Exception or error:

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 it to not shrink. I don’t care if the corners are clipped off from the rounding.

How to solve:

I created the icons as described in https://developer.android.com/studio/write/image-asset-studio.html#create-adaptive, copied them to res/android and use the following configuration:

config.xml:

<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/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" />
    </platform>    
</widget>

###

So while the above answers helped me get to an answer, they are either dated or incomplete. So, to help anyone moving forward, this is a complete answer with all the ins and outs I could think of.

Step 1: Create the icons

You’ll want to do this using the Image Asset Studio (https://developer.android.com/studio/write/image-asset-studio). There a number of guides on doing this.

Step 2: Move the icons to your ionic/cordova project

Copy the entire res folder into your project. The below example is for ionic v1.

cp -a AndroidStudioProjects/MyApplication4/app/src/main/res MyIonicProject/myapp/resources/android/adaptiveicon

Step 3: Edit config.xml

First, to use the icons (this is missing from other answers), you need to alter the top widget line. You’ll want to add xmlns:android="schemas.android.com/apk/res/android" to it, so it looks like the below. This allows the system to change the AndroidMenifest.xml file.

<widget id="io.ionic.starter" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:android="schemas.android.com/apk/res/android" xmlns:cdv="http://cordova.apache.org/ns/1.0">

Next, you’ll need to adjust the platform section of your config.xml.

First remove any instances of <icon density= ... /> from the <platform name="android"> section.

Then, Add in the alteration to the Android Manifest file:

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

And lastly, for every file in the new resources/android/adaptiveicon folder, you will need to add a line like this:

<resource-file src="resources/android/adaptiveicon/<folder>/<file>" target="app/src/main/res/<folder>/<file>" />

Make sure every file is represented! Your final platform section will probably look like this (this example is for when a PNG is used for both foreground and background):

<platform name="android">
    <allow-intent href="market:*" />
    <splash density="land-ldpi" src="resources/android/splash/drawable-land-ldpi-screen.png" />
    <splash density="land-mdpi" src="resources/android/splash/drawable-land-mdpi-screen.png" />
    <splash density="land-hdpi" src="resources/android/splash/drawable-land-hdpi-screen.png" />
    <splash density="land-xhdpi" src="resources/android/splash/drawable-land-xhdpi-screen.png" />
    <splash density="land-xxhdpi" src="resources/android/splash/drawable-land-xxhdpi-screen.png" />
    <splash density="land-xxxhdpi" src="resources/android/splash/drawable-land-xxxhdpi-screen.png" />
    <splash density="port-ldpi" src="resources/android/splash/drawable-port-ldpi-screen.png" />
    <splash density="port-mdpi" src="resources/android/splash/drawable-port-mdpi-screen.png" />
    <splash density="port-hdpi" src="resources/android/splash/drawable-port-hdpi-screen.png" />
    <splash density="port-xhdpi" src="resources/android/splash/drawable-port-xhdpi-screen.png" />
    <splash density="port-xxhdpi" src="resources/android/splash/drawable-port-xxhdpi-screen.png" />
    <splash density="port-xxxhdpi" src="resources/android/splash/drawable-port-xxxhdpi-screen.png" />
    <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="resources/android/adaptiveicon/drawable/ic_launcher_background.xml" target="app/src/main/res/drawable/ic_launcher_background.xml" />
    <resource-file src="resources/android/adaptiveicon/drawable-v24/ic_launcher_foreground.xml" target="app/src/main/res/drawable-v24/ic_launcher_foreground.xml" />
    <resource-file src="resources/android/adaptiveicon/mipmap-anydpi-v26/ic_launcher.xml" target="app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml" />
    <resource-file src="resources/android/adaptiveicon/mipmap-anydpi-v26/ic_launcher_round.xml" target="app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml" />
    <resource-file src="resources/android/adaptiveicon/mipmap-hdpi/ic_launcher.png" target="app/src/main/res/mipmap-hdpi/ic_launcher.png" />
    <resource-file src="resources/android/adaptiveicon/mipmap-hdpi/ic_launcher_foreground.png" target="app/src/main/res/mipmap-hdpi/ic_launcher_foreground.png" />
    <resource-file src="resources/android/adaptiveicon/mipmap-hdpi/ic_launcher_background.png" target="app/src/main/res/mipmap-hdpi/ic_launcher_background.png" />
    <resource-file src="resources/android/adaptiveicon/mipmap-hdpi/ic_launcher_round.png" target="app/src/main/res/mipmap-hdpi/ic_launcher_round.png" />
    <resource-file src="resources/android/adaptiveicon/mipmap-mdpi/ic_launcher.png" target="app/src/main/res/mipmap-mdpi/ic_launcher.png" />
    <resource-file src="resources/android/adaptiveicon/mipmap-mdpi/ic_launcher_foreground.png" target="app/src/main/res/mipmap-mdpi/ic_launcher_foreground.png" />
    <resource-file src="resources/android/adaptiveicon/mipmap-mdpi/ic_launcher_background.png" target="app/src/main/res/mipmap-mdpi/ic_launcher_background.png" />
    <resource-file src="resources/android/adaptiveicon/mipmap-mdpi/ic_launcher_round.png" target="app/src/main/res/mipmap-mdpi/ic_launcher_round.png" />
    <resource-file src="resources/android/adaptiveicon/mipmap-xhdpi/ic_launcher.png" target="app/src/main/res/mipmap-xhdpi/ic_launcher.png" />
    <resource-file src="resources/android/adaptiveicon/mipmap-xhdpi/ic_launcher_foreground.png" target="app/src/main/res/mipmap-xhdpi/ic_launcher_foreground.png" />
    <resource-file src="resources/android/adaptiveicon/mipmap-xhdpi/ic_launcher_background.png" target="app/src/main/res/mipmap-xhdpi/ic_launcher_background.png" />
    <resource-file src="resources/android/adaptiveicon/mipmap-xhdpi/ic_launcher_round.png" target="app/src/main/res/mipmap-xhdpi/ic_launcher_round.png" />
    <resource-file src="resources/android/adaptiveicon/mipmap-xxhdpi/ic_launcher.png" target="app/src/main/res/mipmap-xxhdpi/ic_launcher.png" />
    <resource-file src="resources/android/adaptiveicon/mipmap-xxhdpi/ic_launcher_foreground.png" target="app/src/main/res/mipmap-xxhdpi/ic_launcher_foreground.png" />
    <resource-file src="resources/android/adaptiveicon/mipmap-xxhdpi/ic_launcher_background.png" target="app/src/main/res/mipmap-xxhdpi/ic_launcher_background.png" />
    <resource-file src="resources/android/adaptiveicon/mipmap-xxhdpi/ic_launcher_round.png" target="app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png" />
    <resource-file src="resources/android/adaptiveicon/mipmap-xxxhdpi/ic_launcher.png" target="app/src/main/res/mipmap-xxxhdpi/ic_launcher.png" />
    <resource-file src="resources/android/adaptiveicon/mipmap-xxxhdpi/ic_launcher_foreground.png" target="app/src/main/res/mipmap-xxxhdpi/ic_launcher_foreground.png" />
    <resource-file src="resources/android/adaptiveicon/mipmap-xxxhdpi/ic_launcher_background.png" target="app/src/main/res/mipmap-xxxhdpi/ic_launcher_background.png" />
    <resource-file src="resources/android/adaptiveicon/mipmap-xxxhdpi/ic_launcher_round.png" target="app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png" />
</platform>

Step 4: Play it safe, clean the Android platform

Run the following commands to clean the platform.

cd myapp
rm -rf platforms/android
ionic cordova prepare

For good measure, fix the bugs with the Android emulator start-up in ionic:

wget https://raw.githubusercontent.com/gegenokitaro/cordova-android/8d497784ac4a40a9689e616cd486c4ed07d3e063/bin/templates/cordova/lib/emulator.js -O platforms/android/cordova/lib/emulator.js

Step 5: Build!

Build:

ionic cordova build android

Or Emulate:

ionic cordova emulate android --consolelogs --serverlogs --target "Android8"

###

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.
<preference name="android-minSdkVersion" value="26" />
<preference name="android-targetSdkVersion" value="28" />
  1. In config.xml, delete the icon density tags and remove these lines:
        <icon density="ldpi" src="resources/android/icon/drawable-ldpi-icon.png" />
        <icon density="mdpi" src="resources/android/icon/drawable-mdpi-icon.png" />
        <icon density="hdpi" src="resources/android/icon/drawable-hdpi-icon.png" />
        <icon density="xhdpi" src="resources/android/icon/drawable-xhdpi-icon.png" />
        <icon density="xxhdpi" src="resources/android/icon/drawable-xxhdpi-icon.png" />
        <icon density="xxxhdpi" src="resources/android/icon/drawable-xxxhdpi-icon.png" />
  1. 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

enter image description here

  • 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.

enter image description here

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

enter image description here

  • Click Next and clicked “Finish”.

enter image description here

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

enter image description here

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

enter image description here

  1. 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.
        <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="resources/android/adaptiveicon/mipmap-anydpi-v26/ic_launcher.xml" target="app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml" />
        <resource-file src="resources/android/adaptiveicon/mipmap-anydpi-v26/ic_launcher_round.xml" target="app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml" />
        <resource-file src="resources/android/adaptiveicon/mipmap-hdpi/ic_launcher.png" target="app/src/main/res/mipmap-hdpi/ic_launcher.png" />
        <resource-file src="resources/android/adaptiveicon/mipmap-hdpi/ic_launcher_round.png" target="app/src/main/res/mipmap-hdpi/ic_launcher_round.png" />
        <resource-file src="resources/android/adaptiveicon/mipmap-hdpi/ic_launcher_background.png" target="app/src/main/res/mipmap-hdpi/ic_launcher_background.png" />
        <resource-file src="resources/android/adaptiveicon/mipmap-hdpi/ic_launcher_foreground.png" target="app/src/main/res/mipmap-hdpi/ic_launcher_foreground.png" />
        <resource-file src="resources/android/adaptiveicon/mipmap-mdpi/ic_launcher.png" target="app/src/main/res/mipmap-mdpi/ic_launcher.png" />
        <resource-file src="resources/android/adaptiveicon/mipmap-mdpi/ic_launcher_round.png" target="app/src/main/res/mipmap-mdpi/ic_launcher_round.png" />
        <resource-file src="resources/android/adaptiveicon/mipmap-mdpi/ic_launcher_background.png" target="app/src/main/res/mipmap-mdpi/ic_launcher_background.png" />
        <resource-file src="resources/android/adaptiveicon/mipmap-mdpi/ic_launcher_foreground.png" target="app/src/main/res/mipmap-mdpi/ic_launcher_foreground.png" />
        <resource-file src="resources/android/adaptiveicon/mipmap-xhdpi/ic_launcher.png" target="app/src/main/res/mipmap-xhdpi/ic_launcher.png" />
        <resource-file src="resources/android/adaptiveicon/mipmap-xhdpi/ic_launcher_round.png" target="app/src/main/res/mipmap-xhdpi/ic_launcher_round.png" />
        <resource-file src="resources/android/adaptiveicon/mipmap-xhdpi/ic_launcher_background.png" target="app/src/main/res/mipmap-xhdpi/ic_launcher_background.png" />
        <resource-file src="resources/android/adaptiveicon/mipmap-xhdpi/ic_launcher_foreground.png" target="app/src/main/res/mipmap-xhdpi/ic_launcher_foreground.png" />
        <resource-file src="resources/android/adaptiveicon/mipmap-xxhdpi/ic_launcher.png" target="app/src/main/res/mipmap-xxhdpi/ic_launcher.png" />
        <resource-file src="resources/android/adaptiveicon/mipmap-xxhdpi/ic_launcher_round.png" target="app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png" />
        <resource-file src="resources/android/adaptiveicon/mipmap-xxhdpi/ic_launcher_background.png" target="app/src/main/res/mipmap-xxhdpi/ic_launcher_background.png" />
        <resource-file src="resources/android/adaptiveicon/mipmap-xxhdpi/ic_launcher_foreground.png" target="app/src/main/res/mipmap-xxhdpi/ic_launcher_foreground.png" />
        <resource-file src="resources/android/adaptiveicon/mipmap-xxxhdpi/ic_launcher.png" target="app/src/main/res/mipmap-xxxhdpi/ic_launcher.png" />
        <resource-file src="resources/android/adaptiveicon/mipmap-xxxhdpi/ic_launcher_round.png" target="app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png" />
        <resource-file src="resources/android/adaptiveicon/mipmap-xxxhdpi/ic_launcher_background.png" target="app/src/main/res/mipmap-xxxhdpi/ic_launcher_background.png" />
        <resource-file src="resources/android/adaptiveicon/mipmap-xxxhdpi/ic_launcher_foreground.png" target="app/src/main/res/mipmap-xxxhdpi/ic_launcher_foreground.png" />

Thats it. Now the App will have adaptive icons.

###

This is now supported by Cordova Android 8.0.0. See the announcement and the documentation.

For example, define the icons as follows in your config.xml:

<platform name="android">
        <resource-file src="res/icons/android/colors.xml" target="/app/src/main/res/values/colors.xml" />
        <icon density="ldpi" background="@color/background" foreground="res/icons/android/ldpi-foreground.png" />
        <icon density="mdpi" background="@color/background" foreground="res/icons/android/mdpi-foreground.png" />
        <icon density="hdpi" background="@color/background" foreground="res/icons/android/hdpi-foreground.png" />
        <icon density="xhdpi" background="@color/background" foreground="res/icons/android/xhdpi-foreground.png" />
        <icon density="xxhdpi" background="@color/background" foreground="res/icons/android/xxhdpi-foreground.png" />
        <icon density="xxxhdpi" background="@color/background" foreground="res/icons/android/xxxhdpi-foreground.png" />
    </platform>

With the colors.xml looking like this:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="background">#FFFFFF</color>
</resources>

###

As far as I know, Cordova doesn’t set Adaptive Icons yet. But it’s easy enough to do manually after you’ve run Cordova build.

Change android:icon in AndroidManifest.xml to:

<application android:hardwareAccelerated="true" android:icon="@drawable/ic_launcher" android:label="@string/app_name" android:supportsRtl="true">  

Create ic_launcher.xml in res/drawable with:

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

Then add your two vector files ic_launcher_background.xml and ic_launcher_foreground.xml in res/drawable. These can be created with this tool: http://inloop.github.io/svg2android/

And away you go! I hope Cordova bakes this into their builds soon.

###

So here’s an update for Ionic v4 and Cordova Android: 6.4.0. Notable changes to 0x6368656174‘s answer were:

  • Removing app/src/main from the resource targets.
  • My background.xml was in a values folder (i did not have a foreground as i used a png)
  • The edit-config Manifest file location is in the same directory file="AndroidManifest.xml"

I struggled for a few days but this is what works for me:

config.xml

<widget ... xmlns:android="http://schemas.android.com/apk/res/android">
    <platform name="android">
    <resource-file src="resources/android/values/ic_launcher_background.xml" target="res/values/ic_launcher_background.xml" />
    <resource-file src="resources/android/mipmap-anydpi-v26/ic_launcher.xml" target="res/mipmap-anydpi-v26/ic_launcher.xml" />
    <resource-file src="resources/android/mipmap-anydpi-v26/ic_launcher_round.xml" target="res/mipmap-anydpi-v26/ic_launcher_round.xml" />
    <resource-file src="resources/android/mipmap-hdpi/ic_launcher.png" target="res/mipmap-hdpi/ic_launcher.png" />
    <resource-file src="resources/android/mipmap-hdpi/ic_launcher_round.png" target="res/mipmap-hdpi/ic_launcher_round.png" />
    <resource-file src="resources/android/mipmap-mdpi/ic_launcher.png" target="res/mipmap-mdpi/ic_launcher.png" />
    <resource-file src="resources/android/mipmap-mdpi/ic_launcher_round.png" target="res/mipmap-mdpi/ic_launcher_round.png" />
    <resource-file src="resources/android/mipmap-xhdpi/ic_launcher.png" target="res/mipmap-xhdpi/ic_launcher.png" />
    <resource-file src="resources/android/mipmap-xhdpi/ic_launcher_round.png" target="res/mipmap-xhdpi/ic_launcher_round.png" />
    <resource-file src="resources/android/mipmap-xxhdpi/ic_launcher.png" target="res/mipmap-xxhdpi/ic_launcher.png" />
    <resource-file src="resources/android/mipmap-xxhdpi/ic_launcher_round.png" target="res/mipmap-xxhdpi/ic_launcher_round.png" />
    <resource-file src="resources/android/mipmap-xxxhdpi/ic_launcher.png" target="res/mipmap-xxxhdpi/ic_launcher.png" />
    <resource-file src="resources/android/mipmap-xxxhdpi/ic_launcher_round.png" target="res/mipmap-xxxhdpi/ic_launcher_round.png" />
    <edit-config file="AndroidManifest.xml" mode="merge" target="/manifest/application">
         <application android:icon="@mipmap/ic_launcher" android:roundIcon="@mipmap/ic_launcher_round" />
    </edit-config>
    </platform>    
</widget>

PHEW

###

I may be late to the party, but I struggled to get this working because (a) using PhoneGap Build, and (b) doing things by hand, not using Android Studio. So, for those playing along at home, here’s all I had to do to get adaptive icons working:

  1. Inside <platform name="android"> in my config.xml, I set:
        <resource-file src="www/pwa/android/icon-bg.png"               target="app/src/main/res/mipmap/ic_bg.png" />
        <resource-file src="www/pwa/android/icon-fg.png"               target="app/src/main/res/mipmap/ic_fg.png" />
        <resource-file src="www/pwa/ic/mipmap-xxxhdpi/ic_launcher.png" target="app/src/main/res/mipmap/ic_launcher.png" />
        <resource-file src="www/pwa/ic/mipmap-xxxhdpi/ic_launcher.png" target="app/src/main/res/mipmap/ic_launcher_round.png" />
        <resource-file src="www/pwa/android/ic_launcher.xml"           target="app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml" />
        <resource-file src="www/pwa/android/ic_launcher_round.xml"     target="app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml" />

        <!-- Per https://forums.adobe.com/thread/2576077 -->
        <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>
  1. The PNG files in the config above are self-explanatory. The XML file referenced as ic_launcher.xml and ic_launcher_round.xml are identical, I just created this file at the source location and copied it in via the resource tags above. This is the contents of both of those XML files, reference as the src public/pwa/android/ic_launcher.xml and ic_launcher_round.xml:
<?xml version="1.0" encoding="utf-8"?>
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
    <background android:drawable="@mipmap/ic_bg"/>
    <foreground android:drawable="@mipmap/ic_fg"/>
</adaptive-icon>

Note I’m targeting phonegap ver 8.1.1 (<preference name="phonegap-version" value="cli-8.1.1" />) The post at https://forums.adobe.com/thread/2576077 was helpful in illuminating the fact that you have to use different target paths on your <resource-file tags, depending on the cli version you are using.

Hope this helps, hit me with questions if I missed anything. Cheers!

###

Android
icon-android-foreground.png
432*432 px
72dpi

ios
png without transparent
72dpi

Android Reference
https://developer.android.com/guide/practices/ui_guidelines/icon_design_adaptive

  const CordovaRes = require('cordova-res');
  const iconFolder = {
    dev: 'test',
    test: 'test',
    beta: 'beta',
    betaInternal: 'beta',
    betaRelease: 'beta',
    production: 'production'
  }[ENV];
  const sourcePath = `resources/_environments/${iconFolder}/`;
  const options = {
    resourcesDirectory: 'resources',
    platforms: {
      ios: { icon: { sources: [`${sourcePath}/icon-ios.png`] } },
      android: {
        'adaptive-icon': {
          icon: { sources: [`${sourcePath}/icon-android.png`] },
          foreground: { sources: [`${sourcePath}/icon-android-foreground.png`] },
          background: {
            sources: [{ type: 'color', color: '#b5c429' }]
          }
        }
      }
    }
  };
 CordovaRes(options);

###

You will first need to update Cordova to 7.0. Cordova 7.0 gives support for Android Oreo. Once you have created an app using Cordova 7, then you will have to manually create the adaptive icons using the native Android code. This Medium blog will help you with that. Once you have created your Adaptive Icons, you can add them to your config.xml like this –

<platform name="android">
    <!--
        ldpi    : 36x36 px
        mdpi    : 48x48 px
        hdpi    : 72x72 px
        xhdpi   : 96x96 px
        xxhdpi  : 144x144 px
        xxxhdpi : 192x192 px
    -->
    <icon src="res/android/ldpi.png" density="ldpi" />
    <icon src="res/android/mdpi.png" density="mdpi" />
    <icon src="res/android/hdpi.png" density="hdpi" />
    <icon src="res/android/xhdpi.png" density="xhdpi" />
    <icon src="res/android/xxhdpi.png" density="xxhdpi" />
    <icon src="res/android/xxxhdpi.png" density="xxxhdpi" />
</platform>

Leave a Reply

Your email address will not be published. Required fields are marked *