Material You-Design

Ab Android 12 liegt der Schwerpunkt des Material You-Designs auf Ausdruck und Fluidität im Android-Betriebssystem. Ziel ist es, Nutzern zu helfen, eine einheitliche, auf ihre Bedürfnisse zugeschnittene Oberfläche zu erstellen und zu nutzen. Als Android-Partner empfehlen wir dir, Material You Design in den folgenden Bereichen in deine Android-Geräte zu integrieren:

  • Dynamische Farben
  • Bewegung
  • Widgets

Dynamische Farben

Dynamische Farben sind das Herzstück von Material You und ein wichtiger Bestandteil der mehrjährigen Strategie von Android, um seinen Nutzern einfachere und umfassendere Anpassungen zu ermöglichen, die dies bei keinem anderen Gerät der Fall ist. Material You bietet:

  • Nutzern und Entwicklern eine einheitliche, umfassende Personalisierung auf jedem Android-Gerät bieten.

  • Android-OEMs haben die Gelegenheit, System-UI und eigene Apps weiter zu entwickeln, und zwar im Einklang mit ihrer Hardware und ihrer Markenfarbe, ‐marke und ‐form.

Wenn du dynamische Farben nutzen möchtest, nutze die „Material You“-Story von Android 12 zur Farbextraktion als wichtigen Bestandteil deines Softwareangebots für Nutzer. Verwenden Sie auf dem Gerät die Farbextraktionslogik aus AOSP, insbesondere die Logik, die eine einzelne Hintergrund- oder Designquelle annimmt und über 65 Farb-APIs ausgibt. Informationen zu den Anforderungen für dynamische Farben finden Sie unter Dynamische Farben verwenden.

Der vollständige dynamische Farbablauf umfasst vier Schritte, wie unten dargestellt:

Material You-Farbverlauf

Abbildung 1. Dynamischer Farbverlauf in Material You

  1. Der Nutzer ändert den Hintergrund oder das Design über die OEM-Auswahl.

  2. Der Nutzer wählt eine der folgenden Optionen aus:

    • Gerätedesign Wenn diese Option ausgewählt ist, wählt Android automatisch eine einzelne Quellfarbe aus, die den Anforderungen entspricht.

    • Neuer Hintergrund und neues Design Wenn diese Option ausgewählt ist, wählt die AOSP-Logik automatisch eine einzelne Quellfarbe aus dem ausgewählten Hintergrund aus.

  3. AOSP erweitert die einzelne Quellfarbe gemäß der AOSP-Logik in 5 Tonpaletten mit jeweils 13 Tonvarianten, die dann die 65 Farbattribute ausfüllen.

  4. In der App-UI werden die 65 Farbattribute so verwendet, dass sie in der gesamten Android-App-Umgebung einheitlich sind. Wir empfehlen, dieselbe Farbpalette für die System-UI des Geräts und OEM-spezifische Apps zu verwenden.

Android 12-Patches

Füge die folgenden Patches in deine Android 12-Implementierung ein, um die End-to-End-Logik für die Extraktion von Hintergrundfarben zu erhalten und das Gerät die 65-Farben-APIs entsprechend der Umgebung füllen zu können:

Benutzerdefinierte Farben in der ThemePicker angeben

Wenn du die AOSP ThemePicker-App verwendest, wird in der BackgroundPicker-App der Farbabschnitt angezeigt, wenn beide der folgenden Bedingungen erfüllt sind:

  • flag_monet am frameworks/base/packages/SystemUI/res/values/flags.xml ist true.
  • Ein Stub-APK des Systems mit dem Paketnamen ist in der Datei themes_stub_package in der Datei packages/apps/ThemePicker/res/values/override.xml definiert.

Stub-APK-Format

Eine Beispielversion dieses APK findest du unter packages/apps/ThemePicker/themes.

Dieses APK sollte nur Ressourcen enthalten, die die verfügbaren Grundfarben und ihre Namen angeben.

Der Stub sollte eine XML-Datei unter res/xml im folgenden Format enthalten:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <array name="color_bundles">
        <item>color1</item>
        <item>color2</item>
        <item>color3</item>
        <item>color4</item>
    </array>

    <string name="bundle_name_color1">Blue</string>
    <string name="bundle_name_color2">Red</string>
    <string name="bundle_name_color3">Yellow</string>
    <string name="bundle_name_color4">Green</string>

