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

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

Answer 2

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>

2. 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!

Answer 3

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

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"