Material You-Design

Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.

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 sollten Sie das Material You-Design in den folgenden Bereichen in Ihre Android-Geräte einbinden:

• Dynamische Farben
• Bewegung
• Widgets

Dynamische Farben

Dynamische Farben sind das Herzstück des Material You-Designs und ein wichtiger Bestandteil der mehrjährigen Strategie von Android, Nutzern eine einfachere und umfassendere Anpassung zu bieten, als es auf anderen Geräten möglich ist. Material You bietet:

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

• Android-OEMs haben die Möglichkeit, die System-UI und die Apps von Drittanbietern weiter zu optimieren, sodass sie zu ihrer Hardware und zu den Farben, Marken und Formen ihrer Produkte passen.

Wenn Sie dynamische Farben nutzen möchten, sollten Sie die Farbextraktionsmethode von Android 12 Material You als wichtigen Bestandteil Ihres Softwareangebots für Nutzer verwenden. Verwenden Sie auf dem Gerät die Farbextraktionslogik in AOSP, insbesondere die Logik, die eine einzelne Hintergrund- oder Themen-Quellfarbe einnimmt 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:

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. Die App-Benutzeroberfläche verwendet die 65 Farbattribute einheitlich im gesamten Android-App-Ökosystem. Wir empfehlen, dieselbe Farbpalette für die System-UI des Geräts und OEM-spezifische Apps zu verwenden.

Android 12-Patches

Wenn Sie die End-to-End-Logik für die Hintergrundfarbenextraktion erhalten und das Gerät die 65-Farben-APIs auf eine mit dem System konforme Weise ausfüllen lassen möchten, fügen Sie Ihrer Android 12-Implementierung die folgenden Patches hinzu:

• Obligatorisch

  • Monet zu AOSP hinzufügen
  • Chroma-/Lstar-Filter für Startfarben anpassen
  • Maximale Chroma bei Ton 90 verwenden

• Dringend empfohlen

  • Fehlerkorrektur bei der Festlegung von Boot-Farb-Sysprops.
  • Overlays über Designänderungen benachrichtigen lassen
  • Fehlerkorrektur bei der Festlegung von Boot-Farb-Sysprops (Runde 2)
  • Verschieben Sie Feature-Flags in das Flags-Paket.
  • Unterstützung für die Themengestaltung für mehrere Nutzer richtig implementieren
  • Problem behoben, bei dem die angegebene Hintergrundfarbe nach dem Neustart fehlte
  • Fehler beim Berechnen des tertiären Farbtons beheben
  • Hintergrund-Apps dürfen das Design nicht ändern

Benutzerdefinierte Farben in der ThemePicker angeben

Wenn Sie die AOSP ThemePicker App verwenden, wird in der WallpaperPicker App der Bereich „Farbe“ 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 finden Sie unter packages/apps/ThemePicker/themes.

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

Der Stub sollte unter res/xml eine XML-Datei mit folgendem 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 in 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 beschreibenden Namen 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.

• Wenn Sie eine Hintergrundauswahl verwenden, ist die Hintergrundfarbenextraktion 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

Wenn Sie die Farbe des Hintergrunds extrahieren möchten, wählen Sie die oben aufgeführten Android 12-Patches aus. Diese Funktion wird in einer zukünftigen AOSP-Version standardmäßig aktiviert. 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 wird die Farbe mit der höchsten Häufigkeit ausgewählt, die für die Verwendung geeignet ist. Wenn Sie andere vom Algorithmus zurückgegebene Quellfarben verwenden und diese Nutzern in der Themenauswahl präsentieren möchten, verwenden Sie ColorScheme#getSeedColors(wallpaperColors: WallpaperColors).

