Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

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

Mit der Funktion „Dynamische Farben“, die in Android 12 eingeführt wurde, können Nutzer ihre Geräte so personalisieren, dass sie farblich zum Farbschema ihres persönlichen Hintergrundbilds passen oder eine ausgewählte Farbe im Hintergrundbild-Picker verwenden.

Sie können diese Funktion nutzen, indem Sie die DynamicColors API hinzufügen, mit der dieses Design auf Ihre App oder Aktivität angewendet wird, um die App für den Nutzer zu personalisieren.

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

Auf dieser Seite finden Sie eine Anleitung zum Implementieren von dynamischen 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 Farbschemas

Android führt die folgenden Schritte aus, um Farbschemas aus dem Hintergrundbild 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 weitere Hauptfarben zu extrapolieren: bekannt als Primär, Sekundär, Tertiär, Neutral und Neutrale Variante.

Abbildung 2. Beispiel für die Farbextraktion aus einem Hintergrundbild und die Extraktion von fünf Hauptfarben
Das System interpretiert jede Hauptfarbe in eine tonale Palette mit 13 Farbtönen.

Abbildung 3. Beispiel für das Generieren einer bestimmten tonalen Palette
Das System verwendet dieses einzelne Hintergrundbild, um fünf verschiedene Farbschemas abzuleiten, die die Grundlage für alle hellen und dunklen Designs bilden.

So werden Farbvarianten auf dem Gerät eines Nutzers angezeigt

Nutzer können ab Android 12 Farbvarianten aus den aus dem Hintergrundbild extrahierten Farben und verschiedenen Designs auswählen. In Android 13 wurden weitere Varianten hinzugefügt. Ein Nutzer mit einem Pixel-Smartphone mit Android 13 kann beispielsweise eine Variante in den Einstellungen für Hintergrund &Stil auswählen, wie in Abbildung 4 dargestellt.

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

In Android 12 wurde die Variante Tonal Spot hinzugefügt, gefolgt von den Varianten Neutral, Vibrant Tonal und Expressive in Android 13. Jede Variante hat ein eigenes Rezept, mit dem die Ausgangsfarben des Hintergrundbilds eines Nutzers durch Lebendigkeit und Drehen des Farbtons transformiert werden. Im folgenden Beispiel wird ein einzelnes Farbschema durch diese vier Farbvarianten dargestellt.

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

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

Erste Schritte mit Ansichten

Sie können dynamische Farben auf App- oder Aktivitätsebene anwenden. Rufen Sie dazu applyToActivitiesIfAvailable() auf, um ein ActivityLifeCycleCallbacks für Ihre 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 mit Tokens erstellen

Dynamische Farben nutzen Design-Tokens, um die Zuweisung von Farben zu verschiedenen UI-Elementen zu optimieren und zu vereinheitlichen. Mit einem Design-Token können Sie verschiedenen Elementen einer UI semantisch Farbrollen zuweisen, anstatt einen festgelegten Wert. Dadurch wird das tonale System Ihrer App flexibler, skalierbarer und einheitlicher. Das ist besonders nützlich, wenn Sie helle und dunkle Designs sowie dynamische Farben verwenden.

Die folgenden Snippets zeigen Beispiele für helle und dunkle Designs sowie 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>

Farb-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 in Material 3.
Informationen zum Generieren der Grundfarbpalette sowie der Farben und des Designs Ihrer App finden Sie im Material Theme Builder, der über ein Figma-Plug-in oder im Browser verfügbar ist.
Weitere Informationen dazu, wie Farbschemas die Barrierefreiheit Ihrer App verbessern können, finden Sie auf der Material 3-Seite zu r Barrierefreiheit des Farbsystems.

Benutzerdefinierte oder Markenfarben beibehalten

Wenn Ihre App benutzerdefinierte oder Markenfarben enthält, die Sie nicht an die Einstellungen des Nutzers anpassen möchten, können Sie sie einzeln hinzufügen, während Sie Ihr Farbschema erstellen. 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, die Ihr Farbschema erweitern, und so ein einheitliches Farbsystem erstellen. Verwenden Sie bei dieser Option HarmonizedColors, um den Farbton benutzerdefinierter Farben zu ändern. So wird in Kombination mit von Nutzern generierten Farben ein visuelles Gleichgewicht und ein barrierefreier Kontrast erzielt. Dies geschieht zur Laufzeit mit applyToContextIfAvailable().

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

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

Dynamische Farben auf adaptive Symbole und Widgets anwenden

Sie können nicht nur das Design mit dynamischen Farben in Ihrer App aktivieren, sondern ab Android 12 auch das Design mit dynamischen Farben für Widgets und ab Android 13 für adaptive Symbole unterstützen.