Adaptive Symbole

Ein adaptives Symbol oder AdaptiveIconDrawable kann je nach Gerätefunktionen und Nutzerdesign 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 verwendet werden.

Ein adaptives Symbol kann an verschiedene Anwendungsfälle angepasst werden:

  • Verschiedene Formen:Für ein adaptives Symbol können verschiedene Formen auf verschiedenen Gerätemodellen angezeigt werden. Beispielsweise kann auf einem OEM-Gerät eine kreisförmige Form und auf einem anderen Gerät ein Squircle (eine Form zwischen einem Quadrat und einem Kreis) angezeigt werden. Jeder Geräte-OEM muss eine Maske zur Verfügung stellen, die das System verwendet, um alle adaptiven Symbole mit derselben Form zu rendern.

    GIF mit einer sich wiederholenden Animation desselben Android-Beispielsymbols, das je nach verwendeter Maske unterschiedliche Formen zeigt: ein Kreis und dann zwei verschiedene Squircles-Arten
    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 eine Vielzahl ansprechender visueller Effekte, die eingeblendet werden, wenn Nutzer das Symbol auf dem Startbildschirm platzieren oder verschieben.

    Ein GIF mit Beispielen von zwei kreisförmigen Android-Beispielsymbolen, die animiert sind, um die Nutzerantwort zu zeigen. Das erste Symbol zeigt, dass das Android-Logo nach links, dann nach rechts und dann im Kreis nach oben und unten wackelt. Das zweite Symbol wird maximiert und dann wieder reduziert.
    Abbildung 2: Beispiele für visuelle Effekte, die durch ein adaptives Symbol angezeigt werden.

  • Nutzerthemen:Ab Android 13 (API-Level 33) können Nutzer ihre adaptiven Symbole designen. Wenn ein Nutzer in den Systemeinstellungen die Ein/Aus-Schaltfläche Symboldesigns aktiviert hat und der Launcher diese Funktion unterstützt, verwendet das System die Einfärbung des vom Nutzer ausgewählten Hintergrunds und Designs, um die Färbung zu bestimmen.

    Ein Bild von drei Android-Geräten, von denen jedes ein anderes Nutzerthema in verschiedenen Farbtönen zeigt: Das erste Bild zeigt einen Hintergrund mit dunkler Tönung, das zweite einen goldenen Hintergrund, das dritte einen Hintergrund mit hellgrauem Hintergrund. In jedem Beispiel haben die Symbole die Färbung des Hintergrunds übernommen und fügen sich perfekt ein.
    Abbildung 3: Adaptive Symbole, die vom Hintergrund und den Designs der Nutzenden übernommen werden.

In den folgenden Szenarien wird auf dem Startbildschirm nicht das App-Symbol als Design angezeigt, sondern das adaptive oder standardmäßige App-Symbol:

  • Der Nutzer aktiviert die App-Symboldesigns nicht.
  • Wenn Ihre App kein einfarbiges App-Symbol zur Verfügung stellt.
  • Der Launcher unterstützt keine App-Symboldesigns.

Adaptive Symbole entwerfen

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

  • Für die Farbversion des Symbols müssen zwei Ebenen angegeben werden: eine für den Vordergrund und eine für den Hintergrund.

    Ein Bild, das ein Beispiel für eine Vordergrundebene (linkes Bild) und eine Hintergrundebene (rechtes Bild) zeigt. Im Vordergrund ist das 16-seitige Symbol eines Android-Beispiellogos zu sehen, das in einem sicheren Bereich (66 × 66) zentriert ist. Der sichere Bereich befindet sich in einem 108 × 108 großen Container. Im Hintergrund sind die gleichen gemessenen Abmessungen für den sicheren Bereich und den Container zu sehen, aber nur ein blauer Hintergrund und kein Logo.
    Abbildung 4: Adaptive Symbole, die über Vorder- und Hintergrundebenen definiert werden. Der dargestellte sichere Bereich 66 × 66 ist der Bereich, der nie von einer von einem OEM definierten geformten Maske abgeschnitten wird.
    Ein Bild, das das Symbol aus dem vorherigen Bild auf einer kreisförmigen Maske zeigt.
    Abbildung 5. Ein Beispiel dafür, wie Vorder- und Hintergrundebenen zusammen mit einer kreisförmigen Maske aussehen.

  • Wenn Sie Nutzermotivationen für App-Symbole 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 einfarbige Symbolebene (linkes Bild) und eine Farbvorschau (rechtes Bild). Die monochromatische Ebene zeigt das 16-seitige Symbol eines Android-Beispiellogos in der Mitte eines sicheren Bereichs von 66 × 66. Der sichere Bereich befindet sich zentriert in einem 108-x-108-Container. In der Farbvorschau wird diese Ebene angezeigt, wenn sie auf verschiedenfarbige Nutzerthemen (Orange, Rosa, Gelb und Grün) angewendet wird.
    Abbildung 6: Eine einfarbige Symbolebene (links) mit Beispielen für Farbvorschauen (rechts)

  • Größe aller Ebenen muss auf 108 x 108 dp festgelegt werden.

  • Verwenden Sie Symbole mit klaren Rändern. Die Ebenen dürfen keine Masken oder Hintergrundschatten um den Umriss des Symbols haben.

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

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

Informationen zum Erstellen adaptiver Symbole mit Android Studio finden Sie in unserer Figma-Vorlage für Android-App-Symbole oder in der Android Studio-Dokumentation zum Erstellen von Launcher-Symbolen. Außerdem sollten Sie sich den Blogpost Adaptive Symbole entwerfen ansehen.

Adaptives Symbol zur App hinzufügen

Wenn du deiner App ein adaptives Symbol hinzufügen möchtest, aktualisiere das android:icon-Attribut in deinem App-Manifest, um eine Drawable-Ressource anzugeben. Sie können auch eine Symbol-Drawable-Ressource mit dem Attribut android:roundIcon definieren, aber nur, wenn Sie ein anderes Symbol-Asset für kreisförmige Masken benötigen, z. B. wenn Ihr Branding auf einer Kreisform basiert.

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

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

Erstelle als Nächstes in res/mipmap-anydpi-v26/ic_launcher.xml alternative Drawable-Ressourcen in deiner App, um die Abwärtskompatibilität mit Android 8.0 (API-Ebene 26) zu gewährleisten. Mit dem Element <adaptive-icon> definierst du die Drawables für den Vorder- und Hintergrund sowie die monochromatischen Ebenen für deine Symbole. Die inneren Elemente <foreground>, <background> und <monochrome> unterstützen das Attribut android:drawable.

Das folgende Beispiel zeigt, 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" />

    // 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 auch Drawables als Elemente definieren, indem du sie in die Elemente <foreground>, <background> und <monochrome> einschließt. Das folgende Snippet zeigt ein Beispiel dafür, wie das mit einem Drawable im Vordergrund zu tun ist.

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

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

Weitere Informationen zum Implementieren adaptiver Symbole finden Sie unter Adaptive Symbole implementieren. Weitere Informationen zu Tastenkombinationen findest du unter App-Tastenkombinationen.

Weitere Informationen

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