</resources>

In dieser Datei hat jede item innerhalb von color_bundles einen eindeutigen Namen, solange die folgenden Strings den Namen bundle_name_item haben.

Für jede Farbe sollte ein bundle_name_item-String mit einem aussagekräftigen Namen für jede Farbe vorhanden sein. Sie können diese übersetzen, indem Sie die entsprechenden übersetzten Strings in die res/values-language code-Verzeichnisse einfügen.

Die tatsächlichen Farbwerte können sich entweder in derselben XML-Datei oder in einer separaten Ressourcen-XML-Datei mit dem folgenden Format befinden:

<resources>
    <color name="color_primary_color1">#0000FF</color>
    <color name="color_secondary_color1">#0000FF</color>

    <color name="color_primary_color2">#ff0000</color>
    <color name="color_secondary_color2">#ff0000</color>

    <color name="color_primary_color3">#ffff00</color>
    <color name="color_secondary_color3">#ffff00</color>

    <color name="color_primary_color4">#00ff00</color>
    <color name="color_secondary_color4">#00ff00</color>
</resources>

Für jeden Artikel im Array „color_bundles“ sollte ein color_primary_item- und ein color_secondary_item-Eintrag vorhanden sein. Beide Farben müssen dieselbe Farbe haben. Die Werte für diese color-Einträge sind die tatsächlichen Farbcodes für jede Farbe, die im Bereich Grundfarbe angezeigt werden soll.

Schritt 1: Nutzerthemen erstellen

In der Themenauswahl können Nutzer die neuen Personalisierungsfunktionen von Material You nutzen und zwischen Farboptionen oder -vorlagen wählen. Da es zu Ihrem Produkt und zu den demografischen Merkmalen der Nutzer passt, können Sie Nutzern mithilfe einer Designauswahl oder einer Hintergrundauswahl mehr Personalisierungs- und Farboptionen bieten.

  • Bei Verwendung einer Hintergrundauswahl ist die Farbextraktion für den Hintergrund standardmäßig aktiviert. Sie können die Auswahl jedoch anpassen, um den Nutzern mehr Optionen zur Verfügung zu stellen.

Schritt 2: Hintergrundfarbe in eine Quellfarbe extrahieren

Um die Extraktion von Hintergrundfarben zu aktivieren, wählen Sie die oben aufgeführten Android 12-Patches aus. Diese Funktion wird in einer zukünftigen AOSP-Version standardmäßig aktiviert sein. Die AOSP-Logik, die die Hintergrundextraktion auslöst, beginnt bei frameworks/base/packages/SystemUI/src/com/android/systemui/theme/ThemeOverlayController.java, ThemeOverlayController#mOnColorsChangedListener und WallpaperManager#onWallpaperColorsChanged. Wir empfehlen die Verwendung der unveränderten AOSP-Logik, um eine einheitliche Entwicklungsumgebung zu gewährleisten.

Standardmäßig wählt die Logik die Farbe mit der höchsten Häufigkeit aus, die sich für die Verwendung eignet. Mit ColorScheme#getSeedColors(wallpaperColors: WallpaperColors) können Sie andere vom Algorithmus zurückgegebene Quellfarben nutzen und Nutzern in der Designauswahl präsentieren.

Damit eine Quellfarbe verwendet werden kann, muss sie (unabhängig davon, ob sie aus einem Hintergrund oder einer vom Nutzer ausgewählten Voreinstellung extrahiert wurde) einen CAM16-Chromawert von mindestens 5 haben. So wird sichergestellt, dass die Quellfarbe nicht von subtilen dunklen Tönen beeinflusst wird, wenn sie von einer einzelnen Farbe in 65 Tonfarben umgewandelt wird, und sie bleibt repräsentativ für die Auswahl des Nutzers. Verwenden Sie Cam#fromInt oder Cam#getInt, um Farben in CAM16 zu lesen und zu ändern.

