Material Design 3 in Compose

Jetpack Compose bietet eine Implementierung von Material Design 3, der nächsten Weiterentwicklung 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.

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.

Beispiel-App für Antworten mit 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"

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 Datei mit der Anmerkung ExperimentalMaterial3Api aktivieren:

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

Material Theming

Ein M3-Design enthält die folgenden Teilsysteme: 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.

Teilsysteme des Material Designs: Farbe, Typografie und Formen
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
}

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:

Helles Farbschema der Beispiel-App für Antworten
Abbildung 3. Helles Farbschema der Beispiel-App für Antworten

Weitere Informationen zu Farbschema und Farbrollen

Farbschemata generieren

Sie können ein benutzerdefiniertes ColorScheme zwar manuell erstellen, es ist aber oft einfacher, eins anhand von 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)
// ..
// ..

  • Theme.kt enthält eine Einrichtung für helle und dunkle Farbschemata 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
    )
}

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 Farbvorlage wird als Ausgangspunkt zum Generieren von hellen und dunklen Farbschemas verwendet.

Dynamisches Design der Beispiel-App über Hintergrund (links) und Standarddesign der App (rechts)
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. Falls nicht, sollten Sie ein benutzerdefiniertes helles oder dunkles ColorScheme-Objekt 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
}

Farbverwendung

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

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

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

  • Die Primärfarbe ist die Grundfarbe, die für Hauptkomponenten wie hervorgehobene Schaltflächen, aktive Status und die Tönung von hervorgehobenen 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 Design einer Antwort-Beispiel-App wird der primäre Container in einer Farbe dargestellt, die auf dem primären Container liegt, um das ausgewählte Element hervorzuheben.

Primärer Container und Textfelder mit der Farbe „on-primary-container“.
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,
    )
}

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.

Kombination aus Tertiärcontainer und Container innerhalb eines Tertiärcontainers für die schwebende Aktionsschaltfläche.
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: Anzeigentitel, Überschrift, Titel, Textkörper und Label, jeweils in den Größen „groß“, „mittel“ und „klein“.

Standardtypografieskala für Material Design 3
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

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

„Body large“, „Body medium“ und „Label medium“ für unterschiedliche Typografie.
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
),

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

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

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
)

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

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

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

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

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 */
}

Mittlere Form für Karte und große Form für die schwebende Aktionsschaltfläche in der Beispiel-App „Antworten“
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 Teil von „Compose“ sind. Rechteck ohne Rahmenradius und Kreisform mit vollständigen Kreisrändern:

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

Die folgenden Beispiele zeigen einige der Komponenten mit Standardformwerten:

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

Weitere Informationen zu den Materialrichtlinien zum Anwenden von Formen

Betonung

In M3 wird die Betonung durch Farbvariationen und ihre On-Color-Kombinationen betont. 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.
Neutrale Farbkombinationen zur Betonung verwenden.
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
)

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 – bei einer Erhöhung der Tonwerte wird ein auffälligerer Ton verwendet – zusätzlich zu Schatten.

Höhen in Tonnenhöhe mit Schatten
Abbildung 12. Elevation in Tonwert mit Schattenhöhe E

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

Schattenelevation im Vergleich zur tonalen Elevation in Material Design 3
Abbildung 13. Schattenerhöhung im Vergleich zur Tonhöhe 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)
}

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

Button(onClick = { /*..*/ }) {
    Text(text = "My Button")
}

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

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

  • Eine gefüllte Schaltfläche für eine Aktion mit hoher Gewichtung:

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

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

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

Weitere Informationen zu Material Schaltflächen und anderen Komponenten Material 3 bietet eine Vielzahl von Komponentenpaketen wie Schaltflächen, App-Leisten und Navigationskomponenten, die speziell für verschiedene Anwendungsfälle und Bildschirmgrößen entwickelt wurden.

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 eine Ausrichtung auf fünf oder weniger Ziele vornehmen möchten:

NavigationBar(modifier = Modifier.fillMaxWidth()) {
    Destinations.entries.forEach { replyDestination ->
        NavigationBarItem(
            selected = selectedDestination == replyDestination,
            onClick = { },
            icon = { }
        )
    }
}

NavigationRail wird für kleine bis mittelgroße Tablets oder Smartphones 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 = { }
        )
    }
}

Beispiel für eine Antwort mit BottomNavigationBar(links) und NavigationRail(rechts)
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 = { }
        )
    }
}) {
}

Antwortbeispiel für die dauerhafte Navigationsleiste
Abbildung 16. Beispiel für eine Antwort mit dauerhafter Navigationsleiste

Navigationsoptionen verbessern die Nutzerfreundlichkeit, Ergonomie und Erreichbarkeit. Weitere Informationen zu Material Design-Navigationskomponenten finden Sie im Codelab zum Erstellen adaptiver Apps.

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
}

Weitere Informationen zum Anpassen von Material 3

System-UI

Einige Aspekte von Material You stammen aus dem neuen visuellen Stil und der neuen System-UI von Android 12 und höher. Zwei wichtige Bereiche, in denen es Änderungen gibt, sind die Wellenbewegung und das Überscrollen. Für die Implementierung dieser Änderungen sind keine weiteren Maßnahmen erforderlich.

Welle

Bei „Wellen“ wird jetzt beim Drücken eine Oberfläche mit einem dezenten Glitzereffekt beleuchtet. Bei Compose Material Ripple wird unter Android die Plattform RippleDrawable verwendet, sodass die Funkwelle ab Android 12 für alle Materialkomponenten verfügbar ist.

Wellen in M2 im Vergleich zu M3
Abbildung 17. Wellen in M2 im Vergleich zu M3

Overscroll

Beim Overscroll wird jetzt ein Stretch-Effekt am Rand von scrollbaren Containern 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.

Overscroll mit Streckeffekt am Rand des Containers
Abbildung 18. Überscrollen mit einem Dehnungseffekt 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 von Material bietet Standardtonwerte und -messungen, mit denen sich die Anforderungen an barrierefreie Kontrastverhältnisse erfüllen lassen.

Beispiel-App für Antworten: Primäre, sekundäre und tertiäre Farbpaletten (von oben nach unten)
Abbildung 19. Beispiel-App für Antworten: 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. Achten Sie beim Anpassen von Komponenten jedoch darauf, geeignete Farbrollen zu verwenden und Abweichungen zu vermeiden.

Verwenden Sie den „Primär“-Container über dem Primärcontainer und den On-Primary-Container über dem primären Container und dasselbe für andere Akzent- und neutrale Farben, um dem Nutzer 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
    )
) {
}

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

Typografie-Bedienungshilfen

Bei der M3-Typskala werden die Rampe und die Werte des statischen Typs aktualisiert, um ein vereinfachtes, aber dynamisches Framework für Größenkategorien zu bieten, das geräteübergreifend skaliert.

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, damit du auch auf großen Geräten eine bessere Nutzererfahrung bieten kannst.

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-Design-Designthemen in Compose finden Sie in den folgenden Ressourcen:

Beispiel-Apps

Docs

API-Referenz und Quellcode

Videos