Adaptive Symbole

Überschrift für adaptive Symbole

Ein adaptives Symbol (AdaptiveIconDrawable) kann je nach den Funktionen des Geräts und dem Design des Nutzers unterschiedlich dargestellt werden. Adaptive Symbole werden hauptsächlich vom Launcher auf dem Startbildschirm verwendet, können aber auch in Verknüpfungen, in der Einstellungen-App, in Freigabedialogen und auf dem Übersichtsbildschirm verwendet werden. Adaptive Symbole werden für alle Android-Formfaktoren verwendet.

Im Gegensatz zu Bitmap-Bildern können adaptive Symbole an verschiedene Anwendungsfälle angepasst werden:

  • Verschiedene Formen: Ein adaptives Symbol kann auf verschiedenen Gerätemodellen in unterschiedlichen Formen dargestellt werden. Beispielsweise lässt sich ein adaptives Launcher-Symbol je nach OEM-Gerät entweder als Kreis oder als abgerundetes Quadrat darstellen. Jeder Geräte-OEM muss eine Maske bereitstellen, die vom System verwendet wird, um alle adaptiven Symbole mit derselben Form zu rendern.

    Ein GIF mit einer sich wiederholenden Animation desselben Android-Beispielsymbols, das je nach verwendeter Maske unterschiedliche Formen zeigt – einen Kreis und dann zwei verschiedene Arten von Squircles
    Abbildung 1. Adaptive Symbole unterstützen eine Vielzahl von Masken, die sich von Gerät zu Gerät unterscheiden.

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

    Ein GIF mit Beispielen für zwei kreisförmige Android-Beispielsymbole, die animiert sind, um die Nutzerreaktion zu zeigen. Das erste Symbol zeigt das Android-Logo, das sich im Kreis nach links und rechts und dann nach oben und unten bewegt. Das zweite Symbol wird maximiert und dann wieder minimiert.
    Abbildung 2. Beispiele für visuelle Effekte, die von einem adaptiven Symbol angezeigt werden.

  • Nutzerdesign: Ab Android 13 (API-Level 33) können Nutzer das Design ihrer adaptiven Symbole anpassen. Wenn ein Nutzer in den Systemeinstellungen Symboldesigns aktiviert und der Launcher diese Funktion unterstützt, verwendet das System die Farben des vom Nutzer ausgewählten Hintergrundbilds und Designs, um die Farbgebung der App-Symbole für Apps zu bestimmen, die eine monochrome-Ebene in ihrem adaptiven Symbol haben. Ab Android 16 QPR 2 werden App-Symbole für Apps, die keine eigenen Symbole bereitstellen, automatisch mit einem Design versehen.

    Ein Beispiel für drei Android-Geräte, auf denen jeweils ein anderes Nutzerdesign mit unterschiedlichen Farbtönen angezeigt wird: Das erste zeigt einen Hintergrund mit dunkler Tönung, das zweite einen Hintergrund mit goldener Tönung und das dritte einen Hintergrund mit hellgrauer Tönung mit bläulichen Farbtönen. In jedem Beispiel haben die Symbole die Tönung des Hintergrunds übernommen und fügen sich perfekt ein.
    Abbildung 3. Adaptive Symbole, die vom Hintergrund und den Designs des Nutzers übernommen werden.

    In den folgenden Szenarien wird auf dem Startbildschirm nicht das App-Symbol mit Design, sondern das adaptive oder Standard-App-Symbol angezeigt:

    • Wenn der Nutzer keine Symboldesigns aktiviert.
    • Wenn deine App kein monochromatisches App-Symbol bereitstellt und auf dem Gerät des Nutzers eine frühere Android-Version als Android 16 QPR 2 ausgeführt wird.
    • Wenn der Launcher keine App-Symbole mit Design unterstützt.

Adaptive Symbole entwerfen

