Material Design 3 in Compose

Jetpack Compose bietet eine Implementierung von Material You und Material 3 Expressive, der nächsten Entwicklungsstufe von Material Design. M3 Expressive ist eine Erweiterung von Material Design 3, die auf Forschungsergebnissen basierende Updates für Designs, Komponenten, Bewegungen, Typografie und mehr umfasst. All diese Elemente sollen Ihnen dabei helfen, ansprechende und attraktive Produkte zu entwickeln, die Nutzer lieben. Außerdem werden die Personalisierungsfunktionen von Material You wie dynamische Farben unterstützt. M3 Expressive ergänzt das visuelle Design und die System-UI von Android 16.

Hinweis: Die Begriffe „Material Design 3“, „Material 3“ und „M3“ sind austauschbar.

Im Folgenden wird die Implementierung von Material Design 3 anhand der Beispiel-App „Reply“ veranschaulicht. Das Beispiel „Reply“ basiert vollständig auf Material Design 3.

Abbildung 1. Beispiel-App „Reply“ mit 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 die Abhängigkeit hinzugefügt wurde, 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 Annotation ExperimentalMaterial3Api aktivieren:

// import androidx.compose.material3.ExperimentalMaterial3Api
@Composable
fun AppComposable() {
    // M3 composables
}
Material3Snippets.kt

Material Theming

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 übernommen, die Sie zum Erstellen Ihrer App verwenden.

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

Jetpack Compose implementiert diese Konzepte mit der M3-MaterialTheme-Komposition:

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

Wenn Sie das Design Ihrer App-Inhalte festlegen möchten, definieren Sie das Farbschema, die Typografie und die Formen, die für Ihre App spezifisch sind.

Farbschema

Die Grundlage eines Farbschemas sind die fünf Schlüsselfarben. Jede dieser Farben bezieht sich auf eine Farbpalette mit 13 Farbtönen, die von Material 3-Komponenten verwendet werden. Dies ist beispielsweise das Farbschema für das helle Design für Reply:

Abbildung 3: Helles Farbschema der Beispiel-App „Reply“

Weitere Informationen zu Farbschema und Farbrollen

Farbschemata generieren

Du kannst ein benutzerdefiniertes ColorScheme zwar manuell erstellen, aber es ist oft einfacher, eines mit Quellfarben deiner Marke zu generieren. Mit dem Material Theme Builder können Sie dies tun und optional Compose-Theming-Code exportieren. Die folgenden Dateien werden generiert:

• Color.kt enthält die Farben Ihres Designs mit allen Rollen, die sowohl für helle als auch für dunkle Designfarben 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 Farbschemas 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
    )
}
Material3Snippets.kt

Verwenden Sie isSystemInDarkTheme(), um helle und dunkle Designs zu unterstützen. Anhand der Systemeinstellung wird festgelegt, welches Farbschema verwendet werden soll: hell oder dunkel.

Dynamische Farbschemata

Dynamische Farben sind der wichtigste Teil von Material You. Dabei leitet ein Algorithmus benutzerdefinierte Farben aus dem Hintergrundbild eines Nutzers ab, die auf seine Apps und die System-UI angewendet werden. Diese Farbpalette wird als Ausgangspunkt für die Generierung von hellen und dunklen Farbschemas verwendet.

Abbildung 4: Dynamisches Design der Beispiel-App „Reply“ aus dem Hintergrund (links) und Standarddesign der App (rechts)

Dynamische Farben sind unter Android 12 und höher verfügbar. Wenn die dynamische Farbe verfügbar ist, können Sie eine dynamische ColorScheme einrichten. Andernfalls sollten Sie auf ein benutzerdefiniertes helles oder dunkles ColorScheme zurückgreifen.

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

Farbverwendung

Sie können in Ihrer App über MaterialTheme.colorScheme auf die Farben des Material-Designs zugreifen:

Text(
    text = "Hello theming",
    color = MaterialTheme.colorScheme.primary
)
Material3Snippets.kt

Jede Farbrolle kann je nach Status, Hervorhebung und Betonung der Komponente an verschiedenen Stellen verwendet werden.

