Adaptive Symbole

Ein adaptives Symbol oder AdaptiveIconDrawable, können je nach Gerätefunktionen und Nutzer unterschiedlich angezeigt werden. zu erstellen. Adaptive Symbole werden hauptsächlich vom Launcher auf dem Startbildschirm verwendet, können aber auch in Verknüpfungen, in der App „Einstellungen“, in Dialogfeldern zum Teilen und auf dem Übersichtsbildschirm. Adaptive Symbole werden für alle Android-Formfaktoren verwendet.

Im Gegensatz zu Bitmap Bilder zu erkennen, können adaptive Symbole an verschiedene Anwendungsfälle anpassen:

  • Verschiedene Formen:Mit einem adaptiven Symbol können verschiedene Formen dargestellt werden. auf verschiedenen Gerätemodellen. Sie kann beispielsweise eine kreisförmige Form darstellen, auf einem OEM-Gerät verfügen und ein Kreissymbol (eine Form zwischen einem Quadrat und einem Kreis) auf einem anderen Gerät. Jeder Geräte-OEM muss eine Maske bereitstellen, die die verwendet, um alle adaptiven Symbole mit derselben Form zu rendern.

    <ph type="x-smartling-placeholder">
    </ph> Ein GIF mit einer sich wiederholenden Animation desselben Android-Beispielsymbols Je nach verwendeter Maske sind verschiedene Formen zu sehen: ein Kreis und dann Zwei verschiedene Arten von Wellen <ph type="x-smartling-placeholder">
    </ph> Abbildung 1: Adaptive Symbole unterstützen die sich von Gerät zu Gerät unterscheiden.

  • Visuelle Effekte:Ein adaptives Symbol unterstützt verschiedene ansprechende visuelle Elemente. Effekte, die angezeigt werden, wenn Nutzende das Symbol auf dem Zuhause platzieren oder verschieben Bildschirm.

    <ph type="x-smartling-placeholder">
    </ph> GIF, das Beispiele für zwei kreisförmige Android-Beispielsymbole zeigt animiert sein, um die Reaktion zu zeigen. Das erste Symbol ist das Android-Logo. und sie bewegte sich im Kreis nach links, dann nach rechts und dann nach oben und unten. Die zweite wird größer dargestellt und dann wieder zusammengezogen. <ph type="x-smartling-placeholder">
    </ph> Abbildung 2: Beispiele für visuelle Effekte, die von ein adaptives Symbol.

  • Nutzerthemen:Ab Android 13 (API-Level 33) können Nutzer Designs adaptiven Symbolen. Wenn ein Nutzer App-Symboldesigns aktiviert, indem er die Symboldesigns können in den Systemeinstellungen ein-/ausgeschaltet werden. Der Launcher unterstützt dies. verwendet das System die Farben des vom Nutzer gewählten Hintergrunds um die Färbung festzulegen.

    <ph type="x-smartling-placeholder">
    </ph> Ein Bild, auf dem drei Android-Geräte zu sehen sind, auf denen jeweils ein Gerät zu sehen ist Unterschiedliches Nutzerdesign mit verschiedenen Tönungen: Das erste zeigt einen Hintergrund mit dunkle Färbung; der zweite einen goldfarbenen Hintergrund. Das dritte zeigt eine Hintergrund mit hellgrauem Hintergrund mit bläulichen Tönen. In jedem Beispiel Symbole haben die Färbung des Hintergrunds übernommen und fügen sich perfekt ein. <ph type="x-smartling-placeholder">
    </ph> Abbildung 3: Adaptive Symbole übernehmen die auf den Hintergrund und die Designs des Nutzers basieren.

    In den folgenden Szenarien werden auf dem Startbildschirm nicht die App-Symbol statt des adaptiven oder standardmäßigen App-Symbols:

    • Der Nutzer aktiviert App-Symboldesigns nicht.
    • Wenn Ihre App kein einfarbiges App-Symbol hat.
    • Der Launcher unterstützt keine App-Symboldesigns.

Adaptive Symbole entwerfen