Nicht dynamische Farbpalette verwenden Auf Geräten, die die Farbextraktion aus dem Hintergrund nicht unterstützen, können Sie dennoch dafür sorgen, dass Google-Apps und Drittanbieter-Apps, die dynamische Farben unterstützen, gut aussehen. Gehen Sie dazu so vor:

  • Verwenden Sie die Standard-Materialpalette, indem Sie flag_monet auf frameworks/base/packages/SystemUI/res/values/flags.xml deaktivieren.
  • Sorgen Sie dafür, dass Nutzer weiterhin ihr Betriebssystem mit einer voreingestellten Designauswahl personalisieren können.

Schritt 3: Quellfarbe auf Farb-APIs ausweiten

Anhand der aus dem vorherigen Schritt abgeleiteten einzelnen Quellfarbe generiert Android fünf einzigartige Farbpaletten (Akzent 1–3, neutral 1–2), jede Palette mit 13 Farben und jede Farbe mit unterschiedlichen Leuchtdichtewerten (0 bis 1.000), insgesamt also 65 Farben. Die Logik in den Android 12-Patches implementiert diese Farberweiterung korrekt. Die folgenden Details beschreiben die Implementierung.

Für Entwicklerkonsistenz müssen die fünf Farbpaletten (Akzent 1, Akzent 2, Akzent 3, Neutral 1, Neutral 2) und die zugehörigen 13 Farben auf der einzelnen Quellfarbe basieren. Dabei müssen die Werte für den Farbton und die Farbsättigung von CAM16 entsprechend geändert werden.

  • system_accent1

    • Chroma: Verwenden Sie "40" für Farbvarianten, die auf 0, 10, 50 und 100 enden, andernfalls "48".
    • Farbton: wie bei der Quelle

  • system_accent2

    • Chroma: „16“ verwenden
    • Farbton: wie bei der Quelle

  • system_accent3

    • Chroma: „32“ verwenden
    • Farbton: um 60 Grad drehen

  • system_neutral1

    • Chroma: „4“ verwenden
    • Farbton: wie bei der Quelle

  • system_neutral2

    • Chroma: „8“ verwenden
    • Farbton: wie bei der Quelle

CTS enthält Tests zur Validierung von Luminanz- und Farbton-API-Aufrufen. Verwenden Sie atest SystemPalette, um den Befehl auszuführen.

Schritt 4: Dynamische Farben in Apps und in der Systemoberfläche verwenden

Nachdem dynamische Farben auf einem Gerät festgelegt wurden, verwenden Apps die Farben gemäß den Material Design-Richtlinien. Die Material Design-Richtlinien für Drittanbieter-Apps werden bis zum 26. Oktober 2021 auf material.io veröffentlicht. Für die Systemoberfläche und die Apps von Google empfehlen wir dringend, dynamische Farben in die gesamte Benutzeroberfläche einzubinden, sodass sie zu Ihrer Hardware und Marke passen und Sie Ihre Geräte so besser von anderen unterscheiden können.

Allgemeine Informationen zu dynamischen Farben:

  • Verwenden Sie Akzentfarben für Vordergrundelemente in Apps und der System-UI:

    @android:color/system_accent1_0 … 1000 // most-used foreground color group
@android:color/system_accent2_0 … 1000 // alternate accent, used for surfaces
@android:color/system_accent3_0 … 1000 // playful, analogous color

  • Verwenden Sie neutrale Farben für Hintergrundelemente in Apps und in der Systemoberfläche:

    @android:color/system_neutral1_0 … 1000 // most-used background color group
@android:color/system_neutral2_0 … 1000 // used for higher-elevation surfaces

Weitere Informationen dazu, wie Farben in Material You zugeordnet und APIs in der SysUI verwendet werden, finden Sie unter Zusätzliche Ressourcen.

Schritt 5: Dynamische Farboptionen in die AOSP BackgroundPicker-Implementierung einfügen

Für Android 13 und höher erstellen

Ab Android 13 wird android.theme.customization.accent_color nicht mehr unterstützt. Es wird ein neues Attribut android.theme.customization.theme_style hinzugefügt, um verschiedene Farbvarianten zu unterstützen. Derzeit gibt es vier Varianten in der Codebasis:

TONAL_SPOT = Default Material You theme since Android S.
VIBRANT = Theme where accent 2 and 3 are analogous to accent 1.
EXPRESSIVE = Highly chromatic theme.
SPRITZ = Desaturated theme, almost grayscale.

Diese werden an Settings.Secure.THEME_CUSTOMIZATION_OVERLAY_PACKAGES gesendet, wie unten in JSON gezeigt:

