Ermögliche Nutzern, ihre Farbgebung in deiner App zu personalisieren
Mit Sammlungen den Überblick behalten
Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.
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.
<ph type="x-smartling-placeholder"></ph>
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.
<ph type="x-smartling-placeholder"></ph>
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.
<ph type="x-smartling-placeholder"></ph>
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
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.
„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.
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:
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()
<ph type="x-smartling-placeholder"></ph>
Abbildung 6: Beispiel für die Harmonisierung benutzerdefinierter Farben
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
Alle Inhalte und Codebeispiele auf dieser Seite unterliegen den Lizenzen wie im Abschnitt Inhaltslizenz beschrieben. Java und OpenJDK sind Marken oder eingetragene Marken von Oracle und/oder seinen Tochtergesellschaften.