Material Design 3 in Compose

Jetpack Compose bietet eine Implementierung von Material Design 3, Entwicklung des Material Design. Material 3 umfasst aktualisierte Themen, Komponenten und Personalisierungsfunktionen von Material You wie dynamische Farben. Es ist so konzipiert, dass es mit dem neuen visuellen Stil und der System-UI von Android 12 und höher harmoniert.

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

Unten sehen Sie ein Beispiel für die Implementierung von Material Design 3 anhand der Beispiel-App „Reply“. Das Beispiel für Antworten basiert vollständig auf Material Design 3.

Abbildung 1: Beispiel-App für Antworten in Material Design 3 verwenden

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 Sie die Abhängigkeit hinzugefügt haben, 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 Dateiebene mithilfe der Annotation ExperimentalMaterial3Api:

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

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.

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

In Jetpack Compose werden diese Konzepte mit dem M3 MaterialTheme-Komposit implementiert:

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

Um ein Design für Ihre App-Inhalte festzulegen, definieren Sie das Farbschema, die Typografie und die Formen, die für Ihre App spezifisch sind.

Farbschema

Die Grundlage eines Farbschemas bilden fünf Hauptfarben. Jede dieser Optionen Farben beziehen sich auf eine Tonpalette mit 13 Tönen, die von Material 3 verwendet werden. Komponenten. Das ist beispielsweise das Farbschema für das helle Design für Antworten:

Abbildung 3: Helles Farbschema für Antwortbeispiel App

Weitere Informationen zu Farbschema und Farbrollen

Farbschemata generieren

Sie können eine benutzerdefinierte ColorScheme zwar manuell erstellen, es ist aber oft einfacher, eine mit den Quellfarben Ihrer Marke zu generieren. Mit dem Tool Material Theme Builder können Sie dies tun und optional Compose-Themencode exportieren. 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)
// ..
// ..
Material3Snippets.kt

• Theme.kt enthält eine Konfiguration für helle und dunkle Farbschemata sowie die App .

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. Basierend auf den Systemeinstellung festlegen, welches Farbschema verwendet werden soll: hell oder dunkel.

Dynamische Farbschemata

Dynamische Farben sind ein wichtiger Bestandteil von Material You. Dabei werden mithilfe eines Algorithmus benutzerdefinierte Farben aus dem Hintergrundbild eines Nutzers abgeleitet, die auf die Apps und die Systemoberfläche angewendet werden. Diese Farbvorlage wird als Ausgangspunkt für die Generierung hellen und dunklen Farbschemata.

Abbildung 4: Dynamisches Design der Beispiel-App anhand des Hintergrunds (links) und Standarddesign der App (rechts)

Dynamische Farben sind ab Android 12 verfügbar. Wenn die dynamische Farbe verfügbar ist, können Sie eine dynamische ColorScheme einrichten. Andernfalls sollten Sie auf eine benutzerdefinierte helle oder dunkle 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 über MaterialTheme.colorScheme auf die Material-Designfarben in Ihrer App zugreifen:

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

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 wie Filterchips verwendet und bietet mehr Möglichkeiten für den Farbausdruck.
• 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.

Im Beispieldesign der Reply App wird die Farbe „on-primary-container“ über dem „primary-container“ verwendet, um das ausgewählte Element hervorzuheben.

Abbildung 5. Primärer Container und Textfelder mit der Farbe des primären Containers.

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 sehen Sie im Navigationsbereich für Antworten, wie sekundäre und tertiäre Containerfarben als Kontrast verwendet werden, um Betonung und Akzent zu schaffen.

Abbildung 6: Kombination aus Tertiärcontainer und Container innerhalb eines Tertiärcontainers für die schwebende Aktionsschaltfläche.

Typografie

In Material Design 3 wird eine Schriftgradskala definiert, einschließlich Textstilen, die aus Material Design 2 übernommen wurden. Die Benennung und Gruppierung wurde auf die folgenden Elemente reduziert: Anzeige, Überschrift, Titel, Textkörper und Label, jeweils in den Größen „groß“, „mittel“ und „klein“.

Abbildung 7. Standardtypografieskala für Material Design 3

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

Hinweis: Im Gegensatz zur M2-Klasse Typography kann die M3-Klasse Typography enthalten derzeit einen defaultFontFamily-Parameter. Sie müssen das fontFamily-Parameter stattdessen in jeder einzelnen TextStyles.

Typografie definieren

Compose bietet die M3-Klasse Typography zusammen mit den vorhandenen Klassen TextStyle und schriftbezogen, um den Material 3-Typmessstab 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
    ),
    // ..
)
// ..
Material3Snippets.kt

Abbildung 8. Text groß, Text mittel und Label mittel für verschiedene typografische Verwendungen.

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

Nachdem du deine Typography definiert hast, gib sie an die M3-MaterialTheme weiter:

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

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

Weitere Informationen zu den Material Design-Richtlinien zur Anwendung von Typografie

Formen

Materialoberflächen können in verschiedenen Formen dargestellt werden. Gestaltet direkte Aufmerksamkeit, Komponenten identifizieren, Zustand vermitteln und die Marke zum Ausdruck bringen.

Mit der Formskala wird der Stil der Containerecken definiert. Sie bietet eine Reihe von Rundungen, von quadratisch bis vollständig kreisförmig.

Formen definieren

Compose bietet der M3-Klasse Shapes erweiterte Parameter zur Unterstützung neuer 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)
)
Material3Snippets.kt

