13

I have a generated set of icons using Android Image Asset Studio. However, I do not know how I can set those icons to my app in Cordova.

When following the documentation regarding icons in Cordova, I only managed to set the square icons to my project using the following code:

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

However, say in Android Oreo the icons of apps are round and it does not display my app's icon properly on that phone. The icon is shrank inside the circle and has white background around it.

enter image description here

Question: How can I set the rounded icons that Image Asset Studio generated to my Cordova project?

Vikasdeep Singh
  • 20,983
  • 15
  • 78
  • 104
EDJ
  • 843
  • 3
  • 17
  • 37
  • I don't use Cordova last time, but… Do you try ``` ``` ? – Gordio Aug 07 '18 at 13:54
  • @Gordio, Yes. I am using the exact code from [Cordova's app icon documentation](https://cordova.apache.org/docs/en/latest/config_ref/images.html). However, I cannot figure our how to use the ones generated from Android Image Asset Studio which come in circle and other shapes. – EDJ Aug 07 '18 at 13:57

5 Answers5

18

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:

enter image description here

Armen Michaeli
  • 8,625
  • 8
  • 58
  • 95
Vikasdeep Singh
  • 20,983
  • 15
  • 78
  • 104
  • I am getting the following error when attempting this: `C:\Users\Zi\Desktop\New folder\MyApp\platforms\android\app\src\main\res\mipmap-anydpi-v26\ic_launcher.xml:3: AAPT: error: resource mipmap/ic_launcher_background (aka com.MyApp:mipmap/ic_launcher_background) not found.` – EDJ Aug 08 '18 at 02:08
  • @EDJ please delete `platform` directory and create again by running `cordova prepare` command. – Vikasdeep Singh Aug 08 '18 at 02:18
  • still getting the same error. How come I am missing something when I am using the entire res folder Android Image Asset Studio generated? – EDJ Aug 08 '18 at 02:28
  • I am not sure how you are copying. Could you confirm if you have `res` folder or `resources` folder in your project structure? – Vikasdeep Singh Aug 08 '18 at 02:46
  • Try by removing `app/src/main` from the `target` attributes of each `` tag. – Vikasdeep Singh Aug 08 '18 at 02:51
  • @EDJ Could please try by removing target attributes completely? – Vikasdeep Singh Aug 08 '18 at 13:51
  • Nothing seems to change now. There are no icons applied at all. Do you think it may be possible for you to try this code yourself on a Cordova project? I seriously think that I might be the one who does not do something properly. Maybe someone who understands it better will be able to figure it out on a project in front of them. – EDJ Aug 10 '18 at 09:54
  • 2
    @EDJ I have updated answer and this is working solution with proof. Check and let me know. – Vikasdeep Singh Aug 13 '18 at 05:23
  • 1
    the MVP. Worked like a charm. Thank you for all the efforts you have put in into helping me solve this issue. – EDJ Aug 13 '18 at 12:10
  • 1
    This updated answer worked for me with Cordova Android 7.1.2. To make it more clear, just make sure the target paths start with "app/src/main/res/" rather than just "res/". I had used an earlier version to work with 6.4.0. – TheBosZ Nov 13 '18 at 18:38
  • I am getting error: `Execution failed for task ':app:processDebugResources'.` how to fix this – Ajit Kumar Dec 01 '18 at 18:04
  • These instructions are excellent. However, one word of warning for anyone following them. Before you delete the platforms folder make sure that you have a safe copy of the **debug_signing.properties** and **release_signing.properties** files along with the relevant keystores. After reinstalling the Android platform copy these files back to the `platforms/android` folder prior to doing a full rebuild. Failing that Android will refuse to install the newly compiled app with a hopelessly unhelpful "not installed" message. – DroidOS Jul 03 '19 at 04:24
  • 1
    Does it replaces all the icons including the square icons for previous versions of android or should I keep legacy icons as well ? I get the cordova icon in an android 9 phone. Thx – C Taque Nov 21 '19 at 09:27
  • 1
    @CTaque You should keep your legacy icon to support square icon devices/OS versions. – Vikasdeep Singh Nov 21 '19 at 09:30
  • @VikasdeepSingh - how come your output does not include an `ic_launcher_foreground.xml` file? Using the Image Asset tool I am choosing a png file for my foreground, and a color for my background - but when I click next its not outputting an `ic_launcher_foreground.xml` file - it is creating all the `ic_launcher_foreground.png` images in the correct folders, but not the xml. Without the foreground xml file my project launches with the default android icon (half robot). I have reviewed about two dozen SOs and a few tutorial videos - everything I am doing looks correct, but no foregound.xml file – rolinger Apr 18 '20 at 23:05
  • 1
    Great answer and solution! – CGN May 07 '20 at 12:22
3

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 the config.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.

DroidOS
  • 8,530
  • 16
  • 99
  • 171
0

You can try this: After selecting the image for the app icon from Image Asset, set the property of Shape (found in Legacy tab under Image Asset) from Square to None.

Avilash
  • 176
  • 1
  • 9
  • I have generated all the icons from Image Asset in Android Studio. However, I do not know how to set them properly in Cordova's `config.xml`. I am not using Android Studio for designing my application. – EDJ Aug 05 '18 at 11:54
0
<splash platform="android" src="package-assets/splash_320_426.png" density="ldpi" width="320" height="426" orientation="portrait"/>

You can change android to ios, change the src="path" to whatever you want, change the density to one of the known settings, set the images width and height and the orientation. Icon orientation is irrelevant but splash and other images may not be. Icons are set like this:

<icon platform="android" src="package-assets/ldpi.png" density="ldpi" width="36" height="36"/>

Of course this goes in the config.xml and you don't have to place it inside of platform sections since you specify the platform in the tag.

ppetree
  • 826
  • 3
  • 15
  • 31
  • I have already done that and I have the icons working on both platforms. Thus, since all icons I have set using the code above are square images, the icon on Android Oreo appears as a square inside a circle with white background around it - just as I have shown on the picture above. This is what I want to avoid. However, I do not know how I can set the round icons which I have generated using Android Image Asset Studio to Cordova's `config.xml`. – EDJ Aug 07 '18 at 21:27
  • https://stackoverflow.com/questions/47523610/android-oreo-how-do-i-set-adaptive-icons-in-cordova – ppetree Aug 08 '18 at 14:28
  • Yes, this is the code that VicJordan provided above as well. However, I am having issues when trying to add it to my project. It says that the following is missing: `C:\Users\Zi\Desktop\New folder\MyApp\platforms\android\app\src\main\res\mipmap-anydpi-v26\ic_launcher.xml:3: AAPT: error: resource mipmap/ic_launcher_background (aka com.MyApp:mipmap/ic_launcher_background) not found.` – EDJ Aug 10 '18 at 09:55
0

The way how to do it with an adaptive vector icon is following. The Asset Studio will create 3 files (in the platform res hierarchy) we have to copy to a folder in the Cordova project root. Let's be it android-res/ for example. The files we are looking for are: ic_launcher.xml, ic_launcher_background.xml and ic_launcher_foreground.xml.

These resource files should be added to config.xml:

<icon src="icon.png" platform="android" />

<platform name="android">
    <!-- Adaptive icon -->
    <resource-file src="android-res/ic_launcher.xml" target="app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml" />
    <resource-file src="android-res/ic_launcher_background.xml" target="app/src/main/res/values/ic_launcher_background.xml" />
    <resource-file src="android-res/ic_launcher_foreground.xml" target="app/src/main/res/drawable/ic_launcher_foreground.xml" />

    <!-- rest of Android platform stuff ...  -->
</platform>

This way assume one wants to use the same icon for both normal and round icon. Keep in mind that an adaptive icon does not have to be round! It depends on the launcher. Adaptive icons are supported from API 26, so we should keep there our default/legacy icon.png in the PNG format.

Velda
  • 587
  • 2
  • 5
  • 21