Jetpack Compose bietet eine Implementierung von Material Design 3, der nächsten Weiterentwicklung von Material Design. Material 3 umfasst aktualisierte Themen, Komponenten und Personalisierungsfunktionen von Material You wie dynamische Farben. Es ist so konzipiert, dass es mit dem neuen visuellen Stil und der System-UI von Android 12 und höher harmoniert.
Unten sehen Sie ein Beispiel für die Implementierung von Material Design 3 anhand der Beispiel-App „Reply“. Das Antwortbeispiel basiert vollständig auf Material Design 3.
Abhängigkeit
Wenn Sie Material 3 in Ihrer Compose-App verwenden möchten, fügen Sie Ihren build.gradle
-Dateien die Abhängigkeit Compose Material 3 hinzu:
implementation "androidx.compose.material3:material3:$material3_version"
Nachdem Sie die Abhängigkeit hinzugefügt haben, können Sie Ihren Apps Material Design-Systeme wie Farbe, Typografie und Form hinzufügen.
Experimentelle APIs
Einige M3 APIs gelten als experimentell. In solchen Fällen müssen Sie die Funktion oder Datei mit der Anmerkung ExperimentalMaterial3Api
aktivieren:
// import androidx.compose.material3.ExperimentalMaterial3Api @Composable fun AppComposable() { // M3 composables }
Material Theming
Ein M3-Design enthält die folgenden Teilsysteme: Farbschema, Typografie und Formen. Wenn Sie diese Werte anpassen, werden Ihre Änderungen automatisch in den M3-Komponenten übernommen, die Sie zum Erstellen Ihrer App verwenden.
In Jetpack Compose werden diese Konzepte mit dem M3 MaterialTheme
-Komposit implementiert:
MaterialTheme( colorScheme = /* ... typography = /* ... shapes = /* ... ) { // M3 app content }
Um ein Design für Ihre App-Inhalte festzulegen, definieren Sie das Farbschema, die Typografie und die Formen, die für Ihre App spezifisch sind.
Farbschema
Die Grundlage eines Farbschemas bilden fünf Hauptfarben. Jede dieser Farben bezieht sich auf eine Tonpalette mit 13 Tönen, die in Material 3-Komponenten verwendet werden. Das ist beispielsweise das Farbschema für das helle Design für Antworten:
Weitere Informationen zu Farbschema und Farbrollen
Farbschemata generieren
Sie können ein benutzerdefiniertes ColorScheme
zwar manuell erstellen, es ist aber oft einfacher, eins anhand von Quellfarben Ihrer Marke zu generieren. Mit dem Tool Material Theme Builder können Sie dies tun und optional Compose-Themencode exportieren. Die folgenden Dateien werden generiert:
Color.kt
enthält die Farben Ihres Designs mit allen Rollen, die sowohl für das helle als auch das dunkle Design definiert sind.
val md_theme_light_primary = Color(0xFF476810) val md_theme_light_onPrimary = Color(0xFFFFFFFF) val md_theme_light_primaryContainer = Color(0xFFC7F089) // .. // .. val md_theme_dark_primary = Color(0xFFACD370) val md_theme_dark_onPrimary = Color(0xFF213600) val md_theme_dark_primaryContainer = Color(0xFF324F00) // .. // ..
Theme.kt
enthält eine Einrichtung für helle und dunkle Farbschemata und das App-Design.
private val LightColorScheme = lightColorScheme( primary = md_theme_light_primary, onPrimary = md_theme_light_onPrimary, primaryContainer = md_theme_light_primaryContainer, // .. ) private val DarkColorScheme = darkColorScheme( primary = md_theme_dark_primary, onPrimary = md_theme_dark_onPrimary, primaryContainer = md_theme_dark_primaryContainer, // .. ) @Composable fun ReplyTheme( darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable () -> Unit ) { val colorScheme = if (!darkTheme) { LightColorScheme } else { DarkColorScheme } MaterialTheme( colorScheme = colorScheme, content = content ) }
Verwenden Sie isSystemInDarkTheme()
, um helle und dunkle Designs zu unterstützen. Legen Sie anhand der Systemeinstellung fest, welches Farbschema verwendet werden soll: hell oder dunkel.
Dynamische Farbschemata
Dynamische Farben sind ein wichtiger Bestandteil von Material You. Dabei werden mithilfe eines Algorithmus benutzerdefinierte Farben aus dem Hintergrundbild eines Nutzers abgeleitet, die auf die Apps und die Systemoberfläche angewendet werden. Diese Farbvorlage wird als Ausgangspunkt zum Generieren von hellen und dunklen Farbschemas verwendet.
Dynamische Farben sind ab Android 12 verfügbar. Wenn die dynamische Farbe verfügbar ist, können Sie eine dynamische ColorScheme
einrichten. Falls nicht, sollten Sie ein benutzerdefiniertes helles oder dunkles ColorScheme
-Objekt verwenden.
ColorScheme
bietet Builder-Funktionen zum Erstellen eines dynamischen hellen oder dunklen Farbschemas:
// Dynamic color is available on Android 12+ val dynamicColor = Build.VERSION.SDK_INT >= Build.VERSION_CODES.S val colors = when { dynamicColor && darkTheme -> dynamicDarkColorScheme(LocalContext.current) dynamicColor && !darkTheme -> dynamicLightColorScheme(LocalContext.current) darkTheme -> DarkColorScheme else -> LightColorScheme }
Farbverwendung
Sie können über MaterialTheme.colorScheme
auf die Material-Designfarben in Ihrer App zugreifen:
Text( text = "Hello theming", color = MaterialTheme.colorScheme.primary )
Jede Farbrolle kann an verschiedenen Stellen verwendet werden, je nach Status, Sichtbarkeit und Betonung der Komponente.
- Die Primärfarbe ist die Grundfarbe, die für Hauptkomponenten wie hervorgehobene Schaltflächen, aktive Status und die Tönung von hervorgehobenen Oberflächen verwendet wird.
- Die sekundäre Schlüsselfarbe wird für weniger auffällige Komponenten in der Benutzeroberfläche wie Filterchips verwendet und bietet mehr Möglichkeiten für den Farbausdruck.
- Anhand der tertiären Schlüsselfarbe werden die Rollen der kontrastierenden Akzente abgeleitet, mit denen sich Primär- und Sekundärfarben ausbalancieren oder ein Element hervorheben lassen.
Im Design einer Antwort-Beispiel-App wird der primäre Container in einer Farbe dargestellt, die auf dem primären Container liegt, um das ausgewählte Element hervorzuheben.
Card( colors = CardDefaults.cardColors( containerColor = if (isSelected) MaterialTheme.colorScheme.primaryContainer else MaterialTheme.colorScheme.surfaceVariant ) ) { Text( text = "Dinner club", style = MaterialTheme.typography.bodyLarge, color = if (isSelected) MaterialTheme.colorScheme.onPrimaryContainer else MaterialTheme.colorScheme.onSurface, ) }
Hier sehen Sie im Navigationsbereich für Antworten, wie sekundäre und tertiäre Containerfarben als Kontrast verwendet werden, um Betonung und Akzent zu schaffen.
Typografie
In Material Design 3 wird eine Schriftgradskala definiert, einschließlich Textstilen, die aus Material Design 2 übernommen wurden. Die Benennung und Gruppierung wurde auf die folgenden Elemente reduziert: Anzeigentitel, Überschrift, Titel, Textkörper und Label, jeweils in den Größen „groß“, „mittel“ und „klein“.
M3 | Standardschriftgröße/Zeilenhöhe |
displayLarge |
Roboto 57/64 |
displayMedium |
Roboto 45/52 |
displaySmall |
Roboto 36/44 |
headlineLarge |
Roboto 32/40 |
headlineMedium |
Roboto 28/36 |
headlineSmall |
Roboto 24/32 |
titleLarge |
New- Roboto Medium 22/28 |
titleMedium |
Roboto Medium 16/24 |
titleSmall |
Roboto Medium 14/20 |
bodyLarge |
Roboto 16/24 |
bodyMedium |
Roboto 14/20 |
bodySmall |
Roboto 12/16 |
labelLarge |
Roboto Medium 14/20 |
labelMedium |
Roboto Medium 12/16 |
labelSmall |
New Roboto Medium, 11/16 |
Typografie definieren
Compose bietet die M3-Klasse Typography
zusammen mit den vorhandenen Klassen TextStyle
und schriftbezogen, um den Material 3-Typ zu skalieren. Der Typography
-Konstruktor bietet Standardwerte für jeden Stil. Sie können also Parameter weglassen, die Sie nicht anpassen möchten:
val replyTypography = Typography( titleLarge = TextStyle( fontWeight = FontWeight.SemiBold, fontSize = 22.sp, lineHeight = 28.sp, letterSpacing = 0.sp ), titleMedium = TextStyle( fontWeight = FontWeight.SemiBold, fontSize = 16.sp, lineHeight = 24.sp, letterSpacing = 0.15.sp ), // .. ) // ..
Ihr Produkt benötigt wahrscheinlich nicht alle 15 Standardstile der Material Design-Typskala. In diesem Beispiel werden fünf Größen für einen reduzierten Satz ausgewählt, während der Rest weggelassen wird.
Sie können die Typografie anpassen, indem Sie die Standardwerte von TextStyle
und schriftartbezogenen Eigenschaften wie fontFamily
und letterSpacing
ändern.
bodyLarge = TextStyle( fontWeight = FontWeight.Normal, fontFamily = FontFamily.SansSerif, fontStyle = FontStyle.Italic, fontSize = 16.sp, lineHeight = 24.sp, letterSpacing = 0.15.sp, baselineShift = BaselineShift.Subscript ),
Nachdem du deine Typography
definiert hast, gib sie an die M3-MaterialTheme
weiter:
MaterialTheme( typography = replyTypography, ) { // M3 app Content }
Textstile verwenden
Sie können die Typografie abrufen, die für das M3-MaterialTheme
-Komposit bereitgestellt wurde, indem Sie MaterialTheme.typography
verwenden:
Text( text = "Hello M3 theming", style = MaterialTheme.typography.titleLarge ) Text( text = "you are learning typography", style = MaterialTheme.typography.bodyMedium )
Weitere Informationen zu den Material Design-Richtlinien zur Anwendung von Typografie
Formen
Materialoberflächen können in verschiedenen Formen dargestellt werden. Formen lenken die Aufmerksamkeit, identifizieren Komponenten, kommunizieren den Status und drücken die Marke aus.
Mit der Formskala wird der Stil der Containerecken definiert. Sie bietet eine Reihe von Rundungen, von quadratisch bis vollständig rund.
Formen definieren
Compose bietet der M3-Klasse Shapes
erweiterte Parameter zur Unterstützung neuer M3-Formen. Die M3-Formskala ähnelt eher der Typskala und ermöglicht eine ausdrucksstarke Vielfalt von Formen in der Benutzeroberfläche.
Es gibt verschiedene Größen:
- Extraklein
- Klein
- Mittel
- Groß
- Extragroß
Standardmäßig hat jede Form einen Standardwert. Sie können diese jedoch überschreiben:
val replyShapes = Shapes( extraSmall = RoundedCornerShape(4.dp), small = RoundedCornerShape(8.dp), medium = RoundedCornerShape(12.dp), large = RoundedCornerShape(16.dp), extraLarge = RoundedCornerShape(24.dp) )
Nachdem du deine Shapes
definiert hast, kannst du sie an die M3 MaterialTheme
übergeben:
MaterialTheme( shapes = replyShapes, ) { // M3 app Content }
Formen verwenden
Sie können die Formskala für alle Komponenten in der MaterialTheme
oder pro Komponente anpassen.
Wenden Sie die mittlere und große Form mit den Standardwerten an:
Card(shape = MaterialTheme.shapes.medium) { /* card content */ } FloatingActionButton( shape = MaterialTheme.shapes.large, onClick = { } ) { /* fab content */ }
Es gibt zwei weitere Formen, RectangleShape
und CircleShape
, die Teil von „Compose“ sind. Rechteck ohne Rahmenradius und Kreisform mit vollständigen Kreisrändern:
Card(shape = RectangleShape) { /* card content */ } Card(shape = CircleShape) { /* card content */ }
Die folgenden Beispiele zeigen einige der Komponenten mit Standardformwerten:
Weitere Informationen zu den Materialrichtlinien zum Anwenden von Formen
Betonung
In M3 wird die Betonung durch Farbvariationen und ihre On-Color-Kombinationen betont. In M3 gibt es zwei Möglichkeiten, Ihre Benutzeroberfläche hervorzuheben:
- Verwendung von Oberfläche, Oberflächenvariante und Hintergrund sowie oberflächlich-Varianten-Farben aus dem erweiterten M3-Farbsystem. Beispielsweise kann „surface“ mit „on-surface-variant“ und „surface-variant“ mit „on-surface“ verwendet werden, um verschiedene Betonungsstufen zu erzielen.
- Verwenden Sie unterschiedliche Schriftschnitte für den Text. Oben haben Sie gesehen, dass Sie benutzerdefinierte Gewichte für unsere Schriftskala festlegen können, um unterschiedliche Betonungen vorzunehmen.
bodyLarge = TextStyle( fontWeight = FontWeight.Bold ), bodyMedium = TextStyle( fontWeight = FontWeight.Normal )
Höhe
In Material 3 werden Höhenunterschiede hauptsächlich mit farblichen Überlagerungen dargestellt. Dies ist eine neue Möglichkeit, Container und Oberflächen voneinander zu unterscheiden – bei einer Erhöhung der Tonwerte wird ein auffälligerer Ton verwendet – zusätzlich zu Schatten.
Höhen-Overlays in dunklen Designs wurden in Material 3 in Tonfarben-Overlays geändert. Die Overlay-Farbe stammt aus dem Primärfarb-Slot.
Die M3-Oberfläche – die Hintergrundkomposition hinter den meisten M3-Komponenten – unterstützt sowohl tonale als auch Schattenerhöhungen:
Surface( modifier = Modifier, tonalElevation = /*... shadowElevation = /*... ) { Column(content = content) }
Materialkomponenten
Material Design bietet eine Vielzahl von Materialkomponenten (z. B. Schaltflächen, Chips, Karten, Navigationsleiste), die bereits Material-Design-Themen folgen und Ihnen dabei helfen, ansprechende Material Design-Apps zu erstellen. Sie können sofort mit der Verwendung von Komponenten mit Standardeigenschaften beginnen.
Button(onClick = { /*..*/ }) { Text(text = "My Button") }
M3 bietet viele Versionen derselben Komponenten, die je nach Betonung und Aufmerksamkeit in verschiedenen Rollen verwendet werden können.
- Eine erweiterte unverankerte Aktionsschaltfläche für die Aktion mit der höchsten Betonung:
ExtendedFloatingActionButton( onClick = { /*..*/ }, modifier = Modifier ) { Icon( imageVector = Icons.Default.Edit, contentDescription = stringResource(id = R.string.edit), ) Text( text = stringResource(id = R.string.add_entry), ) }
- Eine gefüllte Schaltfläche für eine Aktion mit hoher Gewichtung:
Button(onClick = { /*..*/ }) { Text(text = stringResource(id = R.string.view_entry)) }
- Textschaltfläche für eine Aktion mit geringer Betonung:
TextButton(onClick = { /*..*/ }) { Text(text = stringResource(id = R.string.replated_articles)) }
Weitere Informationen zu Material Schaltflächen und anderen Komponenten Material 3 bietet eine Vielzahl von Komponentenpaketen wie Schaltflächen, App-Leisten und Navigationskomponenten, die speziell für verschiedene Anwendungsfälle und Bildschirmgrößen entwickelt wurden.
Navigationskomponenten
Material bietet außerdem mehrere Navigationskomponenten, mit denen Sie die Navigation je nach Bildschirmgröße und -status implementieren können.
NavigationBar
wird für kompakte Geräte verwendet, wenn Sie eine Ausrichtung auf fünf oder weniger Ziele vornehmen möchten:
NavigationBar(modifier = Modifier.fillMaxWidth()) { Destinations.entries.forEach { replyDestination -> NavigationBarItem( selected = selectedDestination == replyDestination, onClick = { }, icon = { } ) } }
NavigationRail
wird für kleine bis mittelgroße Tablets oder Smartphones im Querformat verwendet. Sie bietet Nutzern Ergonomie und verbessert die Nutzerfreundlichkeit dieser Geräte.
NavigationRail( modifier = Modifier.fillMaxHeight(), ) { Destinations.entries.forEach { replyDestination -> NavigationRailItem( selected = selectedDestination == replyDestination, onClick = { }, icon = { } ) } }
Antworten Sie mit beiden Optionen im Standarddesign, um Nutzern auf allen Geräten ein immersives Erlebnis zu bieten.
NavigationDrawer
wird für mittelgroße bis große Tablets verwendet, auf denen genügend Platz für Details vorhanden ist. Sie können sowohl PermanentNavigationDrawer
als auch ModalNavigationDrawer
zusammen mit NavigationRail
verwenden.
PermanentNavigationDrawer(modifier = Modifier.fillMaxHeight(), drawerContent = { Destinations.entries.forEach { replyDestination -> NavigationRailItem( selected = selectedDestination == replyDestination, onClick = { }, icon = { }, label = { } ) } }) { }
Navigationsoptionen verbessern die Nutzerfreundlichkeit, Ergonomie und Erreichbarkeit. Weitere Informationen zu Material Design-Navigationskomponenten finden Sie im Codelab zum Erstellen adaptiver Apps.
Design einer Komponente anpassen
M3 fördert Personalisierung und Flexibilität. Alle Komponenten haben Standardfarben, aber flexible APIs, mit denen sich die Farben bei Bedarf anpassen lassen.
Die meisten Komponenten wie Karten und Schaltflächen haben ein Standardobjekt mit Farb- und Höhenschnittstellen, die zur Anpassung der Komponente geändert werden können:
val customCardColors = CardDefaults.cardColors( contentColor = MaterialTheme.colorScheme.primary, containerColor = MaterialTheme.colorScheme.primaryContainer, disabledContentColor = MaterialTheme.colorScheme.surface, disabledContainerColor = MaterialTheme.colorScheme.onSurface, ) val customCardElevation = CardDefaults.cardElevation( defaultElevation = 8.dp, pressedElevation = 2.dp, focusedElevation = 4.dp ) Card( colors = customCardColors, elevation = customCardElevation ) { // m3 card content }
Weitere Informationen zum Anpassen von Material 3
System-UI
Einige Aspekte von Material You stammen aus dem neuen visuellen Stil und der neuen System-UI von Android 12 und höher. Zwei wichtige Bereiche, in denen es Änderungen gibt, sind die Wellenbewegung und das Überscrollen. Für die Implementierung dieser Änderungen sind keine weiteren Maßnahmen erforderlich.
Welle
Bei „Wellen“ wird jetzt beim Drücken eine Oberfläche mit einem dezenten Glitzereffekt beleuchtet. Bei Compose Material Ripple wird unter Android die Plattform RippleDrawable verwendet, sodass die Funkwelle ab Android 12 für alle Materialkomponenten verfügbar ist.
Overscroll
Beim Overscroll wird jetzt ein Stretch-Effekt am Rand von scrollbaren Containern verwendet.
In Compose Foundation 1.1.0 und höher ist das Überblenden beim Scrollen standardmäßig in Scrollcontainer-Kompositionen wie LazyColumn
, LazyRow
und LazyVerticalGrid
aktiviert, unabhängig vom API-Level.
Bedienungshilfen
Die in Materialkomponenten integrierten Standards für Barrierefreiheit sollen eine Grundlage für inklusives Produktdesign bieten. Wenn Sie die Barrierefreiheit Ihres Produkts kennen, können Sie die Nutzerfreundlichkeit für alle Nutzer verbessern, einschließlich Personen mit Sehbehinderung, Blindheit, Hörbeeinträchtigung, kognitiven Beeinträchtigungen, motorischen Beeinträchtigungen oder situativen Beeinträchtigungen (z. B. gebrochener Arm).
Barrierefreie Farben
Dynamische Farben entsprechen den Standards für Barrierefreiheit im Hinblick auf Farbkontraste. Das System der Farbtonpaletten ist entscheidend, um jedes Farbschema standardmäßig barrierefrei zu gestalten.
Das Farbsystem von Material bietet Standardtonwerte und -messungen, mit denen sich die Anforderungen an barrierefreie Kontrastverhältnisse erfüllen lassen.
Alle Materialkomponenten und dynamischen Designs verwenden bereits die oben genannten Farbrollen aus einer Reihe von Tonpaletten, die so ausgewählt wurden, dass sie die Anforderungen an die Barrierefreiheit erfüllen. Achten Sie beim Anpassen von Komponenten jedoch darauf, geeignete Farbrollen zu verwenden und Abweichungen zu vermeiden.
Verwenden Sie den „Primär“-Container über dem Primärcontainer und den On-Primary-Container über dem primären Container und dasselbe für andere Akzent- und neutrale Farben, um dem Nutzer einen barrierefreien Kontrast zu bieten.
Die Verwendung eines tertiären Containers über dem primären Container führt zu einer Schaltfläche mit schlechtem Kontrast:
// ✅ Button with sufficient contrast ratio Button( onClick = { }, colors = ButtonDefaults.buttonColors( containerColor = MaterialTheme.colorScheme.primary, contentColor = MaterialTheme.colorScheme.onPrimary ) ) { } // ❌ Button with poor contrast ratio Button( onClick = { }, colors = ButtonDefaults.buttonColors( containerColor = MaterialTheme.colorScheme.tertiaryContainer, contentColor = MaterialTheme.colorScheme.primaryContainer ) ) { }
Typografie-Bedienungshilfen
Bei der M3-Typskala werden die Rampe und die Werte des statischen Typs aktualisiert, um ein vereinfachtes, aber dynamisches Framework für Größenkategorien zu bieten, das geräteübergreifend skaliert.
In M3 kann beispielsweise „Display klein“ je nach Gerätekontext unterschiedliche Werte zugewiesen werden, z. B. für ein Smartphone oder ein Tablet.
Großes Display
Material bietet Anleitungen für adaptive Layouts und faltbare Geräte, um Ihre Apps barrierefrei zu gestalten und die Ergonomie für Nutzer zu verbessern, die große Geräte in der Hand halten.
Material bietet verschiedene Arten der Navigation, damit du auch auf großen Geräten eine bessere Nutzererfahrung bieten kannst.
Hier findest du weitere Informationen zu den Qualitätsrichtlinien für Android-Apps für große Bildschirme und unser Beispiel für Antworten für adaptives und barrierefreies Design.
Weitere Informationen
Weitere Informationen zu Material-Design-Designthemen in Compose finden Sie in den folgenden Ressourcen:
Beispiel-Apps
Docs
API-Referenz und Quellcode
Videos
Empfehlungen für dich
- Hinweis: Der Linktext wird angezeigt, wenn JavaScript deaktiviert ist.
- In Compose von Material 2 zu Material 3 migrieren
- Material Design 2 in der compose-Ansicht
- Benutzerdefinierte Designsysteme in Compose