Jetpack Compose bietet eine Implementierung von Material Design 3, Entwicklung des Material Design. Material 3 umfasst aktualisierte Themen, Komponenten und Material You-Personalisierungsfunktionen wie dynamische Farben Sie wurden so entwickelt, dass sie zum neuen visuellen Stil und zur System-UI von Android 12 passen. und höher.
Unten sehen Sie die Implementierung von Material Design 3. Verwenden Sie dazu die Beispiel-App für Antworten. Das Antwortbeispiel ist basierend auf Material Design 3.
<ph type="x-smartling-placeholder">![Beispiel-App für Antworten in Material Design 3](https://developer.android.com/static/develop/ui/compose/images/m3-sampleapp.png?authuser=9&hl=de)
Abhängigkeit
Wenn Sie Material 3 in Ihrer Google Compose-App verwenden möchten, fügen Sie Compose Material 3 hinzu
Abhängigkeit von build.gradle
-Dateien:
implementation "androidx.compose.material3:material3:$material3_version"
Sobald die Abhängigkeit hinzugefügt ist, können Sie Material Design-Systeme hinzufügen, wie Farben, Typografie und Form.
Experimentelle APIs
Einige M3 APIs gelten als experimentell. In solchen Fällen müssen Sie
die Funktion oder Dateiebene mithilfe der Annotation ExperimentalMaterial3Api
:
// 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. Bei der Anpassung werden Ihre Änderungen automatisch in die M3-Komponenten übernommen, mit denen Sie Ihre App erstellen können.
<ph type="x-smartling-placeholder">![Subsysteme von Material Design: Farbe, Typografie und Formen](https://developer.android.com/static/develop/ui/compose/images/m3-theming.png?authuser=9&hl=de)
Jetpack Compose implementiert diese Konzepte mit der M3-MaterialTheme
zusammensetzbar:
MaterialTheme( colorScheme = /* ... typography = /* ... shapes = /* ... ) { // M3 app content }
Definieren Sie für den Anwendungsinhalt ein Design, Farbschema, Typografie und für Ihre App spezifisch sind.
Farbschema
Die Grundlage eines Farbschemas ist ein Satz von fünf Schlüsselfarben. Jede dieser Optionen Farben beziehen sich auf eine Tonpalette mit 13 Tönen, die von Material 3 verwendet werden. Komponenten. Dies ist z. B. das Farbschema für das helle Design Antwort:
<ph type="x-smartling-placeholder">![Helles Farbschema für Antwortbeispiel-App](https://developer.android.com/static/develop/ui/compose/images/m3-light.png?authuser=9&hl=de)
Weitere Informationen zu Farbschema und Farbrollen
Farbschemas generieren
Es ist zwar möglich, ein benutzerdefiniertes ColorScheme
manuell zu erstellen, es ist aber oft einfacher,
mit den Farben Ihrer Marke erstellen. Das Thema Material
Builder können Sie hierzu
Themencode erstellen Die folgenden Dateien werden generiert:
Color.kt
enthält die Farben Ihres Designs mit allen Rollen, die für hellen und dunklen Designfarben.
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 Konfiguration für helle und dunkle Farbschemata sowie die App aus.
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. Basierend auf den
Systemeinstellung festlegen, welches Farbschema verwendet werden soll: hell oder dunkel.
Dynamische Farbschemas
Dynamische Farben sind der wichtigste Bestandteil von Material You. Der Algorithmus leitet benutzerdefinierte Farben aus dem Hintergrund eines Nutzers ab, die dann auf seine Apps und der System-UI. Diese Farbvorlage wird als Ausgangspunkt für die Generierung hellen und dunklen Farbschemata.
<ph type="x-smartling-placeholder">![Dynamisches Design für Antwort in der Beispiel-App vom Hintergrund (links) und Standard-App-Design (rechts)](https://developer.android.com/static/develop/ui/compose/images/m3-dynamic.png?authuser=9&hl=de)
Dynamische Farben sind ab Android 12 verfügbar. Wenn die dynamische Farbe
verfügbar ist, können Sie eine dynamische ColorScheme
einrichten. Ist dies nicht der Fall,
oder ein benutzerdefiniertes helles oder dunkles ColorScheme
-Element verwenden.
ColorScheme
bietet Builder-Funktionen zum Erstellen einer dynamischen Lampe oder eines
dunkles Farbschema:
// 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 auf die Farben des Material Themes in Ihrer App zugreifen:
MaterialTheme.colorScheme
:
Text( text = "Hello theming", color = MaterialTheme.colorScheme.primary )
Jede Farbrolle kann an verschiedenen Stellen verwendet werden, je nachdem, Bedeutung und Betonung.
- „Primär“ ist die Grundfarbe, die für Hauptkomponenten wie markante Schaltflächen, Aktivierungsstatus und die Färbung erhöhter Oberflächen.
- Die sekundäre Schlüsselfarbe wird für weniger auffällige Komponenten in der Benutzeroberfläche verwendet, z. B. als Infofelder für Filter und bietet mehr Möglichkeiten, Farben auszudrücken.
- Die tertiäre Schlüsselfarbe wird verwendet, um die Rollen kontrastierender Akzente abzuleiten, die können verwendet werden, um Primär- und Sekundärfarben aufeinander abzustimmen Aufmerksamkeit auf ein Element lenken.
Das Design der Beispiel-Antwort-App verwendet die Farbe für den primären Container Primär-Container, um das ausgewählte Element hervorzuheben.
<ph type="x-smartling-placeholder">![Primärer Container und Textfelder mit der Farbe des primären Containers.](https://developer.android.com/static/develop/ui/compose/images/m3-container.png?authuser=9&hl=de)
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 in der Antwortnavigationsleiste, wie sekundär und tertiär Containerfarben werden im Kontrast verwendet, um Betonung und Akzent zu schaffen.
<ph type="x-smartling-placeholder">![Kombination aus Tertiär-Container und Tertiär-Container für Floating-Aktionsschaltfläche.](https://developer.android.com/static/develop/ui/compose/images/m3-navdrawer.png?authuser=9&hl=de)
Typografie
Material Design 3 definiert eine Schriftskala, einschließlich Textstile. die aus Material Design 2 übernommen wurden. Die Benennung und Gruppierung wurden vereinfacht zu: „display“, „headline“, „title“, „body“ und „label“, mit „Large“, „Medium“, und kleine Größen für jedes Element.
<ph type="x-smartling-placeholder">![Standard-Typografieskala für Material Design 3](https://developer.android.com/static/develop/ui/compose/images/m3-typography.png?authuser=9&hl=de)
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 die M3-Klasse Typography
zusammen mit den vorhandenen
TextStyle
- und schriftbezogene Klassen, um den Material 3-Typ zu modellieren
Der Typography
-Konstruktor bietet Standardeinstellungen für jeden Stil, die Sie weglassen können
Parameter, 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 ), // .. ) // ..
![Text groß, Text mittel und Label mittel für verschiedene typografische Verwendungen.](https://developer.android.com/static/develop/ui/compose/images/m3-body.png?authuser=9&hl=de)
Ihr Produkt benötigt wahrscheinlich nicht alle 15 Standardstile aus dem Material Design. mit der Schriftgröße. In diesem Beispiel werden fünf Größen für einen reduzierten Satz ausgewählt, während die werden ausgelassen.
Sie können die Typografie anpassen, indem Sie die Standardwerte von TextStyle
ändern.
und schriftbezogene Properties wie fontFamily
und letterSpacing
.
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
Sie können die Typografie abrufen, die für die zusammensetzbare Funktion MaterialTheme
in M3 angegeben wurde:
mit MaterialTheme.typography
:
Text( text = "Hello M3 theming", style = MaterialTheme.typography.titleLarge ) Text( text = "you are learning typography", style = MaterialTheme.typography.bodyMedium )
Weitere Informationen zu den Materialrichtlinien für die Bewerbung von Typografie.
Formen
Materialoberflächen können in verschiedenen Formen dargestellt werden. Gestaltet direkte Aufmerksamkeit, Komponenten identifizieren, Zustand kommunizieren und die Marke zum Ausdruck bringen.
Die Formskala definiert den Stil der Containerecken und bietet eine Reihe von von quadratisch zu vollständig kreisförmig sein.
Formen definieren
Compose bietet der M3-Klasse Shapes
erweiterte Parameter zur Unterstützung
neue M3-Formen. Die M3-Formskala ähnelt eher der Schriftskala,
und so eine ausdrucksstarke Form von Formen auf der Benutzeroberfläche ermöglichen.
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 Formskala für alle Komponenten im MaterialTheme
- oder
können Sie dies für einzelne Komponenten tun.
Form mittel und groß mit Standardwerten anwenden:
Card(shape = MaterialTheme.shapes.medium) { /* card content */ } FloatingActionButton( shape = MaterialTheme.shapes.large, onClick = { } ) { /* fab content */ }
![Mittlere Form für Karte und große Form für unverankerte Aktionsschaltfläche in der Beispiel-Antwort-App.](https://developer.android.com/static/develop/ui/compose/images/m3-shape.png?authuser=9&hl=de)
Es gibt zwei weitere Formen, RectangleShape
und CircleShape
, die Teil
von „Compose“. Die Rechteckform hat keinen Rahmenradius und die Kreisform wird vollständig angezeigt.
Eingekreiste Kanten:
Card(shape = RectangleShape) { /* card content */ } Card(shape = CircleShape) { /* card content */ }
In den folgenden Beispielen werden einige der Komponenten mit Standardformwerten gezeigt. auf sie angewendet:
<ph type="x-smartling-placeholder">![Standardformwerte für alle Material 3-Komponenten.](https://developer.android.com/static/develop/ui/compose/images/m3-shape2.png?authuser=9&hl=de)
Weitere Informationen zu den Materialrichtlinien für die Bewerbung von Form angezeigt.
Betonung
M3 wird durch Farbvariationen und Farbvarianten hervorgehoben. Kombinationen. In M3 gibt es zwei Möglichkeiten, Ihre UI zu betonen:
- Die Verwendung von Oberfläche, Oberflächenvariante und Hintergrund verschiedene Farben aus dem erweiterten M3-Farbsystem. Beispiel: Oberflächenvariante kann mit „Oberflächenvariante“ und „Oberflächenvariante“ verwendet werden. auf der Oberfläche, um verschiedene Betonungen zu erzielen.
![Neutrale Farbkombinationen zur Betonung verwenden.](https://developer.android.com/static/develop/ui/compose/images/m3-emphasis.png?authuser=9&hl=de)
- Unterschiedliche Schriftstärken für Text verwenden Wie Sie oben gesehen haben, können Sie zu unserer Schriftskala hinzufügen, um verschiedene Betonungen zu schaffen.
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 ein neues Container und Oberflächen voneinander zu unterscheiden und die Tonwerte zu erhöhen Elevation verwendet einen auffälligeren Ton – zusätzlich zu Schatten.
<ph type="x-smartling-placeholder">![Höhen in Tonnenhöhe mit Schatten](https://developer.android.com/static/develop/ui/compose/images/m3-elevation.png?authuser=9&hl=de)
Höhen-Overlays in dunklen Designs sind jetzt auch in Tonfarben-Overlays verfügbar. Material 3. Die Overlay-Farbe stammt aus der primären Farbfläche.
<ph type="x-smartling-placeholder">![Schattenhöhe im Vergleich zur Tonhöhenhöhe in Material Design 3](https://developer.android.com/static/develop/ui/compose/images/m3-surface.png?authuser=9&hl=de)
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 bietet zahlreiche Material-Komponenten. (z. B. Schaltflächen, Chips, Karten, Navigationsleisten), die bereits im Designs und helfen Ihnen, ansprechende Material Design-Apps zu erstellen. Sie können jetzt Komponenten mit Standardeigenschaften sofort ein.
Button(onClick = { /*..*/ }) { Text(text = "My Button") }
M3 bietet viele Versionen derselben Komponenten, die in verschiedenen Rollen verwendet werden können je nach Betonung und Aufmerksamkeit.
<ph type="x-smartling-placeholder">![Betonung der Schaltfläche von FAB, von primär zur Schaltfläche „Text“](https://developer.android.com/static/develop/ui/compose/images/m3-emphasis2.png?authuser=9&hl=de)
- </ph>
- 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 große Vielfalt an Komponenten wie Schaltflächen, App- Leisten, Navigationskomponenten, die speziell für verschiedene Zwecke entwickelt wurden Gehäuse und Bildschirmgrößen.
Navigationskomponenten
Material bietet auch mehrere Navigationskomponenten, die dir dabei helfen, je nach Bildschirmgröße und -status anpassen.
NavigationBar
wird für kompakte Geräte verwendet, wenn das Ziel fünf oder weniger sein soll
Ziele:
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 in
Querformat verwenden. Ergonomische Funktionen und ein besseres Nutzererlebnis
für diese Geräte.
NavigationRail( modifier = Modifier.fillMaxHeight(), ) { Destinations.entries.forEach { replyDestination -> NavigationRailItem( selected = selectedDestination == replyDestination, onClick = { }, icon = { } ) } }
![Antwort-Showcase für BottomNavigationBar(left) und NavigationRail(right)](https://developer.android.com/static/develop/ui/compose/images/m3-showcasebottom.png?authuser=9&hl=de)
BottomNavigationBar
(links) und NavigationRail
(rechts)Wenn du beide als Standardmotiv verwenden möchtest, kannst du eine umfassende Nutzererfahrung bieten. Gerätegrößen.
NavigationDrawer
wird für Tablets der mittleren bis großen Größe verwendet, auf denen
genügend Platz, um Details anzuzeigen. Sie können sowohl PermanentNavigationDrawer
als auch
ModalNavigationDrawer
zusammen mit NavigationRail
.
PermanentNavigationDrawer(modifier = Modifier.fillMaxHeight(), drawerContent = { Destinations.entries.forEach { replyDestination -> NavigationRailItem( selected = selectedDestination == replyDestination, onClick = { }, icon = { }, label = { } ) } }) { }
![Darstellung der Antwort auf die permanente Navigationsleiste](https://developer.android.com/static/develop/ui/compose/images/m3-showcasedrawer.png?authuser=9&hl=de)
Navigationsoptionen verbessern die User Experience, Ergonomie und Erreichbarkeit. Weitere Informationen zu den Navigationskomponenten von Material findest du in der Adaptives Codelab erstellen
Design einer Komponente anpassen
M3 fördert Personalisierung und Flexibilität. Alle Komponenten haben Standardeinstellungen die auf sie angewendet wurden, aber flexible APIs zur Verfügung stellen, um ihre Farben anzupassen, erforderlich.
Die meisten Komponenten, wie Karten und Schaltflächen, stellen eine Standardfarbe für die Objektbeleuchtung bereit. und Höhenoberflächen, die Sie ändern 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 stammen aus dem neuen visuellen Stil und der System-UI Android 12 und höher. Zwei wichtige Bereiche, in denen es Änderungen gibt, sind Wellen und Overscroll verwenden. 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. Compose Material Ripple nutzt die Plattform „RippleDrawable“ im Hintergrund auf Das Funkeln ist ab Android 12 für alle Materialien Komponenten.
<ph type="x-smartling-placeholder">![Welle in M2 vs. M3](https://developer.android.com/static/develop/ui/compose/images/m3-ripple.gif?authuser=9&hl=de)
Overscroll
Beim Overscroll wird jetzt ein Stretch-Effekt am Rand von scrollbaren Containern verwendet.
Das gestreckte Overscroll ist in zusammensetzbaren Scrolling-Containern standardmäßig aktiviert.
Beispiel: LazyColumn
, LazyRow
und LazyVerticalGrid
– in
Compose Foundation 1.1.0 und höher, unabhängig vom API-Level.
![Overscroll mit Streckeffekt am Rand des Containers](https://developer.android.com/static/develop/ui/compose/images/m3-overscroll.gif?authuser=9&hl=de)
Bedienungshilfen
Die in Material-Komponenten integrierten Standards zur Barrierefreiheit dienen dazu, die Grundlage für inklusives Produktdesign. Die Leistungsfähigkeit Ihres Produkts zu verstehen Barrierefreiheit kann die Usability für alle Nutzenden verbessern, auch für diejenigen mit geringer Sehvermögen, Blindheit, Hörbeeinträchtigungen, kognitive Beeinträchtigungen, motorische Einschränkungen Beeinträchtigungen oder situativen Beeinträchtigungen (z. B. ein gebrochener Arm).
Farb-Bedienungshilfen
Dynamische Farben entsprechen den Standards für Barrierefreiheit im Hinblick auf Farbkontraste. Das System der Tonpaletten ist entscheidend, um jedes Farbschema barrierefrei zu machen. ist standardmäßig aktiviert.
Das Farbsystem des Materials liefert Standardtonwerte und -messungen, die um barrierefreie Kontrastverhältnisse zu erreichen.
<ph type="x-smartling-placeholder">![Beispiel-App für Antworten: Primäre, sekundäre und tertiäre Farbpaletten (von oben nach unten)](https://developer.android.com/static/develop/ui/compose/images/m3-colorpallets.png?authuser=9&hl=de)
Alle Material-Komponenten und dynamischen Designs verwenden bereits die oben genannten Farbrollen. aus einer Reihe von Farbpaletten, die im Sinne der Barrierefreiheit ausgewählt wurden Anforderungen. Wenn Sie jedoch Komponenten anpassen, Farbrollen und vermeiden Abweichungen.
Verwenden Sie den lokalen Container zusätzlich zum primären Container und dann den primären Container Primärcontainer. Dasselbe gilt für andere Akzent- und neutrale Farben, um den Nutzenden barrierefrei sind.
Die Verwendung eines tertiären Containers auf dem primären Container führt zu einer schlechten Schaltfläche „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 ) ) { }
![Ausreichender Kontrast (links) vs. Schlechter Kontrast (rechts)](https://developer.android.com/static/develop/ui/compose/images/m3-contrast.png?authuser=9&hl=de)
Typografie-Bedienungshilfen
Mit der M3-Skalierung werden die Erhöhung und die Werte des statischen Typs aktualisiert, um eine vereinfachte ein dynamisches Framework von Größenkategorien, die geräteübergreifend skaliert werden.
Zum Beispiel können in M3 der Option „Display (klein)“ verschiedene Werte zugewiesen werden, je nachdem, vom Kontext des Geräts abhängig, z. B. von einem Smartphone oder Tablet.
Großes Display
Material liefert Informationen zu adaptiven Layouts und faltbaren Geräten, damit deine Apps und die Ergonomie von Nutzenden mit großen Geräten verbessern.
Material bietet verschiedene Arten der Navigation, die dir dabei helfen, die die Nutzerfreundlichkeit auf großen Geräten verbessern.
Weitere Informationen zu den Qualitätsrichtlinien für Android-Apps für große Bildschirme und findest du in unserem Antwortbeispiel für adaptives und barrierefreies Design.
Weitere Informationen
Weitere Informationen zu Material Theming in Compose findest du 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