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 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 Antwortbeispiel basiert vollständig auf Material Design 3.

Abbildung 1: Beispiel-App für Antworten 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"

Sobald die Abhängigkeit hinzugefügt wurde, können Sie Ihren Anwendungen Material Design-Systeme wie Farbe, Typografie und Form hinzufügen.

Experimentelle APIs

Einige M3 APIs gelten als experimentell. In solchen Fällen müssen Sie die Funktion oder Datei mit der Anmerkung ExperimentalMaterial3Api aktivieren:

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

Material Theming

Ein M3-Design enthält die folgenden Untersysteme: 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: 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 Farben bezieht sich auf eine Tonpalette mit 13 Tönen, die in Material 3-Komponenten verwendet werden. 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 sowohl für das helle als auch 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 Konfiguration für helle und dunkle Farbschemata sowie das App-Design.

private val LightColorScheme = lightColorScheme(
    primary = md_theme_light_primary,
    onPrimary = md_theme_light_onPrimary,
    primaryContainer = md_theme_light_primaryContainer,
    // ..
)
private val DarkColorScheme = darkColorScheme(
    primary = md_theme_dark_primary,
    onPrimary = md_theme_dark_onPrimary,
    primaryContainer = md_theme_dark_primaryContainer,
    // ..
)

@Composable
fun ReplyTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit
) {
    val colorScheme =
        if (!darkTheme) {
            LightColorScheme
        } else {
            DarkColorScheme
        }
    MaterialTheme(
        colorScheme = colorScheme,
        content = content
    )
}
Material3Snippets.kt

Verwenden Sie isSystemInDarkTheme(), um helle und dunkle Designs zu unterstützen. Legen Sie anhand der Systemeinstellung fest, 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 Farbpalette dient als Ausgangspunkt für die Erstellung heller und dunkler Farbschemata.

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

Die dynamische Farbgebung ist ab Android 12 verfügbar. Wenn die dynamische Farbe verfügbar ist, können Sie eine dynamische ColorScheme einrichten. Andernfalls sollten Sie eine benutzerdefinierte helle oder dunkle 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

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 nach Status, Sichtbarkeit und Betonung der Komponente.

• „Primär“ ist die Grundfarbe, die für Hauptkomponenten wie markante Schaltflächen, aktive Zustände und die Färbung erhöhter Oberflächen verwendet wird.
• Die sekundäre Schlüsselfarbe wird für weniger auffällige Komponenten in der Benutzeroberfläche wie Filterchips verwendet und bietet mehr Möglichkeiten für den Farbausdruck.
• Anhand der tertiären Schlüsselfarbe werden die Rollen der kontrastierenden Akzente abgeleitet, mit denen sich Primär- und Sekundärfarben ausbalancieren oder ein Element hervorheben lassen.

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 „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 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

Material Design 3 definiert eine Schriftskala, einschließlich Textstile, die von Material Design 2 übernommen wurden. Die Benennung und Gruppierung wurde auf die folgenden Elemente reduziert: Anzeigentitel, Ü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-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 zusammen mit den vorhandenen Klassen TextStyle und schriftbezogen, um den Material 3-Typ zu skalieren. Der Typography-Konstruktor bietet Standardwerte für jeden Stil. Sie können also Parameter weglassen, 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 unterschiedliche Typografie.

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 der Rest weggelassen wird.

Sie können die Typografie anpassen, indem Sie die Standardwerte von TextStyle und schriftartbezogenen 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 Ihre Typography definiert haben, übergeben Sie sie an M3 MaterialTheme:

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

Textstile verwenden

Sie können die Typografie abrufen, die für das M3-MaterialTheme-Komposit bereitgestellt wurde, indem Sie MaterialTheme.typography verwenden:

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

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

Mit der Formskala wird der Stil der Containerecken definiert. Sie bietet eine Reihe von Rundungen, 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 Typskala und ermöglicht eine ausdrucksstarke Vielfalt von Formen in der Benutzeroberfläche.

Es gibt verschiedene Größen:

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

Standardmäßig hat jede Form einen Standardwert. Sie können diese jedoch überschreiben:

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.

Wenden Sie die mittlere und große Form mit den 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 unverankerte Aktionsschaltfläche in der Beispiel-Antwort-App

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

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

In den folgenden Beispielen werden einige der Komponenten gezeigt, auf die Standardformwerte angewendet werden:

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

Weitere Informationen zu den Materialrichtlinien zum Anwenden von Formen

Betonung

In M3 werden Hervorhebungen mit Farbvarianten und Farbkombinationen erzielt. In M3 gibt es zwei Möglichkeiten, Ihre Benutzeroberfläche hervorzuheben:

• Verwendung von Oberfläche, Oberflächenvariante und Hintergrund sowie oberflächlich-Varianten-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.

• Verwenden Sie unterschiedliche Schriftschnitte für den Text. Oben haben Sie gesehen, dass Sie benutzerdefinierte Gewichte für unsere Schriftskala festlegen können, um unterschiedliche Betonungen vorzunehmen.

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