{
    "android.theme.customization.system_palette":"B1611C",
    "android.theme.customization.theme_style":"EXPRESSIVE"
}

Für Android 12 und niedriger entwickeln

Wenn du eine benutzerdefinierte Themenauswahl verwendest, muss das Gerät eine gültige Quellfarbe an Settings.Secure.THEME_CUSTOMIZATION_OVERLAY_PACKAGES senden. Dazu muss eine JSON-Datei im folgenden Format bereitgestellt werden. Dabei ist 746BC1 ein Beispiel für eine gültige Quellfarbe:

{
      "android.theme.customization.system_palette":"746BC1",
      "android.theme.customization.accent_color":"746BC1"
}

Dadurch wird die Extraktion der Hintergrundfarbe (Schritt 2) übersprungen und die angegebene Quellfarbe wird direkt in 65 Farbattribute erweitert (Schritt 3).

Schritt 6: Supportticket einreichen

Neben der Systemintegration musst du ein Ticket einreichen und uns deinen Markennamen (Build.MANUFACTURER) mitteilen. Da die meisten Drittanbieter-Apps die Material Components for Android zum Anzeigen dynamischer Farben verwenden, verwenden wir eine hartcodierte Zulassungsliste, um festzustellen, auf welchen Geräten die Funktion Dynamische Farbpaletten integriert ist.

Bewegung

Durch flüssige Bewegungen wirken Geräte modern und hochwertig. Um das Vertrauen und die Zufriedenheit der Entwickler zu stärken und aufrechtzuerhalten, sind Overscroll und Welleneffekt zwei wichtige Elemente der flüssigen Bewegung, die einheitlich aussehen und sich anfühlen müssen.

Overscroll in Ihrem Betriebssystem verwenden

Android 12 bietet eine reaktionsschnellere, dynamischere Überscroll-Bewegung in Form einer Ansichtsdehnung, die angezeigt wird, wenn der Nutzer versucht, über den Rand einer Liste hinauszuscrollen. Hier ein Beispiel:

Material You-Overscroll

Abbildung 2. Überlaufeffekt von Android 12, wie in den Einstellungen dargestellt

Achten Sie darauf, dass der Overscroll-Effekt auf Ihren Geräten einheitlich ist und in etwa so aussieht:

  • Auf Geräten, die für ActivityManager.isHighEndGfx() „wahr“ zurückgeben, ist der Overscroll-Effekt eine nicht lineare Streckung des Bildschirms (wie oben gezeigt).

  • Auf Geräten mit geringerer Leistung wird der Stretch-Effekt vereinfacht, um die Belastung des Systems zu reduzieren.

Overscroll in eigenen Apps verwenden

Wenn Sie benutzerdefinierte Ansichten verwenden, müssen Sie möglicherweise einige Apps und die System-UI anpassen, die den Streckungseffekt verwenden.

  • Aktualisieren Sie auf die neuesten Bibliotheken, um das Überblenden beim Scrollen zu unterstützen:

    • androidx.recyclerview:recyclerview:1.3.0-alpha01 für RecyclerView
    • androidx.core:core:1.7.0-alpha01 für NestedScrollView und EdgeEffectCompat
    • androidx.viewpager:viewpager:1.1-alpha01 für ViewPager

  • Für benutzerdefinierte Layouts, in denen EdgeEffect verwendet wird, sollten Sie die folgenden UX-Änderungen berücksichtigen:

    • Beim Stretch-Overscroll sollten Nutzer nicht mit dem Inhalt des Layouts interagieren, während es gestreckt wird. Nutzer sollten nur die Streckkurve selbst bearbeiten können und nicht beispielsweise eine Schaltfläche im Inhalt drücken.

    • Wenn Nutzer die Inhalte während der EdgeEffect-Animation berühren, sollte die Animation angehalten werden und sie sollten die Streckung steuern können. Der aktuelle Pull-Wert ist unter EdgeEffectCompat.getDistance() verfügbar.

    • Wenn du den Pull-Wert manipulieren und den verbrauchten Betrag zurückgeben möchtest, verwende onPullDistance(). So können Entwickler einen reibungslosen Übergang vom Strecken zum Scrollen ermöglichen, wenn der Nutzer den Inhalt über die Ausgangsposition hinaus dehnt.

    • Wenn Sie mit verschachteltem Scrollen arbeiten und die Inhalte gestreckt werden, sollte die Touch-Bewegung vor den verschachtelten Inhalten verarbeitet werden. Andernfalls wird beim Verändern der Fingerrichtung möglicherweise das Nesting gescrollt, anstatt die Streckung aufzuheben.

