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 Nutzern, ihre Geräte so zu personalisieren, dass sie entweder an das Farbschema ihres persönlichen Hintergrunds oder durch eine ausgewählte Farbe in der Hintergrundauswahl angepasst werden.

Wenn du diese Funktion nutzen möchtest, kannst du die DynamicColors API hinzufügen, die diese Themen auf deine App oder deine Aktivitäten anwendet, um die App für den Nutzer zu personalisieren.

**Abbildung 1.** Beispiele für tonale Farbschemata, 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 werden Farbschemata in Android erstellt

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.
Anhand dieser Quellfarbe werden fünf Hauptfarben extrapoliert, die als Primär, Sekundär, Tertiär, Neutral und Neutralvariante bezeichnet werden.

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

Abbildung 3. Beispiel für die Generierung einer bestimmten Farbpalette
Das System verwendet diesen einzelnen Hintergrund, um fünf verschiedene Farbschemata abzuleiten, die die Grundlage für alle hellen und dunklen Designs bilden.

Wie Farbvarianten auf dem Gerät eines Nutzers angezeigt werden

Nutzer können ab Android 12 Farbvarianten aus aus Hintergründen extrahierten Farben und verschiedenen Designs auswählen. 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 und Stil auswählen, wie in Abbildung 4 dargestellt.

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

In Android 12 wurde die Variante Ton in Ton hinzugefügt, gefolgt von den Varianten Neutral, Lebhaft und Ausdrucksstark in Android 13. Jede Variante hat ein eigenes Rezept, mit dem die Ausgangsfarben des Hintergrunds eines Nutzers durch Lebendigkeit und Farbtonänderung verändert werden. Das folgende Beispiel zeigt ein einzelnes Farbschema, das durch diese vier Farbvarianten ausgedrückt wird.

**Abbildung 5.** Beispiel für die Darstellung verschiedener Farbvarianten auf einem einzelnen Gerät

In deiner App werden weiterhin dieselben Tokens verwendet, um auf diese Farben zuzugreifen. Weitere Informationen zu Tokens finden Sie auf dieser Seite unter Design mithilfe von Tokens erstellen.

Erste Schritte mit „Aufrufe“

Dynamische Farben lassen sich auf App- oder Aktivitätsebene anwenden. Rufe dazu applyToActivitiesIfAvailable() auf, um eine ActivityLifeCycleCallbacks für deine 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);
  }
}

Fügen Sie als Nächstes das Design zu Ihrer App hinzu.

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

Design mithilfe von Tokens erstellen

Bei der dynamischen Farbzuweisung werden Design-Tokens verwendet, um die Zuweisung von Farben zu verschiedenen UI-Elementen zu optimieren und zu vereinheitlichen. Mit einem Design-Token können Sie verschiedenen Elementen einer Benutzeroberfläche semantisch Farbrollen statt eines festgelegten Werts zuweisen. So wird das Farbsystem Ihrer App flexibler, skalierbarer und konsistenter. Das ist besonders hilfreich, wenn Sie helle und dunkle Designs und dynamische Farben entwerfen.

Die folgenden Snippets zeigen Beispiele für helle und dunkle Themen sowie eine entsprechende Farb-XML-Datei nach dem Anwenden dynamischer Farbtokens.

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 dem Generieren von Tokens finden Sie auf der Seite Dynamische Farben von Material 3.
Mit dem Material Theme Builder, der über ein Figma-Plug-in oder im Browser verfügbar ist, können Sie die Basisfarbvorlage und die Farben und das Design Ihrer App generieren.
Weitere Informationen dazu, wie Sie mit Farbschemata die Barrierefreiheit Ihrer App verbessern können, finden Sie auf der Material 3-Seite 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 sie beim Erstellen Ihres Farbschemas einzeln hinzufügen. Beispiel:

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 mit dem Material Theme Builder zusätzliche Farben importieren, um Ihr Farbschema zu erweitern und so ein einheitliches Farbsystem zu erstellen. Verwenden Sie bei dieser Option HarmonizedColors, um den Farbton benutzerdefinierter Farben zu ändern. In Kombination mit von Nutzern erstellten Farben wird so ein visuelles Gleichgewicht und ein barrierefreier Kontrast erreicht. Sie tritt bei der Laufzeit mit applyToContextIfAvailable() auf.

**Abbildung 6.** Beispiel für die Abstimmung benutzerdefinierter Farben

Weitere Informationen finden Sie in der Anleitung zum Harmonisieren benutzerdefinierter Farben von Material 3.

Dynamische Farbe 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 unterstützen.