• Die Hauptfarbe ist die Grundfarbe, die für wichtige Komponenten wie auffällige Buttons, aktive Zustände und die Tönung von erhöhten Oberflächen verwendet wird.
• Die sekundäre Schlüsselfarbe wird für weniger auffällige Komponenten in der Benutzeroberfläche verwendet, z. B. Filter-Chips, und erweitert die Möglichkeiten der Farbdarstellung.
• 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 der Beispiel-App „Reply“ wird die Farbe „on-primary-container“ über „primary-container“ verwendet, um das ausgewählte Element hervorzuheben.

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

In der Navigationsleiste von Reply siehst du, wie sekundäre und tertiäre Containerfarben im Kontrast verwendet werden, um Akzente zu setzen.

Abbildung 6: Kombination aus „tertiary-container“ und „on-tertiary-container“ für unverankerte Aktionsbuttons.

Typografie

Material Design 3 definiert eine Schriftskala, einschließlich Textstilen, die aus Material Design 2 übernommen wurden. Die Benennung und Gruppierung wurden vereinfacht: Display, Headline, Title, Body und Label, jeweils in den Größen Large, Medium und Small.

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-Typography-Klasse enthält die M3-Typography-Klasse derzeit keinen defaultFontFamily-Parameter. Stattdessen müssen Sie den Parameter fontFamily in jedem einzelnen TextStyles verwenden.

Typografie definieren

Compose bietet die M3-Klasse Typography sowie die vorhandenen Klassen TextStyle und schriftbezogene Klassen, um die Material 3-Schriftgrößenskala 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. „Body Large“, „Body Medium“ und „Label Medium“ für verschiedene Typografieanwendungen.

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 weggelassen werden.

Sie können die Typografie anpassen, indem Sie die Standardwerte von TextStyle und schriftbezogenen 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

Nachdem Sie Ihr Typography definiert haben, übergeben Sie es an die M3-MaterialTheme:

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

Textstile verwenden

Mit MaterialTheme.typography können Sie die Typografie abrufen, die für die M3-komponierbare Funktion MaterialTheme bereitgestellt wird:

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 Material-Richtlinien finden Sie unter Typografie anwenden.

Formen

Material-Oberflächen können in verschiedenen Formen dargestellt werden. Formen lenken die Aufmerksamkeit, identifizieren Komponenten, kommunizieren den Status und drücken die Marke aus.

Die Formskala definiert den Stil der Containerecken und bietet verschiedene Rundungsgrade von quadratisch bis vollständig kreisförmig.

Formen definieren

Compose stellt die M3-Klasse Shapes mit erweiterten Parametern zur Unterstützung neuer M3-Formen bereit. Die M3-Formskala ähnelt eher der Typskala und ermöglicht eine ausdrucksstarke Vielfalt an Formen in der gesamten Benutzeroberfläche.

Es gibt verschiedene Größen von Formen:

• Extraklein
• Klein
• Mittel
• Groß
• Extragroß

Standardmäßig hat jede Form einen Standardwert, den Sie aber ü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)
)
Material3Snippets.kt

Nachdem du dein Shapes definiert hast, kannst du es an das M3-MaterialTheme übergeben:

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

Formen verwenden

Sie können die Formskala für alle Komponenten im MaterialTheme anpassen oder für jede Komponente einzeln.

Wenden Sie die mittlere und große Form mit Standardwerten an:

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 unverankerten Aktionsbutton in der Beispiel-App „Reply“

Es gibt zwei weitere Formen, RectangleShape und CircleShape, die Teil von Compose sind. Rechteckige Formen haben keinen Rahmenradius und kreisförmige Formen haben vollständig abgerundete Kanten:

Card(shape = RectangleShape) { /* card content */ }
Card(shape = CircleShape) { /* card content */ }
Material3Snippets.kt

Die folgenden Beispiele zeigen einige der Komponenten mit Standardwerten für die Form:

Abbildung 10. Standardwerte für Formen für alle Material 3-Komponenten.

Weitere Informationen zu den Material-Richtlinien für die Anwendung von Formen

Hervorhebung

