Jetpack Compose bietet eine Implementierung von Material Design 3, der nächsten Entwicklung von Material Design. Material 3 umfasst aktualisierte Designs, Komponenten und Material You-Personalisierungsfunktionen wie dynamische Farben und ist so konzipiert, dass es zum neuen visuellen Stil und zur System-UI von Android 12 und höher passt.
Unten wird die Implementierung von Material Design 3 anhand der Antwort-Beispiel-App veranschaulicht. 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"
Sobald die Abhängigkeit hinzugefügt wurde, können Sie Ihren Anwendungen 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 auf Funktions- oder Dateiebene mit der Annotation ExperimentalMaterial3Api aktivieren:
// import androidx.compose.material3.ExperimentalMaterial3Api
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun AppComposable() {
// M3 composables
}
Materielle Thematisierung
Ein M3-Design enthält die folgenden Untersysteme: Farbschema, Typografie und Formen. Wenn Sie diese Werte anpassen, werden Ihre Änderungen automatisch in die M3-Komponenten übernommen, mit denen Sie Ihre App erstellen.
Jetpack Compose implementiert diese Konzepte mit der zusammensetzbaren M3-Datei MaterialTheme:
MaterialTheme(
colorScheme = /* ...
typography = /* ...
shapes = /* ...
) {
// M3 app content
}
Um den Inhalt Ihrer Anwendung nach Belieben zu gestalten, definieren Sie das Farbschema, die Typografie und die Formen, die für Ihre App spezifisch sind.
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 werden. Hier ist zum Beispiel das Farbschema für das helle Design für Antworten:
Weitere Informationen zu Farbschema und Farbrollen
Farbschemas generieren
Sie können ein benutzerdefiniertes ColorScheme zwar manuell erstellen, es ist aber oft einfacher, eins anhand von Quellfarben Ihrer Marke zu generieren. Dazu können Sie das Tool Material Theme Builder verwenden und optional den Designcode für die Zusammensetzung exportieren. Die folgenden Dateien werden generiert:
Color.ktenthä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.ktenthält eine Konfiguration 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
)
}
Verwende isSystemInDarkTheme(), um helle und dunkle Designs zu unterstützen. Legen Sie anhand der Systemeinstellung fest, welches Farbschema verwendet werden soll: hell oder dunkel.
Dynamische Farbschemas
Dynamische Farben sind der Hauptteil von Material You. Ein Algorithmus leitet benutzerdefinierte Farben vom Hintergrund eines Nutzers ab, um ihn auf seine Apps und die System-UI anzuwenden. Diese Farbvorlage wird als Ausgangspunkt zum Generieren von hellen und dunklen Farbschemas verwendet.
Dynamische Farben sind ab Android 12 verfügbar. Wenn dynamische Farben verfügbar sind, kannst du 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
}
Farbnutzung
Sie können in Ihrer App über MaterialTheme.colorScheme auf die Farben des Material-Designs zugreifen:
Text(
text = "Hello theming",
color = MaterialTheme.colorScheme.primary
)
Jede Farbrolle kann je nach Status, Auffälligkeit und Betonung der Komponente an verschiedenen Stellen verwendet werden.
- „Primär“ ist die Grundfarbe, die für Hauptkomponenten wie markante Schaltflächen, aktive Zustände und die Färbung erhöhter Oberflächen verwendet wird.
- Die sekundäre Schlüsselfarbe wird für weniger auffällige Komponenten in der UI verwendet, z. B. Filter-Chips, und erhöht die Möglichkeiten für Farbausdrücke.
- Die tertiäre Schlüsselfarbe wird verwendet, um die Rollen von kontrastierenden Akzenten abzuleiten, die verwendet werden können, um Primär- und Sekundärfarben auszugleichen oder die Aufmerksamkeit auf ein Element zu lenken.
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,
)
}
In der Antwortnavigationsleiste 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 Textstile, die von Material Design 2 übernommen wurden. Die Benennung und Gruppierung wurden vereinfacht: Anzeige, Überschrift, Titel, Text und Label, jeweils mit den Größen Large, Medium und Small.
| 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 stellt zusammen mit den vorhandenen TextStyle- und schriftbezogenen Klassen die M3-Klasse Typography bereit, um die Material 3-Typskala zu modellieren. Der Typography-Konstruktor bietet Standardeinstellungen für jeden Stil, sodass Sie Parameter, die Sie nicht anpassen möchten, weglassen können:
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 die restlichen Größen weggelassen werden.
Sie können die Typografie anpassen, indem Sie die Standardwerte von 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
),
Nachdem Sie Ihre Typography definiert haben, übergeben Sie sie an M3 MaterialTheme:
MaterialTheme(
typography = replyTypography,
) {
// M3 app Content
}
Textstile verwenden
Mit MaterialTheme.typography können Sie die Typografie abrufen, die für die M3-Zusammensetzbare MaterialTheme-Funktion angegeben wurde:
Text(
text = "Hello M3 theming",
style = MaterialTheme.typography.titleLarge
)
Text(
text = "you are learning typography",
style = MaterialTheme.typography.bodyMedium
)
Weitere Informationen zu den Materialrichtlinien findest du unter Typografie anwenden.
Formen
Materialoberflächen können in verschiedenen Formen dargestellt werden. Sie formt die direkte Aufmerksamkeit, identifizieren Komponenten, kommunizieren den Zustand und drücken die Marke aus.
Die Formskala definiert den Stil der Containerecken und bietet einen Bereich der Rundung von quadratisch bis vollständig kreisförmig.
Formen definieren
In Compose erhält die M3-Klasse Shapes erweiterte Parameter, um neue M3-Formen zu unterstützen. Die M3-Formskala ähnelt eher der Schriftskala und ermöglicht einen ausdrucksstarken Bereich von Formen auf der Benutzeroberfläche.
Es gibt verschiedene Größen von Formen:
- Extraklein
- Klein
- Mittel
- Groß
- Extragroß
Standardmäßig hat jede Form einen Standardwert, den Sie jedoch überschreiben können:
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 Ihre Shapes definiert haben, können Sie sie an 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.
Form mittel und groß 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 und die Kreisform zeigt voll eingekreiste Kanten:
Card(shape = RectangleShape) { /* card content */ }
Card(shape = CircleShape) { /* card content */ }
In den folgenden Beispielen werden einige der Komponenten gezeigt, auf die Standardformwerte angewendet werden:
Hier finden Sie 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 UI zu betonen:
- Verwendung von Oberfläche, Oberflächenvariante und Hintergrund sowie oberflächlich-Varianten-Farben aus dem erweiterten M3-Farbsystem. Zum Beispiel kann surface mit einer „on-Oberfläche“-Variante und „Surface-Variante“ mit „on-Oberfläche“ verwendet werden, um unterschiedliche Betonungen zu erzielen.
- Unterschiedliche Schriftstärken für Text verwenden Oben haben Sie gesehen, dass Sie für unsere Schriftskala benutzerdefinierte Gewichtungen festlegen können,
bodyLarge = TextStyle(
fontWeight = FontWeight.Bold
),
bodyMedium = TextStyle(
fontWeight = FontWeight.Normal
)
Höhe
Material 3 stellt Erhebungen in erster Linie mithilfe von Ton-Overlays dar. Dies ist eine neue Möglichkeit, Container und Oberflächen voneinander zu unterscheiden – bei einer Erhöhung der Höhe 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 der primären Farbfläche.
Die M3-Oberfläche – die zusammensetzbare Back-up-Funktion hinter den meisten M3-Komponenten – unterstützt sowohl Höhen in Ton als auch Schatten:
Surface(
modifier = Modifier,
tonalElevation = /*...
shadowElevation = /*...
) {
Column(content = content)
}
Materialkomponenten
Material Design umfasst eine Vielzahl von Material-Komponenten wie Schaltflächen, Chips, Karten, Navigationsleisten, die bereits auf Material Design basieren 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 je nach Betonung und Aufmerksamkeit viele Versionen derselben Komponenten, die 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 hervorgehobene 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 Komponenten wie Schaltflächen, App-Leisten und Navigationskomponenten, die speziell für unterschiedliche Anwendungsfälle und Bildschirmgrößen entwickelt wurden.
Navigationskomponenten
Material bietet außerdem verschiedene 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 Nutzererfahrung auf diesen Geräten.
NavigationRail(
modifier = Modifier.fillMaxHeight(),
) {
Destinations.entries.forEach { replyDestination ->
NavigationRailItem(
selected = selectedDestination == replyDestination,
onClick = { },
icon = { }
)
}
}
BottomNavigationBar (links) und NavigationRail (rechts)Wenn du beide als Standardmotiv verwenden möchtest, kannst du auf allen Gerätegrößen eine eindrucksvolle Nutzererfahrung bieten.
NavigationDrawer wird für Tablets mittlerer bis großer Größe verwendet, auf denen genügend Platz zum Anzeigen 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 User Experience, Ergonomie und Erreichbarkeit. Weitere Informationen zu den Navigationskomponenten von Material finden Sie im Tool zum Erstellen adaptiver Codes.
Design einer Komponente anpassen
M3 fördert Personalisierung und Flexibilität. Auf alle Komponenten werden Standardfarben angewendet. Sie können jedoch flexible APIs zur Verfügung stellen, um ihre Farben bei Bedarf anzupassen.
Die meisten Komponenten wie Karten und Schaltflächen stellen Standardoberflächen zur Darstellung von Farben und Höhendaten für Objekte bereit, die angepasst werden können, 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 beruhen auf dem neuen visuellen Stil und der neuen System-UI von Android 12 und höher. Zwei wichtige Bereiche mit Änderungen sind Wellen und Overscroll. Für die Implementierung dieser Änderungen ist kein zusätzlicher Aufwand erforderlich.
Welle
Ripple verwendet jetzt ein dezentes Funkeln, um Oberflächen zu beleuchten, wenn es gedrückt wird. Bei Compose Material Ripple wird unter Android die Plattform „RippleDrawable“ verwendet. Daher ist „Glitzer-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.
Das erweiterte Scrollen ist in den zusammensetzbaren Funktionen für Container mit Scrollen (z. B. LazyColumn, LazyRow und LazyVerticalGrid) in Compose Foundation 1.1.0 und höher standardmäßig aktiviert, unabhängig vom API-Level.
Bedienungshilfen
Die in Material-Komponenten integrierten Standards zur Barrierefreiheit dienen als Grundlage für inklusives Produktdesign. Das Verständnis der Barrierefreiheit Ihres Produkts kann die Usability für alle Nutzer verbessern, einschließlich Menschen mit eingeschränktem Sehvermögen, Blindheit, Hörbeeinträchtigung, kognitiven Beeinträchtigungen, motorischen oder situativen Beeinträchtigungen (z. B. einem gebrochenen Arm).
Farb-Bedienungshilfen
Dynamische Farben entsprechen den Standards für Barrierefreiheit im Hinblick auf Farbkontraste. Das System der Tonpaletten ist entscheidend, um jedes Farbschema standardmäßig barrierefrei zugänglich zu machen.
Das Farbsystem von Material liefert Standardtonwerte und -messungen, die verwendet werden können, um barrierefreie Kontrastverhältnisse zu erreichen.
Alle Material-Komponenten und dynamischen Designs verwenden bereits die oben genannten Farbrollen aus einer Reihe von Tonvorlagen, die ausgewählt wurden, um die Anforderungen an die Barrierefreiheit zu 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.
Wenn ein tertiärer Container über dem Primärcontainer verwendet wird, erhält der Nutzer eine Schaltfläche für schlechten 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
Mit der M3-Typskala werden die statische Typerweiterung und die zugehörigen Werte aktualisiert, um ein vereinfachtes, aber dynamisches Framework mit Größenkategorien zu bieten, die geräteübergreifend skaliert werden.
In M3 können „Display Small“ beispielsweise je nach Gerätekontext, z. B. Smartphone oder Tablet, unterschiedliche Werte zugewiesen werden.
Großes Display
Material bietet Informationen zu adaptiven Layouts und faltbaren Geräten, damit deine Apps barrierefrei gestaltet werden können und die Ergonomie von Nutzern mit großen Geräten verbessert wird.
Material bietet verschiedene Arten der Navigation, damit du auch auf großen Geräten eine bessere Nutzererfahrung bieten kannst.
Weitere Informationen findest du in den Qualitätsrichtlinien für Android-Apps für große Bildschirme und in unserem Antwortbeispiel für adaptives und barrierefreies Design.
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