Weitere Informationen zum Überscrollen finden Sie unter Scrollgeste animieren.

Ripple (Touch-Feedback) in Ihrem Betriebssystem verwenden

Android 12 bietet eine weichere, subtilere Welle, um Nutzern beim Tippen Feedback zu geben.

Material You Ripple

Abbildung 3 Welleneffekt von Android 12 mit einer weicheren Füllanimation

Für eine gute Vorhersehbarkeit für Entwickler und eine hohe Nutzerfreundlichkeit sollten Sie dafür sorgen, dass die Auswirkungen auf Ihren Geräten dem oben gezeigten Beispiel ähneln. Sie müssen zwar keine speziellen Integrationsschritte ausführen, um die Auswirkungen zu unterstützen, sollten aber die Auswirkungen auf Ihren Geräten testen, um unerwünschte Rückschritte bei der Implementierung zu erkennen.

Widgets

Widgets sind die Hauptkomponenten eines Android-Geräts. Android 12 enthält neue APIs und API-Funktionen, die alle OEMs unterstützen sollten.

Weitere Informationen

Verwendung von SysUI-Farben

(accent1 = A1, accent2 = A2, accent3 = A3, neutral1 = N1, neutral2 = N2)

Material, das du verwendest

Abbildung 4 Dynamische Farbnutzung in der System-UI

Aktualisierungen des Farbattributs der Materialbibliothek

In der nächsten Version werden die Designattribute von Material aktualisiert. Dazu werden Farbrollen erstellt, mit denen bestimmte Ansichten eingefärbt werden.

Farbrolle Android-Designattribut Helles Design
Dynamische Farben		 Dunkles Design
Dynamische Farbe
Primär colorPrimär system_accent1_600 Systemakzent1_200
Im primären Bereich colorOnPrimary system_accent1_0 system_accent1_800
Zweiter Track FarbeSekundär system_accent2_600 system_accent2_200
Auf sekundärer Ebene colorOnSecondary system_accent2_0 system_accent2_800
Fehler colorError – (rot_600) – (rot_200)
Bei Fehler colorOnError – (weiß) – (rot_900)
Hintergrund android:colorBackground system_neutral1_10 system_neutral1_900
Im Hintergrund colorOnBackground system_neutral1_900 system_neutral1_100
Surface colorSurface system_neutral1_10 system_neutral1_900
Auf der Oberfläche colorOnSurface system_neutral1_900 system_neutral1_100

Die Statusattribute von Material werden mit den folgenden Hinweisen aktualisiert:

Farbrolle Android-Designattribut Helles Design
Dynamische Farben		 Dunkles Design
Dynamische Farbe
Inhalt des primären Zustands colorPrimaryStateContent system_accent1_700 system_accent1_200
Ebene mit primärem Status colorPrimaryStateLayer system_accent1_600 Systemakzent1_300
Inhalt des sekundären Zustands colorSecondaryStateContent system_accent2_700 Systemakzent2_200
Sekundäre Statusebene colorSecondaryStateLayer system_accent2_600 system_accent2_300
Inhalte des primären Status colorOnPrimaryStateContent system_accent1_0 system_accent1_800
Auf der primären Statusebene colorOnPrimaryStateLayer system_accent1_900 system_accent1_800
Inhalte für den sekundären Status colorOnsecondaryStateContent system_accent2_0 system_accent2_800
Auf sekundärer Statusebene colorOnSecondaryStateLayer system_accent2_900 system_accent2_800
Für Inhalt des primären Containerstatus colorOnPrimaryContainerStateContent system_accent1_900 system_accent1_900
Auf der Ebene des primären Containerstatus colorOnPrimaryContainerStateLayer system_accent1_900 system_accent1_900
Sekundärer Containerstatus colorOnSecondaryContainerStateContent system_accent2_900 system_accent2_900
Auf sekundärer Containerstatusebene colorOnSekundäreContainerStateLayer system_accent2_900 system_accent2_900
Inhalte zum Status von Tertiärcontainern colorOnTertiaryContainerStateContent system_accent3_900 system_accent3_900
Auf der Ebene des tertiären Containerstatus colorOnTertiaryContainerStateLayer system_accent3_900 system_accent3_900
Inhalte zum Status der Oberfläche colorOnSurfaceStateContent system_neutral1_900 system_neutral1_100
Ebene für den Oberflächenstatus colorOnSurfaceStateLayer systemneutral1_900 system_neutral1_100
Inhalt des Oberflächenvariantenstatus colorOnSurfaceVariantStateContent system_neutral2_700 system_neutral2_200
Ebene „Variantenstatus auf Oberfläche“ colorOnSurfaceVariantStateLayer system_neutral2_700 system_neutral2_200
Inhalt des Fehlerstatus colorErrorStateContent red800 red200

