Diese Seite wurde von der Cloud Translation API übersetzt.

Ermögliche Nutzern, ihre Farbgebung in deiner App zu personalisieren

„Dynamic Color“ wurde in Android 12 hinzugefügt und ermöglicht es Nutzern, ihre Geräte so zu personalisieren, dass sie sich an das Farbschema ihres persönlichen Hintergrunds oder über eine ausgewählte Farbe aus der Hintergrundauswahl anpassen.

Sie können diese Funktion nutzen, indem Sie die DynamicColors API hinzufügen, die dieses Design auf Ihre App oder Aktivität anwendet, um Ihre App für den Nutzer individueller zu gestalten.

**Abbildung 1.** Beispiele für tonale Farbschemas, die aus verschiedenen Hintergründen abgeleitet wurden

Auf dieser Seite finden Sie eine Anleitung zum Implementieren dynamischer Farben in Ihrer App. Diese Funktion ist auch separat für Widgets und adaptive Symbole verfügbar, wie weiter unten auf dieser Seite beschrieben. Sie können auch das Codelab ausprobieren.

So erstellt Android Farbschemata

Android führt die folgenden Schritte aus, um Farbschemas aus dem Hintergrund eines Nutzers zu generieren.

Das System erkennt die Hauptfarben im ausgewählten Hintergrundbild und extrahiert eine Quellfarbe.
Das System verwendet diese Quellfarbe, um fünf Schlüsselfarben weiter zu extrapolieren, die als Primär, Sekundär, Tertiär, Neutral und Neutrale Variante bezeichnet werden.

Abbildung 2. Beispiel für die Extraktion der Quellfarbe aus dem Hintergrundbild und Extraktion auf fünf Hauptfarben
Das System interpretiert jede Schlüsselfarbe in eine Tonpalette von 13 Tönen.

Abbildung 3. Beispiel für das Generieren bestimmter Farbpaletten
Das System leitet daraus fünf verschiedene Farbschemata ab, die die Grundlage für alle hellen und dunklen Designs bilden.

Darstellung von Farbvarianten auf dem Gerät eines Nutzers

Ab Android 12 können Nutzer Farbvarianten aus Farben und verschiedenen Designs auswählen, die aus dem Hintergrund extrahiert wurden. In Android 13 werden weitere Varianten hinzugefügt. Ein Nutzer mit einem Pixel Smartphone mit Android 13 würde beispielsweise eine Variante in den Einstellungen unter Hintergrund & Stil auswählen, wie in Abbildung 4 dargestellt.

**Abbildung 4.** Farbvarianten in den Hintergrundeinstellungen auswählen (angezeigt auf einem Pixel-Gerät)

Unter Android 12 wurde die Variante Tonal Spot hinzugefügt, gefolgt von den Varianten Neutral, Vibrant Tonal und Ausdrucksstark unter Android 13. Jede Variante hat ein einzigartiges Rezept, das die Ausgangsfarben des Hintergrunds eines Nutzers durch Dynamik und Rotieren des Farbtons umwandelt. Das folgende Beispiel zeigt ein Einfarbschema, das durch diese vier Farbvarianten ausgedrückt wird.

**Abbildung 5.** Beispiel dafür, wie verschiedene Farbvarianten auf einem einzelnen Gerät aussehen

Deine App verwendet immer noch dieselben Tokens, um auf diese Farben zuzugreifen. Weitere Informationen zu Tokens finden Sie auf dieser Seite unter Design mit Tokens erstellen.

Erste Schritte mit der Funktion „Schreiben“

Wenn Sie Ihre UI mit Compose erstellen, finden Sie unter Material Theming in Compose Informationen zum Anwenden von Dynamic Color auf Ihre Anwendung.

Erste Schritte mit Views

Sie können dynamische Farben auf App- oder Aktivitätsebene anwenden. Rufe dazu applyToActivitiesIfAvailable() auf, um ein ActivityLifeCycleCallbacks-Element bei deiner App zu registrieren.

Kotlin

class MyApplication: Application() {
    override fun onCreate() {
        DynamicColors.applyToActivitiesIfAvailable(this)
    }
}

Java

public class MyApplication extends Application {
  @Override
  public void onCreate() {
    super.onCreate();
    DynamicColors.applyToActivitiesIfAvailable(this);
  }
}

Als Nächstes fügen Sie Ihrer App das Design hinzu.

<style
    name="AppTheme"
    parent="ThemeOverlay.Material3.DynamicColors.DayNight">
    ...
</style>

Design mit Tokens erstellen

Dynamic Color nutzt Designtokens, um die Zuweisung von Farben zu verschiedenen UI-Elementen zu vereinfachen und einheitlicher zu gestalten. Mit einem Designtoken können Sie verschiedenen Elementen einer UI semantisch Farbrollen zuweisen, statt einen festgelegten Wert festzulegen. Dadurch kann das Tonsystem Ihrer App flexibler, skalierbarer und konsistenter sein. Es ist besonders leistungsstark, wenn Sie helle und dunkle Designs sowie dynamische Farben entwerfen.

Die folgenden Snippets enthalten Beispiele für helle und dunkle Designs und eine entsprechende Farb-XML, nachdem dynamische Farbtokens angewendet wurden.

Helles Design

Themes.xml

