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.
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">Das System interpretiert jede Tastenfarbe in eine Tonpalette mit 13 Tönen.
<ph type="x-smartling-placeholder">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.
<ph type="x-smartling-placeholder">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.
<ph type="x-smartling-placeholder">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()
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