Häufig gestellte Fragen

Farbextraktion

Wird die Farbextraktion automatisch durchgeführt, sobald ein Nutzer einen Hintergrund ändert, oder muss sie irgendwo ausgelöst werden?

Mit den Android 12-Patches ist die Hintergrundfarbextraktion standardmäßig aktiviert.

ThemeOverlayController.java löst die Logik mit ThemeOverlayController#mOnColorsChangedListener und WallpaperManager#onWallpaperColorsChanged aus.

Können Sie uns bei Live-Hintergründen oder Video-Hintergründen sagen, wann die Farbextraktion die Farbe vom Display nimmt? Einige Nutzer möchten möglicherweise die Farben aus dem letzten Frame, da dieser am meisten angezeigt wird.

Die Farbextraktion wird ausgelöst, wenn der Nutzer den Hintergrund festlegt oder nach einem Ein-/Ausschalten des Bildschirms (als Reaktion auf WallpaperEngine#notifyColorsChanged). Das letzte WallpaperColors-Ereignis (vom Live-Hintergrund) wird angewendet, nachdem der Nutzer den Bildschirm aus- und wieder eingeschaltet hat.

Design-/Hintergrundauswahl

Wie kann ich festlegen, dass in der Designauswahl mehrere Quellfarben angezeigt werden, aus denen Nutzer auswählen können, anstatt nur die Farbe mit der höchsten Häufigkeit? Gibt es eine Möglichkeit, diese Farben aus der Extraktionslogik zu erhalten?

Ja. In der Designauswahl können Sie ColorScheme#getSeedColors(wallpaperColors: WallpaperColors) verwenden.

Es gibt eine Funktion in Pixel-Namen als Symbolsymbole. Ist es in den drei von Ihnen geteilten Patches enthalten? Wie können OEMs das umsetzen?

Nein. Thematische Symbole befinden sich in der Betaphase und sind in Android 12 nicht verfügbar.

Gibt es eine Möglichkeit, die Google-Hintergrund-App mit aktivierten Farbextraktions- und Auswahlfunktionen zu verwenden?

Ja. Die Funktionen können in der neuesten Version der Google Wallpaper App implementiert werden. Folgen Sie dazu der Anleitung oben auf dieser Seite.

Weitere Informationen erhalten Sie von Ihrem TAM.

Kann Google die App oder den Quellcode freigeben, damit OEMs eine eigene Version der dynamischen Farbvorschau in ihrem Einstellungsmenü implementieren können, die dem Vorschaubereich in der Hintergrundauswahl-App von Google ähnelt?

Die Hauptklassen, die die Vorschau rendern, sind WallpaperPicker2 und Launcher3.

Der Bildschirm mit der Hintergrundvorschau ist WallpaperSectionController.

Wie implementiere ich die Vorabversion nach dem Ändern der Farbe (wie in der Google Hintergründe App gezeigt)?

Die App „Hintergrundauswahl“ erwartet, dass ein ContentProvider über den Launcher verfügbar ist (ein Launcher3-basierter Launcher hat einen). Die Vorschau wird von GridCustomizationsProvider im Launcher bereitgestellt, auf den in den Metadaten der Hauptaktivität des Launchers verwiesen werden muss, damit der Hintergrund und die Stil-App sie lesen können. All dies ist im Launcher3 von AOSP implementiert und für die OEMs verfügbar.