Adaptive Symbole

Ein adaptives Symbol oder AdaptiveIconDrawable kann je nach den Funktionen des jeweiligen Geräts und dem vom Nutzer gewählten Design unterschiedlich dargestellt werden. 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 genutzt werden. Adaptive Symbole werden für alle Android-Formfaktoren verwendet.

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

  • 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-Symbols, das je nach verwendeter Maske unterschiedliche Formen zeigt: einen Kreis und dann zwei verschiedene Arten von Squircle.
    Abbildung 1. Adaptive Symbole unterstützen verschiedene 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 Reaktion des Nutzers zu zeigen. Das erste Symbol zeigt das Android-Logo, das sich im Kreis zuerst nach links und dann nach rechts und dann nach oben und unten bewegt. Das zweite Symbol wird vergrößert und dann wieder verkleinert.
    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 Symboldesigns aktiviert, indem er in den Systemeinstellungen den Schalter 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 zu bestimmen.

    Ein Bild mit Beispielen für drei Android-Geräte, auf denen jeweils ein anderes Nutzerdesign mit unterschiedlichen Farbtönen zu sehen ist: Das erste zeigt ein Hintergrundbild mit dunkler Tönung, das zweite ein goldfarbenes Hintergrundbild und das dritte ein hellgraues Hintergrundbild mit bläulichen Farbtönen. In jedem Beispiel haben die Symbole die Tönung des Hintergrundbilds übernommen und fügen sich perfekt ein.
    Abbildung 3: Adaptive Symbole, die vom Hintergrundbild und den Designs des Nutzers abgeleitet werden.

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

    • Wenn der Nutzer keine Symboldesigns für Apps aktiviert.
    • Wenn Ihre App kein monochromatisches App-Symbol bereitstellt.
    • Wenn der Launcher keine Symboldesigns für Apps unterstützt.

Adaptive Symbole entwerfen

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

  • Sie müssen 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.

    Ein Bild mit einem Beispiel für eine Vordergrundebene (linkes Bild) und eine Hintergrundebene (rechtes Bild). 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. Die Safe Zone ist in einem 108 × 108-Container zentriert. Der Hintergrund zeigt die gleichen gemessenen Abmessungen für die Safe Zone und den Container, aber nur einen blauen Hintergrund und kein Logo.
    Abbildung 4: Adaptive Symbole werden mithilfe von Vorder- und Hintergrundebenen definiert. Die abgebildete Sicherheitszone mit 66 × 66 Pixeln ist der Bereich, der nie durch eine vom OEM definierte Maske mit Form abgeschnitten wird.
    Ein Bild, auf dem das Symbol aus dem vorherigen Bild auf einer kreisförmigen Maske zu sehen ist.
    Abbildung 5. Ein Beispiel dafür, wie Vordergrund- und Hintergrundebenen mit einer kreisförmigen Maske aussehen.

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

    Ein Bild mit einem Beispiel für eine monochrome Symbol-Ebene (linkes Bild) und Farbvoransichten (rechtes Bild). Die monochrome Ebene zeigt das 16-seitige Symbol eines Beispiel-Android-Logos, das in einem 66 × 66 px großen sicheren Bereich zentriert ist. Die Safe Zone 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 Symbol-Ebene (links) mit Beispielen für Farbvorschauen (rechts).

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

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

  • Verwenden Sie 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 das Maskieren und zum Erstellen visueller 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 finden Sie im Blogpost Adaptive Symbole entwerfen.

Adaptives Symbol in die App einfü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 Ihrer 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 Ihnen ermöglichen, das Erscheinungsbild Ihres App-Symbols zu optimieren, indem Sie beispielsweise das Logo leicht vergrößern und dafür sorgen, dass der kreisförmige Hintergrund beim Zuschneiden randlos ist.

Im folgenden Code-Snippet werden beide Attribute verwendet. In den meisten Apps wird jedoch nur android:icon angegeben:

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

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

Im folgenden Beispiel sehen Sie, 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 können Sie jedoch separate Drawables für jede Ebene erstellen.

Sie können Drawables auch als Elemente definieren, indem Sie sie inline in die Elemente <foreground>, <background> und <monochrome> einfügen. 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 auf deine Verknüpfungen dieselbe Maske und dieselben visuellen Effekte wie auf die regulären adaptiven Symbole anwenden möchtest, nutze eines der folgenden Verfahren:

  • Verwende für statische Verknüpfungen das Element <adaptive-icon>.
  • Rufe beim Erstellen dynamischer Verknüpfungen die Methode createWithAdaptiveBitmap() auf.

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

Zusätzliche Ressourcen

Weitere Informationen zum Entwerfen und Implementieren adaptiver Symbole finden Sie in den folgenden Ressourcen.