Adaptive Symbole

Überschrift „Adaptive Symbole“

Ein adaptives Symbol oder AdaptiveIconDrawable kann je nach den Gerätefunktionen und dem 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 genutzt werden. Adaptive Symbole werden für alle Android-Formfaktoren verwendet.

Im Gegensatz zu Bitmap-Bildern können sich adaptive Symbole an verschiedene Anwendungs fä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-Beispielsymbols, 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 im Kreis zuerst nach links und dann nach rechts und dann nach oben und unten wackelt. 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 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 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 Symboldesign angezeigt, sondern das adaptive oder Standard-App-Symbol:

    • Wenn der Nutzer keine Symboldesigns aktiviert.
    • Wenn deine App kein monochromatisches App-Symbol bereitstellt und auf dem Gerät des Nutzers eine ältere Android-Version als Android 16 QPR 2 ausgeführt wird.
    • Wenn der Launcher keine Symboldesigns 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.

    Ein 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, in dem das Symbol aus der vorherigen Abbildung auf eine kreisförmige Maske gelegt wird.
    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.

    Ein Beispiel für eine monochrome Symbol-Ebene (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 Farbvoransichten (rechts).

  • Lege für alle Ebenen die Größe 108 × 108 dp fest.

  • 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 zum Erstellen visueller Effekte wie Parallaxeneffekt oder Pulsieren reserviert.

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

Adaptives Symbol zur App hinzufügen

Adaptive Symbole werden wie nicht adaptive Symbole mit dem android:icon Attribut 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.

Der folgende Code-Snippet veranschaulicht beide Attribute. In den meisten Apps wird jedoch nur android:icon angegeben:

<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 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 <adaptive-icon> Element.
  • Rufe beim Erstellen dynamischer Verknüpfungen die createWithAdaptiveBitmap() Methode auf.

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