web-dev-qa-db-fra.com

Cordova - Icônes adaptatives sur Android

J'ai un ensemble d'icônes générées à l'aide de Android Image Asset Studio . Cependant, je ne sais pas comment je peux définir ces icônes sur mon application dans Cordova.

En suivant la documentation concernant les icônes dans Cordova , j’ai seulement réussi à définir les icônes carrées de mon projet en utilisant le code suivant:

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

Cependant, dans Android Oreo, les icônes des applications sont rondes et l'icône de mon application ne s'affiche pas correctement sur ce téléphone. L'icône est réduite à l'intérieur du cercle et est entourée d'un fond blanc. 

 enter image description here

Question: Comment définir les icônes arrondies générées par Image Asset Studio dans mon projet Cordova?

androidcordovaiconsfill
8
EDJ

La solution ci-dessous est testée et fonctionne sur mon projet de production

Copiez toutes les icônes générées dans res/Android à la racine de votre projet (même niveau que les dossiers resources ou platforms) et ajoutez la configuration ci-dessous au fichier 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/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>

N'oubliez pas d'ajouter xmlns:Android="http://schemas.Android.com/apk/res/Android" à votre <widget.

Supprimer<icon si vous avez dans <widget => <platform => <icon

Après avoir ajouté les modifications ci-dessus à votre config.xml, supprimez votre plate-forme Android par ionic cordova platform remove Android ou Sudo ionic cordova platform remove Android (selon les paramètres de votre environnement), puis ajoutez à nouveau cette plate-forme Android par ionic cordova platform add Android ou Sudo ionic cordova platform add Android.

Créer, installer et vérifier les résultats ... J'ai utilisé les configurations ci-dessus dans mon code de production et voici les résultats:

 enter image description here

J'espère que cela t'aidera!

6
VicJordan
<splash platform="Android" src="package-assets/splash_320_426.png" density="ldpi" width="320" height="426" orientation="portrait"/>

Vous pouvez changer Android pour ios, changer le src = "chemin" en ce que vous voulez, changer la densité avec l'un des paramètres connus, définir la largeur, la hauteur et l'orientation des images. L'orientation des icônes n'est pas pertinente, mais les images Splash et autres peuvent ne pas l'être. Les icônes sont placées comme ceci:

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

Bien sûr, cela se trouve dans le fichier config.xml et vous n’avez pas à le placer dans les sections de la plate-forme puisque vous spécifiez la plate-forme dans la balise.

0
ppetree

Vous pouvez essayer ceci: Après avoir sélectionné l'image pour l'icône de l'application dans Image Asset, définissez la propriété de Forme (située dans l'onglet Héritage sous Image Asset) de Place à Aucune.

0
Avilash