Hinweis: In M3 ist die Verwendung von „on-x“-Farben (wobei x für primäre, sekundäre, Oberflächenfarben usw.) mit Alphawerten zulässig ist, auch für deaktivierte Zustände.

Höhe

In Material 3 werden Höhenunterschiede hauptsächlich mit farblichen Überlagerungen dargestellt. Dies ist eine neue Möglichkeit, Container und Oberflächen voneinander zu unterscheiden. Durch eine zunehmende tonale Erhöhung wird neben Schatten auch ein auffälligerer Ton verwendet.

Abbildung 12. Tonale Erhöhung mit SchattenerhöhungE

Höhen-Overlays in dunklen Designs wurden in Material 3 in Tonfarben-Overlays geändert. Die Overlay-Farbe stammt aus dem Primärfarb-Slot.

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 eine Vielzahl von Materialkomponenten (z. B. Schaltflächen, Chips, Karten, Navigationsleiste), die bereits Material-Design-Themen folgen und Ihnen dabei 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. Betonung von Schaltflächen von der schwebenden Aktionsschaltfläche, der primären Schaltfläche bis hin zur 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 gefüllte Schaltfläche für eine Aktion mit hoher Gewichtung:

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. 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: Antwortbeispiel für BottomNavigationBar (links) und NavigationRail (rechts)

Antworten Sie mit beiden Optionen im Standarddesign, um Nutzern auf allen Geräten ein immersives Erlebnis 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. Auf die permanente Navigationsleiste antworten

Navigationsoptionen verbessern die Nutzerfreundlichkeit, Ergonomie und Erreichbarkeit. Weitere Informationen zu den Navigationskomponenten von Material finden Sie im Tool zum Erstellen adaptiver Codes.

Design einer Komponente anpassen

M3 fördert Personalisierung und Flexibilität. Alle Komponenten haben Standardfarben, aber flexible APIs, mit denen sich die Farben bei Bedarf anpassen lassen.

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 beruhen auf dem neuen visuellen Stil und der neuen System-UI von Android 12 und höher. Zwei wichtige Bereiche mit Änderungen sind Wellen und Overscroll. Für die Implementierung dieser Änderungen sind keine weiteren Maßnahmen erforderlich.

Welle

Ripple verwendet jetzt ein dezentes Funkeln, um Oberflächen zu beleuchten, wenn es gedrückt wird. Für Material Ripple erstellen wird unter Android eine Plattform-RippleDrawable verwendet. Daher ist die Funkelwelle unter Android 12 und höher für alle Materialkomponenten verfügbar.

Abbildung 17. Ripple in M2 vs. M3

Overscroll

Beim Überscrollen wird jetzt am Rand der scrollbaren Container ein Streckungseffekt verwendet. In Compose Foundation 1.1.0 und höher ist das Überblenden beim Scrollen standardmäßig in Scrollcontainer-Kompositionen wie LazyColumn, LazyRow und LazyVerticalGrid aktiviert, unabhängig vom API-Level.

Abbildung 18. Überscrollen mit einem Dehnungseffekt am Rand des Containers

Bedienungshilfen

Die in Material-Komponenten integrierten Standards zur Barrierefreiheit dienen als Grundlage für inklusives Produktdesign. Das Verständnis der Barrierefreiheit Ihres Produkts kann die Usability für alle Nutzer verbessern, einschließlich Menschen mit eingeschränktem Sehvermögen, Blindheit, Hörbeeinträchtigung, kognitiven Beeinträchtigungen, motorischen oder situativen Beeinträchtigungen (z. B. einem gebrochenen Arm).

Barrierefreie Farben

Dynamische Farben sollen die Standards für den Farbkontrast erfüllen. Das System der Farbtonpaletten ist entscheidend, um jedes Farbschema standardmäßig barrierefrei zu gestalten.

Das Farbsystem von Material bietet Standardtonwerte und -messungen, mit denen sich die Anforderungen an barrierefreie Kontrastverhältnisse erfüllen lassen.

Abbildung 19. Antwortbeispiel-App: 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“ und ebenso für andere Akzent- und neutrale Farben, um Nutzern einen barrierefreien Kontrast zu bieten.

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) vs. schlechter Kontrast (rechts)

Barrierefreie Typografie

Mit der M3-Typskala werden die statische Typerweiterung und die zugehörigen Werte aktualisiert, um ein vereinfachtes, aber dynamisches Framework mit Größenkategorien zu bieten, die geräteübergreifend skaliert werden.

In M3 kann beispielsweise „Display klein“ je nach Gerätekontext unterschiedliche Werte zugewiesen werden, z. B. für ein Smartphone oder ein Tablet.

Großes Display

Material bietet Anleitungen für adaptive Layouts und faltbare Geräte, um Ihre Apps barrierefrei zu gestalten und die Ergonomie für Nutzer zu verbessern, die große Geräte in der Hand halten.

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

Hier findest du weitere Informationen zu den Qualitätsrichtlinien für Android-Apps für große Bildschirme und unser Beispiel für Antworten für adaptives und barrierefreies Design.

Weitere Informationen

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

Beispiel-Apps

• Reply M3-Beispiel-App

Docs

• Migration von Material 2 zu Material 3 in Compose
• 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