Diese Seite wurde von der Cloud Translation API übersetzt.

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

Mit der Funktion „Dynamic Color“, die in Android 12 hinzugefügt wurde, können Nutzer Geräte so gestalten, dass sie zum Farbschema ihres persönlichen Hintergrunds passen. oder über eine in der Hintergrundauswahl ausgewählte Farbe.

Sie können diese Funktion nutzen, indem Sie die DynamicColors API hinzufügen, die Diese Thematik wird auf deine App oder deine Aktivitäten angewendet, um die App stärker zu personalisieren für den Nutzer.

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

Diese Seite enthält Anweisungen zur Implementierung dynamischer Farben in Ihrer App. Diese Funktion ist auch separat für Widgets und adaptiven Symbolen, wie weiter unten auf dieser Seite beschrieben. Sie können auch das Codelab ausprobieren.

Wie Android Farbschemata erstellt

Android führt die folgenden Schritte aus, um Farbschemas aus dem Hintergrund.

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 bekannt als primär, sekundär, tertiär, neutral und neutral .
<ph type="x-smartling-placeholder">
</ph>
Abbildung 2. Beispiel für die Extraktion der Quellfarbfarbe aus dem Hintergrundbild und die Extraktion in fünf Schlüsselfarben
Das System interpretiert jede Tastenfarbe in eine Tonpalette mit 13 Tönen.
<ph type="x-smartling-placeholder">
</ph>
Abbildung 3. Beispiel für das Generieren einer bestimmten Tonpalette
Das System leitet aus diesem einen Hintergrund fünf verschiedene Farben ab, -Schemata, die die Grundlage für alle hellen und dunklen Themen bilden.

So werden Farbvarianten auf dem Gerät eines Nutzers angezeigt

Nutzende können Farbvarianten aus vom Hintergrund extrahierten Farben und verschiedenen Designs ab Android 12, weitere Varianten werden in Android 13 hinzugefügt. Für Beispiel: Ein Nutzer mit einem Pixel Smartphone mit Android 13 wählt eine Variante aus, im Bereich Hintergrund und , wie in Abbildung 4 dargestellt.

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

Android 12 hat die Variante Tonal Spot hinzugefügt, gefolgt von Neutral, Vibrant Farbtöne und ausdrucksstarke Varianten in Android 13. Jede Variante hat eine eigene Rezept, das die Seed-Farben des Hintergrunds von Nutzenden durch Lebendigkeit verwandelt und den Farbton rotieren. Das folgende Beispiel zeigt ein Einfarbschema vier Farbvarianten zum Ausdruck bringen.

**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 Informationen zu Tokens finden Sie unter Design mit Tokens erstellen auf dieser Seite.

Erste Schritte mit „Schreiben“

Wenn Sie Ihre UI mit Compose erstellen, sollten Sie Material Theming in Compose. Dort finden Sie weitere Informationen dazu, wie Sie dynamische Farben auf Ihr

Einführung in Views

Dynamische Farben lassen sich auf App- oder Aktivitätsebene anwenden. Rufen Sie dazu unter applyToActivitiesIfAvailable(), um ein ActivityLifeCycleCallbacks zu deiner App.

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 verschiedene UI-Elemente optimiert und einheitlicher gestaltet. Mit einem Design-Token können Sie Farbrollen statt eines festen Werts semantisch zuzuweisen, verschiedenen Elementen einer Benutzeroberfläche. So kann das Tonsystem deiner App Flexibilität, Skalierbarkeit und Konsistenz. Dies ist besonders leistungsstark, wenn für helle und dunkle Designs und dynamische Farben.

Die folgenden Snippets zeigen Beispiele für helles und dunkles Design. eine entsprechende Farb-XML, nachdem Sie dynamische Farbtokens angewendet haben.

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 Material 3-Seite Dynamische Farbe.
Um die Grundfarbvorlage und die Farben und das Design Ihrer App zu erstellen, aktivieren Sie Material Theme Builder, verfügbar über eine Figma-Plug-in oder im Browser).
Um mehr darüber zu erfahren, wie die Verwendung von Farbschemas die Barrierefreiheit verbessern kann finden Sie auf der Seite Material 3 Barrierefreiheit im Farbsystem:

Benutzerdefinierte Farben oder Markenfarben beibehalten

Wenn Ihre App benutzerdefinierte Farben oder Markenfarben hat, die Sie mit dem können Sie diese beim Erstellen der Farbe 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 den Material Theme Builder verwenden, um zusätzliche Farben, die Ihr Farbschema erweitern und so ein einheitliches Farbsystem schaffen. Verwenden Sie bei dieser Option HarmonizedColors, um den Ton von benutzerdefinierten Farben. Dies sorgt in Kombination für eine visuelle Ausgewogenheit und einen barrierefreien Kontrast. mit von Nutzern erstellten Farben. 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

Neben der Aktivierung von dynamischen Farbmotiven in Ihrer App können Sie auch Dynamische Farbgebung für Widgets beginnend in Android 12 und für adaptive Symbole beginnend mit Android 13