Material Design 3 in Compose

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.

Hinweis: Die Begriffe „Material Design 3“, „Material 3“ und „M3“ sind austauschbar. Die bestehende Material Design-Spezifikation und die entsprechende Bibliothek „androidx.compose.material“ werden als „Material Design 2“, „Material 2“ oder „M2“ bezeichnet.

Unten wird als Beispiel die Reply-Beispiel-App verwendet, um Material Design 3 zu implementieren. Das Antwortbeispiel basiert vollständig auf Material Design 3.

Abbildung 1: Mit Material Design 3 auf die Beispiel-App antworten

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
}
Material3Snippets.kt

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.

Abbildung 2: Subsysteme von Material Design: Farbe, Typografie und Formen

Jetpack Compose implementiert diese Konzepte mit der zusammensetzbaren Funktion MaterialTheme für M3:

MaterialTheme(
    colorScheme = /* ...
    typography = /* ...
    shapes = /* ...
) {
    // M3 app content
}
Material3Snippets.kt

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:

Abbildung 3: Antwort auf Beispiel-App mit hellem Farbschema

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)
// ..
// ..
Material3Snippets.kt

• 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
    )
}
Material3Snippets.kt

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.

Abbildung 4: Auf das dynamische Design der Beispiel-App antworten (links) und Standard-App-Design (rechts)

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
}
Material3Snippets.kt

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
)
Material3Snippets.kt

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.

Abbildung 5: Primärer Container und Textfelder mit der Farbe „on-primary-container“.

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,
    )
}
Material3Snippets.kt

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.

Abbildung 6: Kombination aus tertiärem Container und tertiärem Container für die Schaltfläche für eine unverankerte Aktionsschaltfläche.

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.

Abbildung 7: Standardtypografieskala für Material Design 3

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

Hinweis: Im Gegensatz zur M2-Klasse Typography enthält die Klasse M3 Typography derzeit keinen defaultFontFamily-Parameter. Sie müssen stattdessen den fontFamily-Parameter in jeder der einzelnen TextStyles verwenden.

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
    ),
    // ..
)
// ..
Material3Snippets.kt

Abbildung 8: Text groß, Text mittel und Label „Mittel“ für unterschiedliche typografische Verwendung.

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
),
Material3Snippets.kt

Sobald Sie die Typography definiert haben, übergeben Sie sie an die M3-MaterialTheme:

MaterialTheme(
    typography = replyTypography,
) {
    // M3 app Content
}
Material3Snippets.kt

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
)
Material3Snippets.kt

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)
)
Material3Snippets.kt

Nachdem Sie die Shapes definiert haben, können Sie sie an die M3-MaterialTheme übergeben:

MaterialTheme(
    shapes = replyShapes,
) {
    // M3 app Content
}
Material3Snippets.kt

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 */
}
Material3Snippets.kt

Abbildung 9: Mittlere Form für Karte und große Form für unverankerte Aktionsschaltfläche in der Antwort-Beispiel-App

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 */ }
Material3Snippets.kt

Die folgenden Beispiele zeigen einige der Komponenten, auf die Standardformwerte angewendet werden:

Abbildung 10: Standardformwerte für alle Material 3-Komponenten.

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.

Abbildung 11: Neutrale Farbkombinationen zur Hervorhebung verwenden.

• 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
)
Material3Snippets.kt

Hinweis: Für deaktivierte Zustände in M3 ist es weiterhin akzeptabel, „On-X“-Farben (wobei x Primär-, Sekundär-, Oberflächenfarben usw. sein kann) mit Alpha-Werten zu verwenden.

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.

Abbildung 12: Farbtonhöhe mit SchattenhöheE

Höhen-Overlays in dunklen Designs wurden auch in Material 3 in Tonwerte umgewandelt. Die Overlay-Farbe stammt aus der Primärfarbfläche.

Abbildung 13: Schattenerhöhung im Vergleich zur Farbtonverstärkung in Material Design 3

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)
}
Material3Snippets.kt

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")
}
Material3Snippets.kt

M3 bietet viele Versionen derselben Komponenten, die je nach Betonung und Aufmerksamkeit in verschiedenen Rollen verwendet werden können.

Abbildung 14: Schaltflächenbetonung von FAB, Primäre Schaltfläche bis Textschaltfläche

• 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),
    )
}
Material3Snippets.kt

• Eine ausgefüllte Schaltfläche für eine stark betonte Aktion:

Button(onClick = { /*..*/ }) {
    Text(text = stringResource(id = R.string.view_entry))
}
Material3Snippets.kt

• Eine Textschaltfläche für eine Aktion mit geringer Betonung:

TextButton(onClick = { /*..*/ }) {
    Text(text = stringResource(id = R.string.replated_articles))
}
Material3Snippets.kt

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 = { }
        )
    }
}
Material3Snippets.kt

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 = { }
        )
    }
}
Material3Snippets.kt

Abbildung 15: Antwort-Showcase von BottomNavigationBar (links) und NavigationRail (rechts)

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 = { }
        )
    }
}) {
}
Material3Snippets.kt

Abbildung 16: Antwort auf „Showcase“ mit der permanenten Navigationsleiste

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
}
Material3Snippets.kt

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.

Abbildung 17: Welle in M2 und M3 im Vergleich

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.

Abbildung 18: Overscroll durch Stretch-Effekt am Rand des Containers

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.

Abbildung 19: Antwortbeispiel-App: Paletten für primäre, sekundäre und tertiäre Tonwerte (von oben nach unten)

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
    )
) {
}
Material3Snippets.kt

Abbildung 20: Ausreichender Kontrast (links) vs. schlechter Kontrast (rechts)

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 Richtlinien für große Bildschirme unter Android und unser Antwortbeispiel für adaptives und barrierefreies Design

Weitere Informationen

Weitere Informationen zu Material Theming in Compose finden Sie in den folgenden Ressourcen:

Beispiel-Apps

• Antwortvorlage – Beispiel-App

Docs

• Migration von Material 2 zu Material 3 in Compose
• Richtlinien für Material Design

API-Referenz und Quellcode

• Referenz zur Material 3 API-Referenz
• Material 3-Beispiele im Quellcode erstellen

Videos

• Material You in Jetpack Compose