Diese Seite wurde von der Cloud Translation API übersetzt.

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

Mit der Funktion „Dynamische Farben“, die mit Android 12 eingeführt wurde, können Nutzer ihre Geräte so personalisieren, dass sie farblich zum Farbschema ihres persönlichen Hintergrunds oder zu einer ausgewählten Farbe in der Hintergrundauswahl passen.

Sie können diese Funktion nutzen, indem Sie die DynamicColors API hinzufügen. Dadurch wird diese Thematik auf Ihre App oder Aktivität angewendet, um Ihre App für den Nutzer persönlicher zu gestalten.

**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 Farbschemata 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
Anhand dieses einzelnen Hintergrunds werden fünf verschiedene Farbschemata abgeleitet, die die Grundlage für alle hellen und dunklen Designs bilden.

Wie Farbvarianten auf dem Gerät eines Nutzers angezeigt werden

Ab Android 12 können Nutzer Farbvarianten aus dem Hintergrund 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

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

Erste Schritte mit „Aufrufe“

Sie können die dynamische Farbe 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 das Design dann 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 Designs und eine entsprechende Farb-XML-Datei nach dem Anwenden von dynamischen Farb-Tokens.

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.
Mit dem Material Theme Builder, der über ein Figma-Plug-in oder im Browser verfügbar ist, können Sie die Basisfarbvorlage sowie 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 nicht nur die dynamische Farbgebung für Ihre App aktivieren, sondern auch für Widgets ab Android 12 und für adaptive Symbole ab Android 13.