The Android Developer Challenge is back! Submit your idea before December 2.

Adaptive Symbole

Mit Android 8.0 (API-Ebene 26) werden adaptive Launcher-Symbole eingeführt. Damit können verschiedene Formen auf unterschiedlichen Gerätemodellen angezeigt 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 bietet eine Maske, die vom System dafür verwendet wird, alle adaptiven Symbole mit derselben Form zu rendern. Adaptive Launcher-Symbole werden auch in Verknüpfungen, in der App "Einstellungen", in Dialogfeldern zum Teilen und auf dem Übersichtsbildschirm genutzt.

Auf den Wireframe eines adaptiven Symbols werden verschiedene Masken angewendet. Auf ein adaptives Symbol werden verschiedene Masken angewendet.

Abbildung 1. Adaptive Symbole unterstützen verschiedene Masken, die sich von Gerät zu Gerät unterscheiden.

Du kannst das Aussehen deines adaptiven Launcher-Symbols anpassen, indem du zwei Ebenen definierst – eine für den Vordergrund und eine für den Hintergrund. Symbolebenen müssen als Drawables ohne Masken oder Hintergrundschatten entlang des Symbolrands bereitgestellt werden.

Isometrische Darstellung der Erstellung eines adaptiven Symbols

Abbildung 2. Adaptive Symbole werden mithilfe von zwei Ebenen und einer Maske definiert.

In Android 7.1 (API-Ebene 25) und früheren Versionen hatten Launcher-Symbole eine Größe von 48 x 48 dp. Nun musst du die Größe der Symbolebenen anpassen. Dabei gilt Folgendes:

  • Beide Ebenen müssen eine Größe von 108 x 108 dp haben.
  • Die inneren 72 x 72 dp des Symbols werden im maskierten Darstellungsbereich angezeigt.
  • Die äußeren 18 dp auf jeder der vier Seiten werden durch das System reserviert, um interessante visuelle Effekte zu erzeugen, z. B. einen Parallaxeneffekt oder ein Pulsieren.

Hinweis: Animierte visuelle Effekte werden von unterstützten Launchern generiert. Visuelle Effekte können sich von einem Launcher zum anderen unterscheiden.

Achtung: Ein Geräte-OEM kann eine Maske mit einem Radius angeben, der entlang bestimmter Punkte der Form nur 33 dp beträgt.

Demo der Anwendung eines Parallaxeneffekts auf ein adaptives Symbol Demo der Anwendung eines Pulseffekts auf ein adaptives Symbol

Abbildung 3. Adaptive Symbole unterstützen verschiedene visuelle Effekte.

Achtung: Wenn du dein Launcher-Symbol nicht mit den erforderlichen Ebenen aktualisierst, passt es optisch nicht zu den anderen Symbolen der System-UI und unterstützt keine visuellen Effekte.

Informationen zum Erstellen adaptiver Symbole mit Android Studio findest du unter App-Symbole mit Image Asset Studio erstellen.

Adaptive Symbole in XML erstellen

Wenn du einer App über XML ein adaptives Symbol hinzufügen möchtest, aktualisiere zuerst das Attribut android:icon im App-Manifest, um eine Drawable-Ressource anzugeben. Du kannst auch mit dem Attribut android:roundIcon eine Symbol-Drawable-Ressource definieren. Das Attribut android:roundIcon darf nur verwendet werden, falls du ein anderes Symbol-Asset für kreisförmige Masken brauchst – z. B. wenn dein Logo aus Branding-Gründen kreisförmig sein soll. Im folgenden Code-Snippet werden diese beiden Attribute verwendet:

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

Als Nächstes musst du in res/mipmap-v26/ic_launcher.xml für deine App alternative Drawable-Ressourcen zur Verwendung unter Android 8.0 (API-Ebene 26) erstellen. Anschließend kannst du mithilfe des Elements <adaptive-icon> für deine Symbole die Drawables für die Vorder- und die Hintergrundebene definieren. Die inneren Elemente <foreground> und <background> unterstützen beide das Attribut android:drawable.

    <?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" />
    </adaptive-icon>
    

Du kannst die Hintergrund- und Vordergrund-Drawables auch als Elemente definieren, indem du sie in die Elemente <foreground> und <background> einschließt.

Wenn du auf deine Verknüpfungen dieselbe Maske und dieselben visuellen Effekte wie auf die regulären adaptiven Launcher-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 zu Verknüpfungen findest du unter App-Verknüpfungen.

Weitere Informationen

Mehr über das Entwerfen und Implementieren adaptiver Symbole kannst du in dieser Artikelreihe vom Google-Designer und -Entwickler Nick Butcher erfahren: