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 in der Hintergrundauswahl ausgewählte Farbe angepasst werden.

Du kannst diese Funktion nutzen, indem du die DynamicColors API hinzufügst, mit der das Thema auf deine App oder Aktivitäten angewendet wird, um die App für den Nutzer zu personalisieren.

Abbildung 1. Beispiele für Tonwerte, die von verschiedenen Hintergründen abgeleitet wurden

Auf dieser Seite finden Sie eine Anleitung zur Implementierung 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 wird. Sie können auch das Codelab ausprobieren.

Wie Android Farbschemata erstellt

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

  1. Das System erkennt die Hauptfarben im ausgewählten Hintergrundbild und extrahiert eine Quellfarbe.

  2. Das System verwendet diese Quellfarbe, um fünf Schlüsselfarben, die als Primär, Sekundär, Tertiär, Neutral und Neutrale Variante bezeichnet werden, weiter zu extrapolieren.

    Beispiel für die Extraktion von Quellfarben
    Abbildung 2. Beispiel für die Extraktion der Quellfarbfarbe aus dem Hintergrundbild und die Extraktion in fünf Schlüsselfarben

  3. Das System interpretiert jede Tastenfarbe in eine Tonpalette mit 13 Tönen.

    Beispiel für das Generieren einer bestimmten Tonpalette
    Abbildung 3. Beispiel für das Generieren einer bestimmten Tonpalette

  4. Das System leitet aus diesem einzelnen Hintergrund fünf verschiedene Farbschemas ab, 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 aus Hintergründen extrahierten Farben und verschiedenen Designs auswählen. In Android 13 werden weitere Varianten hinzugefügt. Ein Nutzer mit einem Pixel mit Android 13 würde beispielsweise eine Variante aus den Einstellungen unter Hintergrund & Stil auswählen, wie in Abbildung 4 gezeigt.

Abbildung 4: Farbvarianten in den Hintergrundeinstellungen auswählen (auf Pixel angezeigt)

In Android 12 wurde die Variante Tonal Spot hinzugefügt, gefolgt von den Varianten Neutral, Vibrant Tonal und Expressive. Jede Variante hat ein individuelles Rezept, das die Seed-Farben des Hintergrunds eines Nutzers durch Lebendigkeit und Rotieren des Farbtons transformiert. Das folgende Beispiel zeigt ein einzelnes Farbschema, das durch diese vier Farbvarianten ausgedrückt wird.

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

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

Erste Schritte mit „Schreiben“

Wenn Sie Ihre UI mit „Compose“ erstellen, finden Sie unter Material Theming in Compose Informationen zum Anwenden von dynamischen Farben auf Ihre App.

Einführung in Views

Dynamische Farben lassen sich auf App- oder Aktivitätsebene anwenden. Rufen Sie dazu applyToActivitiesIfAvailable() auf, um ein ActivityLifeCycleCallbacks-Objekt in Ihrer 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

„Dynamic Color“ nutzt Designtokens, um die Zuweisung von Farben zu verschiedenen UI-Elementen zu optimieren und einheitlicher zu gestalten. Mit einem Designtoken können Sie verschiedenen Elementen einer UI Farbrollen zuweisen, anstatt einen Wert festzulegen. Dadurch erhält das Tonsystem Ihrer App mehr Flexibilität, Skalierbarkeit und Konsistenz. Dies ist besonders beim Design für helle und dunkle Designs sowie für dynamische Farben nützlich.

Die folgenden Snippets zeigen Beispiele für helle und dunkle Designs und eine entsprechende Farb-XML 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 zum Generieren von Tokens findest du auf der Material 3-Seite Dynamische Farbe.

  • Wenn Sie die Basisfarbvorlage und die Farben und das Design Ihrer App generieren möchten, sehen Sie sich den Material Theme Builder an, der über ein Figma-Plug-in oder in einem Browser verfügbar ist.

  • Weitere Informationen dazu, wie die Verwendung von Farbschemas die Barrierefreiheit in deiner App verbessern kann, findest du auf der Seite „Material 3“ zur Barrierefreiheit im Farbsystem.

Benutzerdefinierte Farben oder Markenfarben beibehalten

Wenn Ihre App benutzerdefinierte Farben oder Markenfarben hat, die Sie nicht mit den Präferenzen des Nutzers ändern möchten, können Sie diese beim Erstellen des 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 für diese Option HarmonizedColors, um den Ton von benutzerdefinierten Farben zu ändern. Dies sorgt in Kombination mit von Nutzern erstellten Farben für eine visuelle Ausgewogenheit und einen barrierefreien Kontrast. Sie erfolgt zur Laufzeit mit applyToContextIfAvailable().

Abbildung 6. Beispiel für die Harmonisierung benutzerdefinierter Farben

Sieh dir den Leitfaden von Material 3 zur Vereinheitlichung benutzerdefinierter Farben an.

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