Cordova - Adaptive icons on Android

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.

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

Vikasdeep Singh

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

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.

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

来源：https://stackoverflow.com/questions/51691533/cordova-adaptive-icons-on-android

标签

android

cordova

icons

fill