1. Hinweis
In diesem Codelab aktualisieren Sie die Starter-App, eine Trinkgeldrechner-App, um die neuen Funktionen in Material Design 3 zu nutzen. Damit kann die Benutzeroberfläche einer Anwendung dynamisch auf Grundlage des Hintergrundbilds des Nutzers gestaltet werden. Unten sehen Sie einige Screenshots der Anwendung mit dynamischen Farben. Außerdem werden einige zusätzliche Szenarien untersucht, mit denen Sie steuern können, wie Farben angewendet werden.
Vorbereitung
Entwickler sollten
- Mit den grundlegenden Konzepten für das Erstellen von Designs in Android vertraut sein
- Sie sind mit dem Ändern des Designs einer App vertraut.
Lerninhalte
- Unterscheidung zwischen vorhandenen Material-Komponenten und Material 3-Themes
- Thema auf Material 3 aktualisieren
- Designs mit unseren Tools erstellen und anwenden
- Wie Themenattribute zusammenhängen
Voraussetzungen
- Einen Computer, auf dem Android Studio installiert ist
- Code für die Tip Time-Anwendung. https://github.com/google-developer-training/android-basics-kotlin-tip-calculator-app-solution
2. Übersicht über die Start-App
Die App „Tip Time“ ist ein Trinkgeldrechner mit Optionen zum Anpassen des Trinkgelds. Sie ist eine der Beispiel-Apps aus unserem Android-Grundlagenkurs in Kotlin.
3. Gradle-Abhängigkeiten aktualisieren
Bevor wir das eigentliche Theme aktualisieren und die dynamische Farbe anwenden, müssen einige Änderungen an der Datei „build.gradle“ für Ihre Anwendung vorgenommen werden.
Prüfen Sie im Abschnitt „dependencies“, ob die Material-Bibliothek 1.5.0-alpha04 oder höher ist:
dependencies {
// ...
implementation 'com.google.android.material:material:<version>'
}
Ändern Sie im Abschnitt „android“ die Werte für „compileSdkVersion“ und „targetSdkVersion“.
bis 31 oder höher:
android {
compileSdkVersion 31
// ...
defaultConfig {
// ...
targetSdkVersion 31
}
}
Bei dieser Anleitung wird davon ausgegangen, dass die App relativ aktuelle Abhängigkeiten hat. Wenn eine App noch nicht Material oder eine ältere Version verwendet, finden Sie eine Anleitung in der Dokumentation „Erste Schritte“ der Material Design-Komponenten für Android.
Ändern Sie überall, wo Sie Ihre Designs erstellt haben, die Verweise von Theme.MaterialComponents.* zu Theme.Material3.*. Für einige Stile gibt es noch keinen neuen Stil im Material3-Namespace. Die meisten Komponenten übernehmen jedoch weiterhin das neue Design, sobald das übergeordnete Theme auf Theme.Material3.* aktualisiert wird. Unten sehen wir, dass Schaltflächen jetzt das neue abgerundete Design haben.
In der unten stehenden Themendatei wurde nur das übergeordnete Theme geändert. Wir werden dieses Thema gleich vollständig ersetzen. Einige der Farbattribute sind veraltet und einige der benutzerdefinierten Stile, die wir erstellt haben, sind jetzt Standard in Material3. Wir wollten Ihnen jedoch
themes.xml
<style name="Theme.TipTime" parent="Theme.Material3.Light">
<!-- Primary brand color. -->
<item name="colorPrimary">@color/green</item>
<item name="colorPrimaryVariant">@color/green_dark</item>
<item name="colorOnPrimary">@color/white</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">@color/blue</item>
<item name="colorSecondaryVariant">@color/blue_dark</item>
<item name="colorOnSecondary">@color/black</item>
<!-- Status bar color. -->
<item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
<!-- For text input fields -->
<item name="textInputStyle">@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox</item>
<!-- For radio buttons -->
<item name="radioButtonStyle">@style/Widget.TipTime.CompoundButton.RadioButton</item>
<!-- For switches -->
<item name="switchStyle">@style/Widget.TipTime.CompoundButton.Switch</item>
</style>
4. Farbthemen und Farbrollen
Das Material 3-Farbsystem bietet einen strukturierten Ansatz zum Anwenden von Farben auf Ihre Benutzeroberfläche. Eine Reihe von Attributen aus Theme.AppCompat werden weiterhin verwendet. In Theme.MaterialComponents.* und Theme.Material3.* wurden jedoch weitere Attribute hinzugefügt. Daher ist es wichtig, alle Bildschirme Ihrer App zu prüfen, um sicherzustellen, dass keine nicht implementierten Eigenschaften aus dem Basisthema durchsickern.
Farbrollen
Ein Material 3-Design enthält über 20 Attribute für die Farbe. Das mag auf den ersten Blick kompliziert erscheinen, aber es gibt nur wenige Hauptfarben, die mit denselben vier bis fünf Farbrollen kombiniert werden, um abgeleitete Farben zu erstellen.
Die Farbgruppen sind:
- „Primary“ (Primär): Die Primärfarbe Ihrer App
- Sekundär: die sekundäre Farbe Ihrer App
- Tertiär: eine dritte Farbe, die komplementär zu Primär und Sekundär ist
- Fehler, verwendet für Fehlertext und Dialogfelder
- Hintergrund
- Surface, SurfaceVariant, Surface Inverse
Die Rollen für „Primär“, „Sekundär“, „Tertiär“ und „Fehler“ sind:
<base color> | Die Grundfarbe |
on<base color> | die Farbe von Symbolen und Text, die auf der Grundfarbe angezeigt werden |
Container mit <base color> | abgeleitet von der Grundfarbe, verwendet für Schaltflächen, Dialogfelder usw. |
on<base color>Container | die Farbe von Symbolen und Text im Container |
Bei einem Floating-Action-Button mit Standardformatierung in Material 3 wird beispielsweise Primary als Grundfarbe verwendet. Die Hintergrundfarbe der Schaltfläche ist also primaryContainer und die Farbe des Inhalts ist onPrimaryContainer.
Wenn Sie ein Design manuell anpassen, sollten Sie mindestens prüfen, ob das Attribut on<base color> für jede Grundfarbe, die Sie ändern, weiterhin lesbar ist.
Am besten passen Sie alle Rollen in einer Farbgruppe gleichzeitig an, damit keine Artefakte von der Basis bis zu Ihrer App entstehen.
Hintergrund- und Surface-Basisfarben haben in der Regel zwei Rollen: die Basisfarbe selbst und on<base color> für Symbole oder Text, die darauf angezeigt werden.
5. Material 3-Design mit Material Theme Builder erstellen
Mit dem Material Theme Builder können Sie ganz einfach ein benutzerdefiniertes Farbschema erstellen, den integrierten Codeexport verwenden, um zum M3-Farbsystem zu migrieren, und dynamische Farben nutzen. Weitere Informationen: material.io/material-theme-builder
Das App-Design „Tip Time“ enthält mehrere Stile für Komponenten. Die meisten Stile sind jedoch Standardeinstellungen in Material 3-Designs. Die beiden wichtigsten Farben, die uns interessieren, sind „Primär“ und „Sekundär“.
Das entspricht einer grünen Primärfarbe (#1B5E20) und einer blauen Sekundärfarbe (#0288D1).
Sie können diese Farben in den Material Theme Builder eingeben und ein vollständiges Design exportieren (vorausgesetzt, es gibt einen Link zu einer vollständigen Übersicht an anderer Stelle).
Die von Ihnen eingegebenen Farben können sich im Ton verschieben, um dem Farberzeugungsalgorithmus zu entsprechen und für komplementäre und lesbare Farben zu sorgen.
Unten sehen Sie eine Teilmenge der Werte, die generiert werden, wenn Sie benutzerdefinierte Farben eingeben.
6. Mit Exportdateien von Material Theme Builder arbeiten
Das Exportarchiv enthält die Verzeichnisse „values“ und „values-night“ mit jeweils einer eigenen Datei „themes.xml“, die den hellen und dunklen Designs entsprechen. Alle Farben sind in „values/colors.xml“ definiert.
Die Dateien können unverändert kopiert werden. Sie müssen jedoch den Namen des Themes in AndroidManifest.xml oder in den Themedateien ändern, damit er übereinstimmt. Der Standardname aus den Tools ist „AppTheme“.
Wenn Sie die App neu starten, sieht sie fast genauso aus. Eine wichtige Änderung betrifft die Schalter und Optionsfelder, deren ausgewählte Status jetzt mit Tönen der Primärfarbe und nicht mehr mit Sekundärfarben gestaltet werden. Bei größeren Anwendungen müssen Sie möglicherweise einige Designs überarbeiten.
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.tiptime">
<application ...>
<activity android:name=".MainActivity"
android:exported="true">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
7. Dynamische Farben hinzufügen
Wenn ein geeignetes Material 3-Theme verwendet wird, können wir die Benutzeroberfläche mit einigen kleinen Ergänzungen dynamisch gestalten.
Mit der Dynamic Colors API können Sie dynamische Farben auf alle Aktivitäten anwenden.
in einer App, einzelnen Aktivitäten oder einzelnen Ansichten oder Fragmenten. Für
Diese App wird weltweit mit dynamischen Farben ausgestattet.
Application-Klassendatei erstellen
class TipTimeApplication: Application() {
override fun onCreate() {
// Apply dynamic color
DynamicColors.applyToActivitiesIfAvailable(this)
}
}
Wir müssen in der Android-Manifestdatei auf diese neu erstellte Datei verweisen:
AndroidManifest.xml
< application android name=".TipTimeApplication
<!--- Other existing attributes –>
</application >
Auf Systemen mit Android 12 und höher wird das Hintergrundbild des Nutzers für das Standardschema untersucht, um mehrere Farbpaletten zu generieren. Werte aus diesen Paletten werden verwendet, um eine ThemeOverlay zu erstellen.
Die Klasse „DynamicColors“ registriert einen ActivityLifecycleCallbacks, der ActivityPreCreated abfängt, um das vom System erstellte dynamische Design-Overlay oder ein von Ihnen bereitgestelltes Overlay anzuwenden.
8. Benutzerdefiniertes Design-Overlay anwenden
Mit unseren Tools können Sie Themen-Overlays exportieren. Sie können sie aber auch manuell erstellen, wenn Sie nur eine kleine Anzahl von Attributen überschreiben.
Ein Themen-Overlay ist für die Verwendung in Verbindung mit einem anderen Thema vorgesehen und enthält nur die Werte, die zusätzlich zum Basisthema geändert werden.
Angenommen, aus irgendeinem Grund, vielleicht aus Markengründen, müssen die primären Farbtöne Rottöne sein. Das ist mit den folgenden Dateien und Attributen möglich.
colors.xml
<resources>
<color name="overlay_light_primary">#9C4146</color>
<color name="overlay_light_onPrimary">#FFFFFF</color>
<color name= "overlay_light_primaryContainer">#FFDADB</color>
<color name="overlay_light_onPrimaryContainer">#400008</color>
</resources >
themes_overlays.xml
<style name="AppTheme.Overlay" parent="ThemeOverlay.Material3.DynamicColors.Light">
<item name="colorPrimary">@color/overlay_light_primary</item>
<item name="colorOnPrimary">@color/overlay_light_onPrimary</item>
<item name="colorPrimaryContainer">@color/overlay_light_primaryContainer</item>
<item name="colorOnPrimaryContainer">@color/overlay_light_onPrimaryContainer<item>
</style>
Bei dem oben genannten Code wird unter Android 12 ein dynamisches helles Design angewendet und Ihre Änderungen werden darüber gelegt. Alternativ können Sie ein beliebiges gültiges ThemeOverlay als übergeordnetes Element verwenden, z. B.:
ThemeOverlay.Material3.Light
ThemeOverlay.Material3.Dark
ThemeOverlay.Material3.DayNight ThemeOverlay.Material3.DynamicColors.Dark
ThemeOverlay.Material3.DynamicColors.DayNight
Wenn Sie dieses Theme-Overlay anstelle des Material-Standarddesigns verwenden möchten, ändern Sie den Aufruf von DynamicColors.applyToActivitiesIfAvailable in:
DynamicColors.applyToActivitiesIfAvailable(this, R.style.AppTheme_Overlay)
9. Dynamische Farbe für benutzerdefinierte Attribute hinzufügen
Bisher haben wir Eigenschaften überschrieben, die bereits in einem Material 3-Theme vorhanden sind. Ein weiterer möglicher Fall für dynamische Farben ist, dass wir ein oder mehrere benutzerdefinierte Attribute haben, die zugewiesen werden müssen.
Wenn eine App dynamische Farben verwendet, hat sie Zugriff auf fünf Tonpaletten: drei Akzentpaletten und zwei neutrale Paletten mit den folgenden ungefähren Rollen:
system_accent1 | Primärfarbtöne |
system_accent2 | Sekundäre Farbtöne |
system_accent3 | Tertiärfarbtöne |
system_neutral1 | Neutrale Hintergründe und Oberflächen |
system_neutral2 | Neutrale Oberflächen und Umrisse |
Jede Palette hat eine Reihe von Tonabstufungen, die von Weiß
Schwarz: 0, 10, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000.
Beim Entwerfen einer Benutzeroberfläche für dynamische Farben sollten Sie weniger über die spezifische Farbe nachdenken, sondern mehr über das Verhältnis von Farbton und Luminanz der Komponente zu anderen Elementen im Designsystem.
Angenommen, Sie möchten, dass Symbole mit der sekundären Akzentpalette gestaltet werden, und Sie haben ein Attribut zum Einfärben von Symbolen mit dem folgenden Eintrag in attrs.xml hinzugefügt.
attrs.xml
<resources>
<attr name="iconColor" format="color" />
</resources>
Ihr Themen-Overlay könnte etwa so aussehen:
<style name="AppTheme.Overlay" parent="ThemeOverlay.Material3.DynamicColors.DayNight">
<item name="iconColor">@android:color/system_accent2_600</item>
</style>
Wenn Sie die App neu installieren und das Hintergrundbild ändern, wird diese sekundäre Palette von der App übernommen.
Diese Paletten sind spezifisch für Android 12 (API 31). Sie müssen die entsprechenden Dateien also in Ordnern mit dem Suffix -v31 platzieren, es sei denn, für Ihre App ist mindestens SDK 31 festgelegt.
10. Zusammenfassung
In diesem Codelab haben Sie Folgendes gelernt:
- Fügen Sie Abhängigkeiten hinzu, um Ihr Design auf Material 3 zu aktualisieren.
- Informationen zu den neuen Farbgruppen und Rollen
- Informationen zur Migration von einem statischen Design zu dynamischen Farben
- Informationen zur Verwendung von Design-Overlays und dynamischen Farben für benutzerdefinierte Designattribute.