Damit dein adaptives Symbol verschiedene Formen, visuelle Effekte und Nutzerdesigns unterstützt, muss das Design die folgenden Anforderungen erfüllen:

  • Du musst zwei Ebenen für die Farbversion des Symbols bereitstellen: eine für den Vordergrund und eine für den Hintergrund. Die Ebenen können entweder Vektoren oder Bitmaps sein. Vektoren werden jedoch bevorzugt.

    Beispiel für eine Vordergrundebene (links) und eine Hintergrundebene (rechts) Im Vordergrund ist das 16-seitige Symbol eines Beispiel-Android-Logos zu sehen, das in einem 66 × 66 Pixel großen sicheren Bereich zentriert ist. Der sichere Bereich ist in einem 108 × 108-Container zentriert. Der Hintergrund zeigt die gleichen gemessenen Abmessungen für den sicheren Bereich und den Container, aber nur einen blauen Hintergrund und kein Logo.
    Abbildung 4: Adaptive Symbole werden mithilfe von Vorder- und Hintergrundebenen definiert. Der abgebildete sichere Bereich mit 66 × 66 Pixeln ist der Bereich, der nie durch eine vom OEM definierte Maske mit Form abgeschnitten wird.
    Ein Beispiel, das das Symbol aus der vorherigen Abbildung über einer kreisförmigen Maske zeigt.
    Abbildung 5. Ein Beispiel dafür, wie Vordergrund- und Hintergrundebenen mit einer kreisförmigen Maske aussehen.

  • Wenn du die Anpassung von App-Symbolen durch Nutzer unterstützen möchtest, stelle eine einzelne Ebene für die monochrome Version des Symbols bereit.

    Beispiel für eine monochrome Symbolebene (links) und Farbvorschauen (rechts) Die monochrome Ebene zeigt das 16-seitige Symbol eines Beispiel-Android-Logos, das in einem 66 × 66 px großen sicheren Bereich zentriert ist. Der sichere Bereich befindet sich in der Mitte eines 108 × 108-Containers. Die Farbvorschauen zeigen, wie diese Ebene dargestellt wird, wenn sie auf unterschiedlich farbige Nutzerdesigns (orange, pink, gelb und grün) angewendet wird.
    Abbildung 6. Eine monochrome Symbolebene (links) mit Beispielen für Farbvorschauen (rechts).

  • Alle Ebenen müssen eine Größe von 108 × 108 dp haben.

  • Verwende Symbole mit klaren Kanten. Die Ebenen dürfen keine Masken oder Hintergrundschatten entlang des Symbolrands haben.

  • Verwende ein Logo mit mindestens 48 × 48 dp. Es darf nicht größer als 66 × 66 dp sein, da die inneren 66 × 66 dp des Symbols im maskierten Darstellungsbereich angezeigt werden.

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

Informationen zum Erstellen adaptiver Symbole mit Android Studio findest du in unserer Figma-Vorlage für Android-App-Symbole oder in der Android Studio-Dokumentation zum Erstellen von Launcher-Symbolen. Weitere Informationen findest du im Blogpost Adaptive Symbole entwerfen.

Adaptives Symbol zur App hinzufügen

Adaptive Symbole werden wie nicht adaptive Symbole mit dem Attribut android:icon im App-Manifest angegeben.

Das optionale Attribut android:roundIcon wird von Launchern verwendet, die Apps mit kreisförmigen Symbolen darstellen. Es kann nützlich sein, wenn das Symbol deiner App einen kreisförmigen Hintergrund als wichtigen Bestandteil des Designs enthält. Bei solchen Launchern müssen App-Symbole durch Anwenden einer kreisförmigen Maske auf android:roundIcon generiert werden. Diese Garantie kann es dir ermöglichen, das Erscheinungsbild deines App-Symbols zu optimieren, indem du beispielsweise das Logo leicht vergrößerst und dafür sorgst, dass der kreisförmige Hintergrund beim Zuschneiden randlos ist.

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

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

Speichere als Nächstes das adaptive Symbol unter res/mipmap-anydpi-v26/ic_launcher.xml. Verwende das Element <adaptive-icon>, um die Ressourcen für die Vordergrund-, Hintergrund- und monochromen Ebenen für deine Symbole zu definieren. Die inneren Elemente <foreground>, <background> und <monochrome> unterstützen sowohl Vektor- als auch Bitmap-Bilder.

Im folgenden Beispiel siehst du, wie die Elemente <foreground>, <background> und <monochrome> in <adaptive-icon> definiert werden:

<?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" />
    <monochrome android:drawable="@drawable/ic_launcher_foreground" />
</adaptive-icon>
...

Für die Vordergrund- und Monochromschichten wird dasselbe Drawable verwendet. Bei Bedarf kannst du jedoch separate Drawables für jede Ebene erstellen.

Du kannst Drawables auch als Elemente definieren, indem du sie inline in die Elemente <foreground>, <background> und <monochrome> einfügst. Der folgende Snippet zeigt ein Beispiel dafür, wie das mit dem Vordergrund-Drawable funktioniert.

<?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 du dieselbe Maske und denselben visuellen Effekt auf deine Verknüpfungen wie auf reguläre adaptive Symbole anwenden möchtest, verwende eine der folgenden Methoden:

  • Verwenden Sie für statische Verknüpfungen das Element <adaptive-icon>.
  • Rufen Sie für dynamische Verknüpfungen die Methode createWithAdaptiveBitmap() auf, wenn Sie sie erstellen.

Weitere Informationen zur Implementierung adaptiver Symbole findest du unter Adaptive Symbole implementieren. Weitere Informationen zu Verknüpfungen findest du in der Übersicht zu App-Verknüpfungen.

Zusätzliche Ressourcen

Weitere Informationen zum Entwerfen und Implementieren adaptiver Symbole findest du in den folgenden Ressourcen.

Zurück
Best Practices für Tastenkombinationen implementieren
Weiter
Blasen