<resources>
  <style name="AppTheme" parent="Theme.Material3.Light.NoActionBar">
    <item name="colorPrimary">@color/md_theme_light_primary</item>
    <item name="colorOnPrimary">@color/md_theme_light_onPrimary</item>
    <item name="colorPrimaryContainer">@color/md_theme_light_primaryContainer</item>
    <item name="colorOnPrimaryContainer">@color/md_theme_light_onPrimaryContainer</item>
    <item name="colorError">@color/md_theme_light_error</item>
    <item name="colorOnError">@color/md_theme_light_onError</item>
    <item name="colorErrorContainer">@color/md_theme_light_errorContainer</item>
    <item name="colorOnErrorContainer">@color/md_theme_light_onErrorContainer</item>
    <item name="colorOnBackground">@color/md_theme_light_onBackground</item>
    <item name="colorSurface">@color/md_theme_light_surface</item>
    <item name="colorOnSurface">@color/md_theme_light_onSurface</item>
    …..
  </style>
</resources>

Dunkles Design

Themes.xml

<resources>
  <style name="AppTheme" parent="Theme.Material3.Dark.NoActionBar">
    <item name="colorPrimary">@color/md_theme_dark_primary</item>
    <item name="colorOnPrimary">@color/md_theme_dark_onPrimary</item>
    <item name="colorPrimaryContainer">@color/md_theme_dark_primaryContainer</item>
    <item name="colorOnPrimaryContainer">@color/md_theme_dark_onPrimaryContainer</item>
    <item name="colorError">@color/md_theme_dark_error</item>
    <item name="colorOnError">@color/md_theme_dark_onError</item>
    <item name="colorErrorContainer">@color/md_theme_dark_errorContainer</item>
    <item name="colorOnErrorContainer">@color/md_theme_dark_onErrorContainer</item>
    <item name="colorOnBackground">@color/md_theme_dark_onBackground</item>
    <item name="colorSurface">@color/md_theme_dark_surface</item>
    <item name="colorOnSurface">@color/md_theme_dark_onSurface</item>
    ……
  </style>
</resources>

Farben-XML

Colors.xml

<resources>
  <color name="md_theme_light_primary">#6750A4</color>
  <color name="md_theme_light_onPrimary">#FFFFFF</color>
  <color name="md_theme_light_primaryContainer">#EADDFF</color>
  <color name="md_theme_light_onPrimaryContainer">#21005D</color>
  <color name="md_theme_light_error">#B3261E</color>
  <color name="md_theme_light_onError">#FFFFFF</color>
  <color name="md_theme_light_errorContainer">#F9DEDC</color>
  <color name="md_theme_light_onErrorContainer">#410E0B</color>
  <color name="md_theme_light_surface">#FFFBFE</color>
  <color name="md_theme_light_onSurface">#1C1B1F</color>
  <color name="md_theme_light_surfaceVariant">#E7E0EC</color>
  <color name="md_theme_dark_primary">#D0BCFF</color>
  <color name="md_theme_dark_onPrimary">#381E72</color>
  <color name="md_theme_dark_primaryContainer">#4F378B</color>
  <color name="md_theme_dark_onPrimaryContainer">#EADDFF</color>
  <color name="md_theme_dark_secondary">#CCC2DC</color>
  <color name="md_theme_dark_onSecondary">#332D41</color>
  <color name="md_theme_dark_secondaryContainer">#4A4458</color>
  <color name="md_theme_dark_onSurface">#E6E1E5</color>
  <color name="md_theme_dark_surfaceVariant">#49454F</color>
</resources>

Weitere Informationen:

Weitere Informationen zu dynamischen Farben, benutzerdefinierten Farben und zum Generieren von Tokens finden Sie auf der Seite Dynamische Farben von Material 3.
Um die Basisfarbpalette sowie die Farben und das Design Ihrer App zu generieren, verwenden Sie den Material Theme Builder, der über ein Figma-Plug-in oder im Browser verfügbar ist.
Weitere Informationen dazu, wie Sie mit Farbschemata die Barrierefreiheit Ihrer App verbessern können, finden Sie auf der Seite zu Material 3 zur Barrierefreiheit des Farbsystems.

Benutzerdefinierte oder Markenfarben beibehalten

Wenn Ihre App benutzerdefinierte oder Markenfarben hat, die Sie nicht mit den Einstellungen des Nutzers ändern möchten, können Sie diese beim Erstellen Ihres Farbschemas einzeln hinzufügen. Beispiele:

Themes.xml

<resources>
    <style name="AppTheme" parent="Theme.Material3.Light.NoActionBar">
        ...
        <item name="home_lamp">@color/home_yellow</item>
          ...
    </style>
</resources>

Colors.xml
<resources>
   <color name="home_yellow">#E8D655</color>
</resources>

Alternativ können Sie den Material Theme Builder verwenden, um zusätzliche Farben zu importieren, die Ihr Farbschema erweitern und so ein einheitliches Farbsystem erstellen. Bei dieser Option können Sie HarmonizedColors verwenden, um den Ton für benutzerdefinierte Farben zu ändern. In Kombination mit von Nutzern erstellten Farben werden so eine visuelle Ausgewogenheit und ein barrierefreier Kontrast erzielt. Sie erfolgt zur Laufzeit mit applyToContextIfAvailable().

**Abbildung 6.** Beispiel für das Harmonisieren benutzerdefinierter Farben

Weitere Informationen finden Sie in der Vereinheitlichung von benutzerdefinierten Farben von Material 3.

Dynamische Farben auf adaptive Symbole und Widgets anwenden

Sie können dynamische Farbdesigns nicht nur in Ihrer App aktivieren, sondern auch für Widgets ab Android 12 und für adaptive Symbole ab Android 13.