web-dev-qa-db-de.com

Cordova - Adaptive Symbole auf Android

Ich habe ein generiertes Set von Icons mit Android Image Asset Studio . Ich weiß jedoch nicht, wie ich diese Symbole in Cordova für meine App festlegen kann.

Wenn ich der Dokumentation zu Symbolen in Cordova folge, konnte ich die quadratischen Symbole nur mit folgendem Code für mein Projekt festlegen:

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

Sagen Sie in Android Oreo jedoch, dass die Symbole der Apps rund sind und das App-Symbol auf dem Telefon nicht richtig angezeigt wird. Das Symbol ist innerhalb des Kreises geschrumpft und hat einen weißen Hintergrund. 

 enter image description here

Question: Wie kann ich die abgerundeten Symbole, die Image Asset Studio für mein Cordova-Projekt generiert hat, festlegen?

8
EDJ

Im Folgenden wird eine getestete und funktionierende Lösung für mein Produktionsprojekt gezeigt

Kopieren Sie alle generierten Symbole in res/Android im Stammverzeichnis Ihres Projekts (gleiche Ebene wie resources- oder platforms-Ordner) und fügen Sie die untenstehende Konfiguration in config.xml-Datei hinzu:

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

Vergessen Sie nicht, um xmlns:Android="http://schemas.Android.com/apk/res/Android" zu Ihrem <widget hinzuzufügen.

Entfernen Sie<icon, wenn Sie <widget => <platform => <icon haben.

Entfernen Sie nach dem Hinzufügen der obigen Änderungen zu Ihrem config.xml Ihre Android-Plattform mit ionic cordova platform remove Android oder Sudo ionic cordova platform remove Android (je nach Umgebungseinstellungen), und fügen Sie die Android-Plattform erneut mit ionic cordova platform add Android oder Sudo ionic cordova platform add Android hinzu.

Erstellen Sie Build, installieren Sie und überprüfen Sie die Ergebnisse . Ich habe die obigen Konfigurationen in meinem Produktionscode verwendet und hier sind die Ergebnisse:

 enter image description here

Ich hoffe, dies wird dir helfen!

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

Sie können Android in IOS ändern, den Pfad von src = "Pfad" nach Belieben ändern, die Dichte in eine der bekannten Einstellungen ändern, die Breite und Höhe der Bilder sowie die Ausrichtung einstellen. Die Ausrichtung des Symbols ist irrelevant, Spritzer und andere Bilder sind jedoch möglicherweise nicht relevant. Icons werden so gesetzt:

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

Natürlich geht das in die config.xml und Sie müssen sie nicht innerhalb von Plattformabschnitten platzieren, da Sie die Plattform im Tag angeben.

0
ppetree

Dieser SO Post ist der Top-Hit, wenn Sie bei Google nach "Cordova Android adaptive icons" suchen. Die hier vorgeschlagenen Methoden, insbesondere die Antwort von @ VicJordan, sind eine vollständige Lösung. Es ist jedoch zu beachten, dass Version 8 von Cordova Android eine eigene Methode zur Unterstützung adaptiver Symbole eingeführt hat, für die Sie Android Asset Studio nicht benötigen.

Hier ist was Sie tun müssen

  • Entfernen Sie die alten <icon density="?dpi" src = "path/to/icon/resource"/> - Anweisungen in der Datei config.xml Für Ihre Cordova-App
  • Geben Sie eine <icon density = "?dpi" background = "path/to/icon/background"/> - Anweisung an
  • Geben Sie eine übereinstimmende Anweisung <icon density = "?dpi" background="path/to/icon/foreground"/> An

wo ? = l|m|h|x|xx|xxx

Sie können anstelle von Bildern auch farbige Schwarzgründe verwenden. Ausführliche Informationen hierzu finden Sie in der Cordova 8-Dokumentation .

0
DroidOS

Sie können dies versuchen: Nachdem Sie das Image für das App-Symbol unter Image Asset ausgewählt haben, setzen Sie die Eigenschaft Shape (auf der Registerkarte Legacy unter Image Asset) von Square auf None.

0
Avilash