Jetpack Compose bietet eine Implementierung von Material Design 3, der nächsten Entwicklung von Material Design. Material 3 umfasst aktualisierte Designs, Komponenten und Personalisierungsfunktionen von Material You wie dynamische Farben. Das Design ist auf den neuen visuellen Stil und die System-UI unter Android 12 und höher abgestimmt.
Unten wird als Beispiel die Reply-Beispiel-App verwendet, um Material Design 3 zu implementieren. 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 den build.gradle
-Dateien die Abhängigkeit von Compose Material 3 hinzu:
implementation "androidx.compose.material3:material3:$material3_version"
Nachdem die Abhängigkeit hinzugefügt wurde, können Sie Ihren Anwendungen Material Design-Systeme hinzufügen, einschließlich Farbe, Typografie und Form.
Experimentelle APIs
Einige M3 APIs gelten als experimentell. In solchen Fällen müssen Sie die Aktivierung auf Funktions- oder Dateiebene mithilfe der Annotation ExperimentalMaterial3Api
vornehmen:
// import androidx.compose.material3.ExperimentalMaterial3Api @OptIn(ExperimentalMaterial3Api::class) @Composable fun AppComposable() { // M3 composables }
Materielle Themen
Ein M3-Design enthält die folgenden Subsysteme: Farbschema, Typografie und Formen. Wenn Sie diese Werte anpassen, werden Ihre Änderungen automatisch in den M3-Komponenten wiedergegeben, die Sie zum Erstellen Ihrer Anwendung verwenden.
Jetpack Compose implementiert diese Konzepte mit der zusammensetzbaren Funktion MaterialTheme
für M3:
MaterialTheme( colorScheme = /* ... typography = /* ... shapes = /* ... ) { // M3 app content }
Definieren Sie für Ihre App-Inhalte das Farbschema, die Typografie und die Formen speziell für Ihre App.
Farbschema
Die Grundlage eines Farbschemas ist ein Satz von fünf Schlüsselfarben. Jede dieser Farben bezieht sich auf eine Tonpalette mit 13 Tönen, die von Material 3-Komponenten verwendet wird. Das ist beispielsweise das Farbschema für das helle Design für Reply:
Weitere Informationen zu Farbschema und Farbrollen
Farbschemata generieren
Sie können zwar manuell eine benutzerdefinierte ColorScheme
erstellen, es ist jedoch oft einfacher, eine mit Quellfarben Ihrer Marke zu generieren. Mit dem Tool Material Theme Builder ist das möglich und Sie können optional den Compose-Designcode exportieren. Die folgenden Dateien werden generiert:
Color.kt
enthält die Farben Ihres Designs mit allen Rollen, die für das helle und 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 sowie 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 ) }
Wenn du helle und dunkle Designs unterstützen möchtest, verwende isSystemInDarkTheme()
. Legen Sie je nach Systemeinstellung fest, welches Farbschema verwendet werden soll: hell oder dunkel.
Dynamische Farbschemata
Dynamische Farben sind der Hauptteil von Material You, bei dem ein Algorithmus benutzerdefinierte Farben aus dem Hintergrund eines Nutzers ableitet und auf dessen Apps und System-UI angewendet wird. Diese Farbpalette wird als Ausgangspunkt zum Generieren heller und dunkler Farbschemas verwendet.
Dynamische Farben sind ab Android 12 verfügbar. Wenn dynamische Farben verfügbar sind, können Sie eine dynamische ColorScheme
einrichten. Falls nicht, sollten Sie ein benutzerdefiniertes helles oder dunkles ColorScheme
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 }
Verwendung von Farben
Sie können in Ihrer App über MaterialTheme.colorScheme
auf die Farben des Materialdesigns zugreifen:
Text( text = "Hello theming", color = MaterialTheme.colorScheme.primary )
Jede Farbrolle kann je nach Status, Wichtigkeit und Betonung der Komponente an einer Vielzahl von Orten verwendet werden.
- „Primär“ ist die Grundfarbe, die für Hauptkomponenten wie auffällige Schaltflächen, aktive Zustände und die Färbung erhöhter Oberflächen verwendet wird.
- Die Farbe des Sekundärschlüssels wird für weniger auffällige Komponenten in der Benutzeroberfläche verwendet, z. B. Infofelder für Filter, und erweitert die Möglichkeiten für Farbausdruck.
- Die tertiäre Schlüsselfarbe wird verwendet, um die Rollen kontrastierender Akzente abzuleiten, die verwendet werden können, um Primär- und Sekundärfarben auszubalancieren oder die Aufmerksamkeit auf ein Element zu lenken.
In der Beispielanwendung „Antworten“ wird die Farbe „on-primary-container“ über dem primären Container verwendet, um das ausgewählte Element zu betonen.
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 in der Navigationsleiste für Antworten sehen Sie, wie sekundäre und tertiäre Containerfarben im Kontrast verwendet werden, um Betonung und Akzent zu erzeugen.
Typografie
Material Design 3 definiert eine Schriftskala, einschließlich Textstilen, die aus Material Design 2 übernommen wurden. Die Benennung und Gruppierung wurden vereinfacht: Anzeige, Überschrift, Titel, Text und Label, wobei die Größen jeweils groß, mittel und klein sind.
M3 | Standardmäßige Schriftgröß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
sowie die vorhandenen TextStyle
- und schriftbezogenen Klassen, um die Material 3-Schriftgröße zu modellieren. Der Typography
-Konstruktor bietet Standardwerte für jeden Stil, sodass Sie alle Parameter weglassen können, 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-Typenskala. 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 für TextStyle
und schriftbezogene 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 ),
Sobald Sie die Typography
definiert haben, übergeben Sie sie an die M3-MaterialTheme
:
MaterialTheme( typography = replyTypography, ) { // M3 app Content }
Textstile verwenden
Sie können die für die M3- zusammensetzbare Funktion MaterialTheme
bereitgestellte Typografie mit MaterialTheme.typography
abrufen:
Text( text = "Hello M3 theming", style = MaterialTheme.typography.titleLarge ) Text( text = "you are learning typography", style = MaterialTheme.typography.bodyMedium )
Weitere Informationen zu den Materialrichtlinien finden Sie unter Typografie anwenden.
Formen
Materialoberflächen können in verschiedenen Formen dargestellt werden. Formen lenken die Aufmerksamkeit, identifizieren Komponenten, kommunizieren Zustand und drücken Marke aus.
Die Formskala definiert den Stil der Containerecken und bietet einen Rundungsbereich 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 Schriftskala und ermöglicht einen ausdrucksstarken Formenbereich auf der Benutzeroberfläche.
Es gibt verschiedene Größen von Formen:
- Extraklein
- Klein
- Mittel
- Groß
- Extragroß
Standardmäßig hat jede Form einen Standardwert, der jedoch überschrieben werden kann:
val replyShapes = Shapes( extraSmall = RoundedCornerShape(4.dp), small = RoundedCornerShape(8.dp), medium = RoundedCornerShape(12.dp), large = RoundedCornerShape(16.dp), extraLarge = RoundedCornerShape(24.dp) )
Nachdem Sie die Shapes
definiert haben, können Sie sie an die M3-MaterialTheme
übergeben:
MaterialTheme( shapes = replyShapes, ) { // M3 app Content }
Formen verwenden
Sie können die Formskalierung für alle Komponenten im MaterialTheme
oder für einzelne Komponenten anpassen.
Mittelgroße und große Formen mit Standardwerten anwenden:
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. Die Rechteckform hat keinen Rahmenradius, die kreisförmige Form hat vollständige kreisförmige Kanten:
Card(shape = RectangleShape) { /* card content */ } Card(shape = CircleShape) { /* card content */ }
Die folgenden Beispiele zeigen einige der Komponenten, auf die Standardformwerte angewendet werden:
Weitere Informationen zu den Materialrichtlinien finden Sie unter Formen anwenden.
Betonung
Die Betonung wird in M3 durch Farbvarianten und ihre On-Farb-Kombinationen erzeugt. In M3 gibt es zwei Möglichkeiten, Ihre Benutzeroberfläche hervorzuheben:
- Verwendung der Optionen „Oberfläche“, „Oberflächenvariante“ und „Hintergrund“ zusammen mit den Farben auf der Oberfläche und auf der Oberfläche aus dem erweiterten M3-Farbsystem. So kann beispielsweise „Oberfläche“ mit „Auf der Oberfläche“ und „Oberfläche-Variante“ mit „Auf der Oberfläche“ verwendet werden, um verschiedene Betonungsgrade zu schaffen.
- Unterschiedliche Schriftstärken für Text verwenden Oben haben Sie gesehen, dass Sie unsere Schrift mit benutzerdefinierten Gewichtungen versehen können, um verschiedene
bodyLarge = TextStyle( fontWeight = FontWeight.Bold ), bodyMedium = TextStyle( fontWeight = FontWeight.Normal )
Höhe
Material 3 stellt Elevation hauptsächlich mithilfe von Farb-Overlays dar. Dies ist eine neue Möglichkeit, Container und Oberflächen voneinander zu unterscheiden – zusätzlich zu den Schatten wird bei der Erhöhung des Tonwerts ein auffälligerer Ton verwendet.
Höhen-Overlays in dunklen Designs wurden auch in Material 3 in Tonwerte umgewandelt. Die Overlay-Farbe stammt aus der Primärfarbfläche.
Die M3-Oberfläche, die hinter den meisten M3-Komponenten zusammensetzbare Back-ups, unterstützt sowohl Farbton- als auch Schattenwerte:
Surface( modifier = Modifier, tonalElevation = /*... shadowElevation = /*... ) { Column(content = content) }
Materialkomponenten
Material Design umfasst eine Vielzahl von Material-Komponenten (z. B. Schaltflächen, Chips, Karten, Navigationsleisten), die bereits Material-Designs entsprechen und Ihnen helfen, ansprechende Material Design-Apps zu erstellen. Sie können Komponenten mit Standardeigenschaften sofort verwenden.
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 ausgefüllte Schaltfläche für eine stark betonte Aktion:
Button(onClick = { /*..*/ }) { Text(text = stringResource(id = R.string.view_entry)) }
- Eine 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 Komponentensuiten wie Schaltflächen, App-Leisten und Navigationskomponenten, die speziell für verschiedene Anwendungsfälle und Bildschirmgrößen entwickelt wurden.
Navigationskomponenten
Material bietet auch mehrere Navigationskomponenten, die Ihnen bei der Implementierung der Navigation helfen, je nach Bildschirmgröße und Status.
NavigationBar
wird für kompakte Geräte verwendet, wenn Sie eine Ausrichtung auf maximal fünf 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. Es bietet Ergonomie und verbessert die Nutzerfreundlichkeit der Geräte.
NavigationRail( modifier = Modifier.fillMaxHeight(), ) { Destinations.entries.forEach { replyDestination -> NavigationRailItem( selected = selectedDestination == replyDestination, onClick = { }, icon = { } ) } }
Antworte mit beiden Standardthemen, um eine umfassende Nutzererfahrung für alle Gerätegrößen zu bieten.
NavigationDrawer
wird für Tablets mittlerer bis großer Größe verwendet, auf denen genügend Platz zur Darstellung von 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-Navigationskomponenten finden Sie im Adaptives Codelab Compose.
Design einer Komponente anpassen
M3 fördert Personalisierung und Flexibilität. Auf alle Komponenten werden Standardfarben angewendet, aber es stehen flexible APIs zur Verfügung, damit Sie deren Farben bei Bedarf anpassen können.
Die meisten Komponenten wie Karten und Schaltflächen bieten Standardoberflächen für die Darstellung von Farben und Höhen. Diese können Sie anpassen, um Ihre Komponente anzupassen:
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 sind auf den neuen visuellen Stil und die neue System-UI unter Android 12 und höher zurückzuführen. Zwei wichtige Bereiche, in denen es Änderungen gibt, sind Wellen und Overscroll. Es ist kein zusätzlicher Aufwand erforderlich, um diese Änderungen umzusetzen.
Welle
Wellenlinien beleuchten Oberflächen jetzt durch ein dezentes Funkeln, wenn sie gedrückt werden. Compose Material Ripple nutzt unter Android die Plattform RippleDrawable, die unter der Haube getragen wird. Daher ist „Sparkle Ripple“ ab Android 12 für alle Material-Komponenten verfügbar.
Overscroll
Beim Overscroll wird jetzt ein Stretch-Effekt am Rand von scrollbaren Containern verwendet.
Der Overscroll-Effekt ist in scrollbaren Container zusammensetzbaren Funktionen (z. B. LazyColumn
, LazyRow
und LazyVerticalGrid
) in Compose Foundation 1.1.0 und höher standardmäßig aktiviert, unabhängig vom API-Level.
Barrierefreiheit
Standards für Barrierefreiheit, die in Material-Komponenten integriert sind, sollen die Grundlage für inklusives Produktdesign bilden. Das Verständnis der Barrierefreiheit Ihres Produkts kann die Nutzerfreundlichkeit für alle Nutzer verbessern, auch für Nutzer mit eingeschränktem Sehvermögen, Blindheit, Hör- oder kognitiven Beeinträchtigungen, motorischen Beeinträchtigungen oder situativen Beeinträchtigungen (z. B. einem gebrochenen Arm).
Bedienungshilfen für Farben
Dynamische Farben wurden entwickelt, um die Standards für Barrierefreiheit im Hinblick auf den Farbkontrast zu erfüllen. Das System der Tonpaletten ist entscheidend dafür, dass jedes Farbschema standardmäßig barrierefrei zugänglich ist.
Das Farbsystem von Material bietet Standardtonwerte und ‐messungen, die verwendet werden können, um barrierefreie Kontrastverhältnisse zu erreichen.
Alle Materialkomponenten und das dynamische Design verwenden bereits die oben genannten Farbrollen aus einer Reihe von Tonpaletten, die ausgewählt wurden, um die Anforderungen an die Barrierefreiheit zu erfüllen. Achten Sie jedoch beim Anpassen von Komponenten darauf, geeignete Farbrollen zu verwenden und Diskrepanzen zu vermeiden.
Verwenden Sie On-Primär über dem primären Container und On-Primary-Container auf dem primären Container sowie dasselbe für andere Akzent- und neutrale Farben, um für den Nutzer barrierefreien Kontrast zu schaffen.
Die Verwendung eines tertiären Containers über dem primären Container gibt dem Nutzer eine Schaltfläche für einen geringen 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 ) ) { }
Barrierefreiheit der Typografie
Bei der M3-Typskala werden die statische Typrampe und die Werte aktualisiert, um ein vereinfachtes, aber dynamisches Framework mit Größenkategorien zu bieten, die geräteübergreifend skaliert werden.
In M3 können z. B. „Display Small“ je nach Gerätekontext, z. B. einem Smartphone oder Tablet, unterschiedliche Werte zugewiesen werden.
Großes Display
Material bietet Tipps zu adaptiven Layouts und faltbaren Geräten, damit Ihre Apps barrierefrei sind und die Ergonomie von Nutzern verbessert wird, die große Geräte halten.
Material bietet verschiedene Arten der Navigation, damit Sie auf großen Geräten eine bessere User Experience bieten können.
Weitere Informationen zu den Qualitätsrichtlinien für Android-Apps für große Bildschirme und unser Antwortbeispiel für adaptives und barrierefreies Design findest du hier.
Weitere Informationen
Weitere Informationen zu Material Theming 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 Compose
- Benutzerdefinierte Designsysteme in Compose