Nachdem du deine Shapes definiert hast, kannst du sie an die M3 MaterialTheme übergeben:

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

Formen verwenden

Sie können die Formskala für alle Komponenten in der MaterialTheme oder pro Komponente anpassen.

Form mittel und groß 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 die schwebende Aktionsschaltfläche in der Beispiel-App „Antworten“

Es gibt zwei weitere Formen – RectangleShape und CircleShape –, die zu „Komponieren“ gehören. Die Rechteckform hat keinen Rahmenradius und die Kreisform zeigt volle Kreise:

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

In den folgenden Beispielen werden einige der Komponenten mit Standardwerten für Formen gezeigt. auf sie angewendet:

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

Weitere Informationen zu den Materialrichtlinien zum Anwenden von Formen

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. Beispielsweise kann „surface“ mit „on-surface-variant“ und „surface-variant“ mit „on-surface“ verwendet werden, um verschiedene Betonungsstufen zu erzielen.

Abbildung 11: Neutrale Farbkombinationen zur Betonung verwenden.

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

Hinweis: In M3 ist die Verwendung von „on-x“ auch im deaktivierten Zustand zulässig, wobei x können Primär-, Sekundär-, Oberflächenfarben usw. mit Alpha-Werten sein.

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.

Abbildung 12. Tonale Erhöhung mit SchattenerhöhungE

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.

Abbildung 13. Schattenelevation im Vergleich zur Farbelevation in Material Design 3

Die M3-Oberfläche – die Hintergrundkomposition hinter den meisten M3-Komponenten – unterstützt sowohl tonale als auch Schattenerhöhungen:

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

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 sofort mit der Verwendung von Komponenten mit Standardeigenschaften beginnen.

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. Betonung der Schaltfläche von FAB, von primär zur Schaltfläche „Text“

• 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 gefüllte Schaltfläche für eine hervorgehobene Aktion:

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

• 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 Komponentenpaketen wie Schaltflächen, App-Leisten und Navigationskomponenten, die speziell für verschiedene Anwendungsfälle und Bildschirmgrößen entwickelt wurden.

Navigationskomponenten

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 das Targeting auf maximal fünf Ziele festlegen 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. 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 = { }
        )
    }
}
Material3Snippets.kt

Abbildung 15: Antwortbeispiel für 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 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.

PermanentNavigationDrawer(modifier = Modifier.fillMaxHeight(), drawerContent = {
    Destinations.entries.forEach { replyDestination ->
        NavigationRailItem(
            selected = selectedDestination == replyDestination,
            onClick = { },
            icon = { },
            label = { }
        )
    }
}) {
}
Material3Snippets.kt

Abbildung 16. Auf die permanente Navigationsleiste antworten

Navigationsoptionen verbessern die Nutzerfreundlichkeit, 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 angewendete Farben, stellen aber flexible APIs zur Verfügung, um ihre Farben anzupassen, erforderlich.

Die meisten Komponenten wie Karten und Schaltflächen haben ein Standardobjekt mit Farb- und Höhenschnittstellen, die zur Anpassung der Komponente geändert 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 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

Bei „Wellen“ wird jetzt beim Drücken eine Oberfläche mit einem dezenten Glitzereffekt beleuchtet. Für Material Ripple erstellen wird unter Android eine Plattform-RippleDrawable verwendet. Daher ist die Funkel-Ripple-Funktion unter Android 12 und höher für alle Materialkomponenten verfügbar.

Abbildung 17. Ripple in M2 vs. M3

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.

Abbildung 18. Overscroll mit Streckeffekt am Rand des Containers

Bedienungshilfen

Die in Materialkomponenten integrierten Standards für Barrierefreiheit 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 Sehbehinderung, Blindheit, Hörbeeinträchtigung, kognitiven Beeinträchtigungen, motorischen Beeinträchtigungen oder situativen Beeinträchtigungen (z. B. gebrochener Arm).

Barrierefreie Farben

Dynamische Farben entsprechen den Standards für Barrierefreiheit im Hinblick auf Farbkontraste. Das System der Farbtonpaletten ist entscheidend, um jedes Farbschema standardmäßig barrierefrei zu gestalten.

Das Farbsystem des Materials liefert Standardtonwerte und -messungen, die um barrierefreie Kontrastverhältnisse zu erreichen.

Abbildung 19. Antwortbeispiel-App: Primäre, sekundäre und tertiäre Farbpaletten (von oben nach unten)

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

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

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

Typografie-Bedienungshilfen

Mit der M3-Skalierung werden die Erhöhung und die Werte des statischen Typs aktualisiert, um eine vereinfachte ein dynamisches Framework mit 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 bietet Anleitungen für adaptive Layouts und faltbare Geräte, damit Ihre Apps barrierefrei sind und die Ergonomie für Nutzer mit großen Geräten verbessert wird.

Material bietet verschiedene Arten der Navigation, mit denen Sie die Nutzerfreundlichkeit auf großen Geräten verbessern können.

Weitere Informationen zu den Qualitätsrichtlinien für Android-Apps für große Bildschirme und ein Beispiel für eine Antwort für ein adaptives und barrierefreies Design finden Sie in unseren Ressourcen.

Weitere Informationen

Weitere Informationen zu Material-Design-Designthemen in Compose finden Sie in den folgenden Ressourcen:

Beispiel-Apps

• Reply M3-Beispiel-App

Docs

• Von Material 2 zu Material 3 in Compose migrieren
• Richtlinien für Material Design

API-Referenz und Quellcode

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

Videos

• Material You in Jetpack Compose