Damit eine Quellfarbe verwendet werden kann, muss sie (unabhängig davon, ob sie aus einem Hintergrundbild 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.
• Achten Sie darauf, dass Nutzer ihr Betriebssystem weiterhin mit einer voreingestellten Themenauswahl personalisieren können.

Schritt 3: Quellfarbe in Farb-APIs erweitern

Anhand der einzelnen Quellfarbe aus dem vorherigen Schritt 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: Geben Sie „40“ für Farbvarianten ein, 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 nach rechts drehen

• system_neutral1

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

• system_neutral2

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

CTS umfasst Tests zur Validierung von API-Aufrufen für Leuchtkraft und Farbton. Verwenden Sie atest SystemPalette, um den Befehl auszuführen.

Schritt 4: Dynamische Farben in Apps und in der System-UI 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 in 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 Ihrer AOSP WallpaperPicker-Implementierung hinzufü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 dargestellt:

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

Build für Android 12 und niedriger

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 müssen Sie ein Ticket erstellen und uns Ihren Markennamen (Build.MANUFACTURER) mitteilen. Da die meisten Drittanbieter-Apps die Material Components for Android verwenden, um dynamische Farben anzuzeigen, verwenden wir eine hartcodierte Zulassungsliste, um festzustellen, auf welchen Geräten die Funktion Dynamische Farbtonpaletten 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.

Überscrollen im 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:

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, wird der Overscroll-Effekt durch eine nicht lineare Streckung des Bildschirms erzeugt (siehe oben).

• Auf weniger leistungsstarken Geräten wird der Stretch-Effekt zu einem linearen Stretch vereinfacht, um die Belastung des Systems zu verringern.

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 Überscrollen mit Dehnung sollten Nutzer nicht mit dem Inhalt des Layouts interagieren, während es gedehnt wird. Nutzer sollten nur die Streckkurve selbst bearbeiten können und nicht beispielsweise eine Schaltfläche im Inhalt drücken.

  • Wenn Nutzer während der EdgeEffect-Animation auf den Inhalt tippen, 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.

Wippen (Touch-Feedback) in Ihrem Betriebssystem verwenden

Android 12 bietet eine weichere, subtilere Touch-Welle, um Nutzern beim Antippen Feedback zu geben.

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 wichtige Komponenten eines Android-Geräts. Android 12 enthält neue APIs und API-Funktionen, die alle OEMs unterstützen sollten.

• Unterstützen Sie in Ihrem Betriebssystem Entwickler-APIs für Widget-Layouts, ‑Größen und ‑Softwareparameter (z. B. Größe der abgerundeten Ecken). Ihre Implementierung sollte Widgets beim Bereitstellen von Parametern über APIs korrekt unterstützen und dafür sorgen, dass Widgets vom Nutzer skaliert und konfiguriert werden können.

• Nutzen Sie in Ihren Apps die neuen API-Funktionen, um nach Möglichkeit eigene Widgets zu aktualisieren oder neue zu erstellen. Gehen Sie für alle selbst erhobenen App-Widgets in Ihrem Zuständigkeitsbereich die folgende Checkliste für Entwickler durch.

  • Die Priorität basiert auf Empfehlungen der Plattform.
  • Klicken Sie in der Spalte „Änderung“ auf den Link, um Details zu einer Empfehlung aufzurufen.

  Area	Ändern	Implementierungspriorität
  Home-App verbessern	Skalierbare Vorschauen hinzufügen	P1
  	Beschreibung für das Widget hinzufügen	P1
  	Einfachere Personalisierung von Widgets	P2 (optional)
  	Für flüssigere Übergänge sorgen	P0
  	Übertragungstrampoline vermeiden	P0
  Richtlinien für Widgets übernehmen	Verbesserte Widget-Größen und ‑Layouts	P2
  	Dynamische Farben anwenden	P0
  	Abgerundete Ecken implementieren	P0
  	Neue zusammengesetzte Schaltflächen hinzufügen	P2
  Vorhandenen Widget-Code vereinfachen	RemoteView-Sammlungen vereinfachen	P2
  	RemoteView-Laufzeit vereinfachen	P2

Weitere Informationen

Verwendung von SysUI-Farben

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

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.

Die Statusattribute von Material werden mit den folgenden Hinweisen aktualisiert:

Häufig gestellte Fragen

Farbextraktion

Wird die Farbextraktion automatisch durchgeführt, sobald ein Nutzer einen Hintergrund ändert, oder muss sie von irgendwoher 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 bevorzugen möglicherweise die Farben aus dem letzten Frame, da dieser am häufigsten zu sehen ist.

Die Farbextraktion wird ausgelöst, wenn der Nutzer den Hintergrund festlegt oder nach einem Aus- und Einschalten 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 abzurufen?

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

Es gibt eine Funktion für Pixel-Namen, das Themensymbol. 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.

Kann ich die Google Wallpaper App mit aktivierten Funktionen zur Farbextraktion und -auswahl 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 ihre eigene Version der dynamischen Farbvorschau in ihrem Einstellungsmenü implementieren können, die dem Vorschaubereich in der Google-App „Hintergrundauswahl“ ähnelt?

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

Der Bildschirm mit der Hintergrundvorschau ist WallpaperSectionController.

Wie implementiere ich die Vorschau nach dem Ändern der Farbe, wie in der Google Wallpaper 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. Sie muss in den Metadaten der Hauptaktivität des Launchers referenziert werden, damit die App für Hintergrundbilder und Stile sie lesen kann. All dies ist im Launcher3 von AOSP implementiert und für die OEMs verfügbar.