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 Beispiel für Antworten basiert vollständig auf 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
}
Material3Snippets.kt

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.

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:

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

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, Bedeutung 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 Filter-Chips 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 die Aufmerksamkeit auf ein Element lenken lassen.

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

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.

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“.

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

Für Ihr Produkt sind wahrscheinlich nicht alle 15 Standardstile aus der Material Design-Typskala erforderlich. 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 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 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 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)
)
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

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

Die folgenden Beispiele zeigen einige der Komponenten mit Standardformwerten:

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:

• Verwenden Sie Farben für Oberflächen, Oberflächenvarianten und Hintergründe sowie Farben für Oberflächen und Oberflächenvarianten 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.

• 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

Höhe

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

In dunklen Designs wurden die Höhenangaben ebenfalls in Material 3 in tonale Farbüberlagerungen geändert. Die Overlay-Farbe stammt aus dem Primärfarb-Slot.

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

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

• 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 Betonung:

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

Antworten Sie mit beiden Optionen im Standarddesign, um Nutzern auf allen Geräten ein ansprechendes 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

Navigationsoptionen verbessern die Nutzerfreundlichkeit, Ergonomie und Erreichbarkeit. Weitere Informationen zu Material-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
}
Material3Snippets.kt

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 Welleneffekte 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. Für Material Ripple erstellen wird unter Android eine Plattform-RippleDrawable verwendet. Daher ist die Funkel-Ripple-Funktion ab Android 12 für alle Materialkomponenten verfügbar.

Overscroll

Beim Überscrollen wird jetzt am Rand von scrollbaren Containern 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.

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

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

Barrierefreie Typografie

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, 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 Apps mit großem Bildschirm und ein Beispiel für eine Antwort für ein adaptives und barrierefreies Design finden Sie in der Dokumentation.

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