Um sicherzustellen, dass Ihr adaptives Symbol verschiedene Formen, visuelle Effekte und User-Themen festlegen, muss das Design die folgenden Anforderungen erfüllen:

  • Sie müssen zwei Ebenen für die Farbversion des Symbols bereitstellen: eine für das im Vordergrund und einer für den Hintergrund. Die Ebenen können entweder Vektoren oder Bitmaps werden bevorzugt, Vektoren werden jedoch bevorzugt.

    <ph type="x-smartling-placeholder">
    </ph> Ein Bild, das ein Beispiel für eine Vordergrundebene (linkes Bild) und ein Hintergrund-Layer (rechtes Bild) Im Vordergrund ist das 16-seitige Symbol einer Beispiel-Android-Logo, zentriert in einem sicheren Bereich mit 66 x 66 Pixel Der sichere Bereich ist in einem 108-x-108-Container zentriert. Der Hintergrund zeigt dasselbe gemessene Abmessungen für den sicheren Bereich und den Container, aber nur ein blaues Hintergrund und ohne Logo. <ph type="x-smartling-placeholder">
    </ph> Abbildung 4: Durch Vordergrund definierte adaptive Symbole und Hintergrundebenen. Der abgebildete sichere Bereich 66 x 66 ist der Bereich, die niemals durch eine förmige Maske abgeschnitten wird, die von einem OEM definiert wurde.
    <ph type="x-smartling-placeholder">
    </ph> Ein Bild mit dem Symbol des vorherigen Bilds als Overlay auf einem kreisförmige Maske. <ph type="x-smartling-placeholder">
    </ph> Abbildung 5: Ein Beispiel dafür, wie Vordergrund- und Die Hintergrundebenen sehen zusammen mit einer runden Maske aus.

  • Wenn Sie das Nutzerdesign von App-Symbolen unterstützen möchten, stellen Sie für die App-Symbole die monochrome Version des Symbols.

    <ph type="x-smartling-placeholder">
    </ph> Ein Bild, das ein Beispiel für eine monochromatische Symbolebene zeigt (linkes Bild) und Farbvorschauen (rechtes Bild). Die monochromatische Schicht zeigt die 16-seitige Symbol eines Android-Beispiellogos in einem sicheren Bereich mit einer Größe von 66 x 66 Der Safe Zone ist in einem 108 x 108-Container zentriert. In der Farbvorschau sehen Sie wird diese Ebene angezeigt, wenn sie auf verschiedenfarbige Nutzerthemen angewendet wird (Orange, Rosa, Gelb und Grün). <ph type="x-smartling-placeholder">
    </ph> Abbildung 6: Eine monochromatische Symbolebene (links) mit Beispiele für Farbvorschauen (rechts)

  • Die Größe aller Ebenen muss eine Größe von 108 x 108 dp betragen.

  • Verwenden Sie Symbole mit klaren Kanten. Die Ebenen dürfen keine Masken und keinen Hintergrund haben Schatten um den Umriss des Symbols.

  • Verwenden Sie ein Logo mit mindestens 48 x 48 dp. Sie darf 66 × 66 dp nicht überschreiten da das innere 66 x 66 dp des Symbols im maskierten Darstellungsbereich.

Die äußeren 18 dp auf jeder der vier Seiten der Ebenen werden für und visuelle Effekte wie Parallaxe oder Pulsieren erzeugen.

Eine Anleitung zum Erstellen adaptiver Symbole mit Android Studio finden Sie in unserer Android App Symbol von Figma Vorlage oder Android Studio-Dokumentation zum Erstellen des Launchers Symbolen. Außerdem finden Sie im Blogpost Adaptives Design Symbole .

Adaptives Symbol zur App hinzufügen

Adaptive Symbole werden genau wie nicht adaptive Symbole mithilfe der Attribut android:icon in der App Manifest-Datei.

Das optionale Attribut android:roundIcon wird von Launchern verwendet, die Folgendes darstellen: Apps mit runden Symbolen. Dies kann nützlich sein, wenn Ihr App-Symbol ein einen runden Hintergrund als zentralen Bestandteil des Designs. Solche Launcher sind erforderlich, Generieren von App-Symbolen durch Anwenden einer runden Maske auf android:roundIcon und das können Sie das Erscheinungsbild Ihres App-Symbols optimieren, indem Sie indem Sie das Logo leicht vergrößern und darauf achten, dass beim Zuschneiden Ein kreisförmiger Hintergrund ist randlos.

Das folgende Code-Snippet veranschaulicht beide dieser Attribute, aber die meisten Apps Geben Sie nur android:icon an:

<application
    ...
    android:icon="@mipmap/ic_launcher"
    android:roundIcon="@mipmap/ic_launcher_round"
    ...>
</application>

Speichern Sie als Nächstes Ihr adaptives Symbol unter res/mipmap-anydpi-v26/ic_launcher.xml. Verwenden Sie das <adaptive-icon>-Element, um Vordergrund, Hintergrund und monochromatischen Ebenen-Ressourcen für Ihre Symbole. Das <foreground>, Die inneren Elemente „<background>“ und „<monochrome>“ unterstützen beides Vektor- und Bitmapbilder zu erstellen.

Das folgende Beispiel zeigt, wie <foreground>, <background> und <monochrome>-Elemente innerhalb von <adaptive-icon>:

<?xml version="1.0" encoding="utf-8"?>
...
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
    <background android:drawable="@drawable/ic_launcher_background" />
    <foreground android:drawable="@drawable/ic_launcher_foreground" />

    // Starting with Android 13 (API level 33), you can opt-in to providing a
    // <monochrome> drawable.
    <monochrome android:drawable="@drawable/ic_launcher_monochrome" />
</adaptive-icon>
...

Du kannst Drawables auch als Elemente definieren, indem du sie in den <foreground>-, <background>- und <monochrome>-Elemente. Die folgenden zeigt ein Beispiel dafür mit dem Drawable im Vordergrund.

<?xml version="1.0" encoding="utf-8"?>
...
<foreground>
   <inset
       android:insetBottom="18dp"
       android:insetLeft="18dp"
       android:insetRight="18dp"
       android:insetTop="18dp">
       <shape android:shape="oval">
           <solid android:color="#0000FF" />
       </shape>
   </inset>
</foreground>
...

Wenn Sie die gleiche Maske und den gleichen visuellen Effekt auf Ihre Verknüpfungen anwenden möchten wie für reguläre adaptive Symbole verwenden Sie eine der folgenden Methoden:

  • Verwende für statische Verknüpfungen das Element <adaptive-icon>.
  • Rufe für dynamische Verknüpfungen den createWithAdaptiveBitmap() wenn Sie sie erstellen.

Weitere Informationen zum Implementieren adaptiver Symbole finden Sie unter Implementieren von adaptiven Symbolen Adaptiv Symbole: Weitere Informationen zu Verknüpfungen finden Sie unter App-Verknüpfungen Übersicht.

Weitere Informationen

In den folgenden Ressourcen finden Sie weitere Informationen zum Design und zur adaptive Symbole implementieren.