In M3 werden Hervorhebungen durch Variationen von Farben und deren Kombinationen mit On-Farben erzielt. In M3 gibt es zwei Möglichkeiten, die UI zu betonen:

• Verwendung von „surface“, „surface-variant“ und „background“ zusammen mit „on-surface“- und „on-surface-variants“-Farben aus dem erweiterten M3-Farbsystem. Beispielsweise kann „surface“ mit „on-surface-variant“ und „surface-variant“ mit „on-surface“ verwendet werden, um unterschiedliche Betonungsstufen zu erzielen.

Abbildung 11. Verwendung neutraler Farbkombinationen zur Hervorhebung.

• Verwendung unterschiedlicher Schriftstärken für Text. Oben haben Sie gesehen, dass Sie unserer Schriftskala benutzerdefinierte Stärken zuweisen können, um unterschiedliche Betonungen zu erzielen.

bodyLarge = TextStyle(
    fontWeight = FontWeight.Bold
),
bodyMedium = TextStyle(
    fontWeight = FontWeight.Normal
)
Material3Snippets.kt

Hinweis: Für deaktivierte Zustände in M3 ist es weiterhin zulässig, „on-x“-Farben (wobei x „primary“, „secondary“, „surface“ usw. sein kann) mit Alphawerten zu verwenden.

Höhe

In Material 3 wird die Höhe hauptsächlich durch Farbtonüberlagerungen dargestellt. Dies ist eine neue Möglichkeit, Container und Oberflächen voneinander zu unterscheiden. Durch die Erhöhung der tonalen Erhöhung wird zusätzlich zu Schatten ein auffälligerer Ton verwendet.

Abbildung 12: Tonale Erhöhung mit SchattenhöheE

Höhen-Overlays in dunklen Designs wurden in Material 3 ebenfalls in Farbton-Overlays geändert. Die Overlay-Farbe stammt aus dem Slot für die Primärfarbe.

Abbildung 13. Schatten-Elevation im Vergleich zu Ton-Elevation in Material Design 3

Die M3-Surface, die zugrunde liegende zusammensetzbare Funktion hinter den meisten M3-Komponenten, unterstützt sowohl die tonale als auch die Schattenhöhe:

Surface(
    modifier = Modifier,
    tonalElevation = /*...
    shadowElevation = /*...
) {
    Column(content = content)
}
Material3Snippets.kt

Materialkomponenten

Material Design bietet eine Vielzahl von Material-Komponenten (z. B. Schaltflächen, Chips, Karten, Navigationsleiste), die bereits dem Material-Design 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 Schwerpunkt und Aufmerksamkeit in verschiedenen Rollen verwendet werden können.

Abbildung 14: Button-Hervorhebung von FAB, primär bis Text-Button

• Ein erweiterter unverankerter Aktionsbutton für die Aktion mit der höchsten Gewichtung:

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 Aktion mit hoher Gewichtung:

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 Schaltflächen und anderen Komponenten von Material Design Material 3 bietet eine Vielzahl von Komponentensuites wie Schaltflächen, App-Leisten und Navigationskomponenten, die speziell für verschiedene Anwendungsfälle und Bildschirmgrößen entwickelt wurden.

Navigationselemente

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 maximal 5 Ziele anvisieren 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. 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 = { }
        )
    }
}
Material3Snippets.kt

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

Antworte mit beiden im Standarddesign, um eine immersive Nutzererfahrung für alle Gerätegrößen 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 = { }
        )
    }
}) {
}
Material3Snippets.kt

Abbildung 16: Reply-Beispiel für eine dauerhafte Navigationsleiste

Navigationsoptionen verbessern die Nutzerfreundlichkeit, Ergonomie und Erreichbarkeit. Weitere Informationen zu Material-Navigationskomponenten finden Sie im Codelab „Adaptive Layouts mit Jetpack Compose erstellen“.

Theming einer Komponente anpassen

M3 fördert Personalisierung und Flexibilität. Auf alle Komponenten werden Standardfarben angewendet. Sie bieten jedoch flexible APIs, um die Farben bei Bedarf anzupassen.

Die meisten Komponenten wie Karten und Schaltflächen bieten ein Standardobjekt, das Farb- und Höhenoberflächen verfügbar macht, die angepasst 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
}
Material3Snippets.kt

Weitere Informationen zum Anpassen von Material 3

System-UI

Einige Aspekte von Material You stammen aus dem neuen visuellen Stil und der System-UI unter Android 12 und höher. Zwei wichtige Bereiche, in denen es Änderungen gibt, sind Ripple und Overscroll. Für die Implementierung dieser Änderungen ist kein zusätzlicher Aufwand erforderlich.

Welle

Der Ripple-Effekt verwendet jetzt ein dezentes Funkeln, um Oberflächen beim Drücken zu beleuchten. Compose Material Ripple verwendet unter Android im Hintergrund ein RippleDrawable der Plattform. Daher ist der Glitzereffekt unter Android 12 und höher für alle Material-Komponenten verfügbar.

Abbildung 17. Ripple in M2 versus M3

Overscroll

Beim Overscroll wird jetzt am Rand von scrollbaren Containern ein Stretcheffekt verwendet. In Compose Foundation 1.1.0 und höher ist das Overscroll-Verhalten „Stretch“ standardmäßig in scrollbaren Container-Kompositionen aktiviert, z. B. LazyColumn, LazyRow und LazyVerticalGrid, unabhängig vom API-Level.

Abbildung 18: Overscroll mit Dehnungseffekt am Rand des Containers

Bedienungshilfen

Die in Material-Komponenten integrierten Standards für Barrierefreiheit im Internet 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 eingeschränktem Sehvermögen, Blindheit, Hörbehinderung, kognitiven Beeinträchtigungen, motorischen Beeinträchtigungen oder situativen Beeinträchtigungen (z. B. ein gebrochener Arm).

Barrierefreiheit von Farben

Dynamische Farben sind so konzipiert, dass sie den Standards für Barrierefreiheit im Internet in Bezug auf Farbkontrast entsprechen. Das System der tonalen Paletten ist entscheidend, um jedes Farbschema standardmäßig barrierefrei zu machen.

Das Farbsystem von Material bietet Standardtonwerte und ‑messungen, mit denen sich barrierefreie Kontrastverhältnisse erzielen lassen.

Abbildung 19: Beispiel-App „Reply“: Primäre, sekundäre und tertiäre Farbpaletten (von oben nach unten)

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. Wenn Sie jedoch Komponenten anpassen, sollten Sie die entsprechenden Farbrollen verwenden und Abweichungen vermeiden.

Verwenden Sie „on-primary“ über „primary“ und „on-primary-container“ über „primary-container“. Gehen Sie bei anderen Akzent- und neutralen Farben genauso vor, um einen barrierefreien Kontrast für den Nutzer zu erzielen.

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

Abbildung 20: Ausreichender Kontrast (links) im Vergleich zu schlechtem Kontrast (rechts)

Barrierefreie Typografie

Die M3-Typenskalierung aktualisiert die statische Typenrampe und die Werte, um ein vereinfachtes, aber dynamisches Framework von Größenkategorien zu bieten, die auf allen Geräten skalierbar sind.

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 Anleitungen zu adaptiven Layouts und faltbaren Geräten, um deine Apps barrierefrei zu machen und die Ergonomie für Nutzer zu verbessern, die große Geräte halten.

Material bietet verschiedene Arten der Navigation, mit denen du die Nutzerfreundlichkeit auf großen Geräten verbessern kannst.

Weitere Informationen zu den Qualitätsrichtlinien für Android-Apps für große Bildschirme und unser Reply-Beispiel für adaptives und barrierefreies Design

Weitere Informationen

Weitere Informationen zu Material Theming in Compose findest du in den folgenden Ressourcen:

Beispielanwendungen

• Beispiel-App „Reply M3“

Docs

• Von Material 2 zu Material 3 in Compose migrieren
• Material Design-Richtlinien

API-Referenz und Quellcode

• Compose Material 3 API-Referenz
• Compose Material 3-Beispiele im Quellcode

Videos

• Material You in Jetpack Compose