Material Design 3 ist die nächste Weiterentwicklung von Material Design. Dazu gehören aktualisierte Designs, Komponenten und Personalisierungsfunktionen von Material You wie dynamische Farben. Es ist ein Update von Material Design 2 und passt zum neuen visuellen Stil und zur neuen System-UI von Android 12 und höher.
In diesem Leitfaden geht es hauptsächlich um die Migration von der Jetpack-Bibliothek „Compose Material“ (androidx.compose.material) zur Jetpack-Bibliothek „Compose Material 3“ (androidx.compose.material3).
Ansätze
Im Allgemeinen sollten Sie M2 und M3 nicht langfristig in einer einzigen App verwenden. Das liegt daran, dass sich die beiden Designsysteme und die jeweiligen Bibliotheken hinsichtlich ihrer UX-/UI-Designs und Compose-Implementierungen deutlich unterscheiden.
Ihre App kann ein Designsystem verwenden, z. B. eines, das mit Figma erstellt wurde. In solchen Fällen empfehlen wir Ihnen oder Ihrem Designteam dringend, das Design von M2 zu M3 zu migrieren, bevor Sie mit der Compose-Migration beginnen. Es macht keinen Sinn, eine App zu M3 zu migrieren, wenn ihr UX-/UI-Design auf M2 basiert.
Außerdem sollte Ihr Ansatz für die Migration von der Größe, Komplexität und dem UX-/UI-Design Ihrer App abhängen. So können Sie die Auswirkungen auf Ihre Codebasis minimieren. Die Migration sollte in mehreren Phasen erfolgen.
Migrationszeitpunkt
Sie sollten die Migration so bald wie möglich starten. Sie sollten jedoch prüfen, ob Ihre App vollständig von M2 zu M3 migriert werden kann. Bevor Sie beginnen, sollten Sie einige Blockierszenarien untersuchen:
| Szenario | Empfohlene Vorgehensweise |
|---|---|
| Keine Blockierungen | Stufenweise Migration starten |
| Eine Komponente aus M2 ist in M3 noch nicht verfügbar. Weitere Informationen finden Sie unten im Abschnitt Komponenten und Layouts. | Stufenweise Migration starten |
| Sie oder Ihr Designteam haben das Designsystem der App nicht von M2 zu M3 migriert | Designsystem von M2 nach M3 migrieren und dann die stufenweise Migration starten |
Auch wenn Sie von den oben genannten Szenarien betroffen sind, sollten Sie die Migration in mehreren Phasen durchführen, bevor Sie ein App-Update bestätigen und veröffentlichen. In diesen Fällen würden Sie M2 und M3 parallel verwenden und M2 nach und nach einführen, während Sie zu M3 migrieren.
Phasenbasierter Ansatz
Die allgemeinen Schritte für eine stufenweise Migration sind:
- Fügen Sie neben der M2-Abhängigkeit eine M3-Abhängigkeit hinzu.
- Fügen Sie M3-Versionen der Designs Ihrer App neben M2-Versionen der Designs Ihrer App hinzu.
- Migrieren Sie je nach Größe und Komplexität Ihrer App einzelne Module, Bildschirme oder Composeables zu M3. Weitere Informationen finden Sie in den folgenden Abschnitten.
- Entfernen Sie nach der vollständigen Migration die M2-Version(en) der Designs Ihrer App.
- Entfernen Sie die M2-Abhängigkeit.
Abhängigkeiten
M3 hat ein separates Paket und eine separate Version als M2:
M2
implementation "androidx.compose.material:material:$m2-version"
M3
implementation "androidx.compose.material3:material3:$m3-version"
Die neuesten M3-Versionen finden Sie auf der Seite mit den Compose Material 3-Releases.
Andere Materialabhängigkeiten außerhalb der Haupt-M2- und M3-Bibliotheken haben sich nicht geändert. Er verwendet eine Mischung aus M2- und M3-Paketen und ‑Versionen, was jedoch keine Auswirkungen auf die Migration hat. Sie können direkt mit M3 verwendet werden:
| Mediathek | Paket und Version |
|---|---|
| Material Design-Symbole erstellen | androidx.compose.material:material-icons-*:$m2-version |
| Material Ripple zusammenstellen | androidx.compose.material:material-ripple:$m2-version |
Experimentelle APIs
Einige M3 APIs gelten als experimentell. In solchen Fällen müssen Sie die Funktion auf Funktions- oder Dateiebene mit der Annotation ExperimentalMaterial3Api aktivieren:
import androidx.compose.material3.ExperimentalMaterial3Api
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun AppComposable() {
// M3 composables
}
Designs
Sowohl in M2 als auch in M3 heißt das zusammensetzbare Design MaterialTheme, aber die Importpakete und Parameter unterscheiden sich:
M2
import androidx.compose.material.MaterialTheme
MaterialTheme(
colors = AppColors,
typography = AppTypography,
shapes = AppShapes
) {
// M2 content
}
M3
import androidx.compose.material3.MaterialTheme
MaterialTheme(
colorScheme = AppColorScheme,
typography = AppTypography,
shapes = AppShapes
) {
// M3 content
}
Farbe
Das Farbsystem in M3 unterscheidet sich deutlich von M2. Die Anzahl der Farbparameter hat zugenommen, sie haben unterschiedliche Namen und werden M3-Komponenten unterschiedlich zugeordnet. In Compose gilt dies für die M2-Klasse Colors, die M3-Klasse ColorScheme und zugehörige Funktionen:
M2
import androidx.compose.material.lightColors
import androidx.compose.material.darkColors
val AppLightColors = lightColors(
// M2 light Color parameters
)
val AppDarkColors = darkColors(
// M2 dark Color parameters
)
val AppColors = if (darkTheme) {
AppDarkColors
} else {
AppLightColors
}
M3
import androidx.compose.material3.lightColorScheme
import androidx.compose.material3.darkColorScheme
val AppLightColorScheme = lightColorScheme(
// M3 light Color parameters
)
val AppDarkColorScheme = darkColorScheme(
// M3 dark Color parameters
)
val AppColorScheme = if (darkTheme) {
AppDarkColorScheme
} else {
AppLightColorScheme
}
Aufgrund der erheblichen Unterschiede zwischen den Farbsystemen M2 und M3 gibt es keine sinnvolle Zuordnung für Color-Parameter. Verwenden Sie stattdessen das Tool Material Theme Builder, um ein M3-Farbschema zu generieren. Verwenden Sie die M2-Farben als Kern-Quellfarben im Tool. Das Tool wird in Tonpaletten erweitert, die vom M3-Farbschema verwendet werden. Als Ausgangspunkt empfehlen wir die folgenden Zuordnungen:
| M2 | Tool zur Erstellung von Material-Designs |
|---|---|
primary |
Primär |
primaryVariant |
Sekundär |
secondary |
Dritter Track |
surface oder background |
Neutral |
Sie können die Hexadezimalcodewerte für helle und dunkle Designs aus dem Tool kopieren und zum Implementieren einer M3 ColorScheme-Instanz verwenden. Alternativ können Sie mit Material Theme Builder Compose-Code exportieren.
isLight
Im Gegensatz zur M2-Colors-Klasse enthält die M3-ColorScheme-Klasse keinen isLight-Parameter. Generell sollten Sie versuchen, das zu modellieren,
was diese Informationen benötigt, auf Themenebene. Beispiel:
M2
import androidx.compose.material.lightColors
import androidx.compose.material.darkColors
import androidx.compose.material.MaterialTheme
@Composable
private fun AppTheme(
darkTheme: Boolean = isSystemInDarkTheme(),
content: @Composable () -> Unit
) {
val colors = if (darkTheme) darkColors(…) else lightColors(…)
MaterialTheme(
colors = colors,
content = content
)
}
@Composable
fun AppComposable() {
AppTheme {
val cardElevation = if (MaterialTheme.colors.isLight) 0.dp else 4.dp
…
}
}
M3
import androidx.compose.material3.lightColorScheme
import androidx.compose.material3.darkColorScheme
import androidx.compose.material3.MaterialTheme
val LocalCardElevation = staticCompositionLocalOf { Dp.Unspecified }
@Composable
private fun AppTheme(
darkTheme: Boolean = isSystemInDarkTheme(),
content: @Composable () -> Unit
) {
val cardElevation = if (darkTheme) 4.dp else 0.dp
CompositionLocalProvider(LocalCardElevation provides cardElevation) {
val colorScheme = if (darkTheme) darkColorScheme(…) else lightColorScheme(…)
MaterialTheme(
colorScheme = colorScheme,
content = content
)
}
}
@Composable
fun AppComposable() {
AppTheme {
val cardElevation = LocalCardElevation.current
…
}
}
Weitere Informationen finden Sie im Erstellungsleitfaden für benutzerdefinierte Designsysteme.
Dynamische Farben
Eine neue Funktion in M3 ist die dynamische Farbe. Anstatt benutzerdefinierte Farben zu verwenden, kann ein M3 ColorScheme unter Android 12 und höher die Farben des Gerätehintergrunds mithilfe der folgenden Funktionen nutzen:
Typografie
Das Typografiesystem in M3 unterscheidet sich von dem in M2. Die Anzahl der Typografieparameter ist ungefähr gleich, sie haben jedoch unterschiedliche Namen und werden M3-Komponenten unterschiedlich zugeordnet. In Compose gilt dies für die M2-Klasse Typography und die M3-Klasse Typography:
M2
import androidx.compose.material.Typography
val AppTypography = Typography(
// M2 TextStyle parameters
)
M3
import androidx.compose.material3.Typography
val AppTypography = Typography(
// M3 TextStyle parameters
)
Als Ausgangspunkt empfehlen wir die folgenden TextStyle-Parameterzuordnungen:
| M2 | M3 |
|---|---|
h1 |
displayLarge |
h2 |
displayMedium |
h3 |
displaySmall |
| – | headlineLarge |
h4 |
headlineMedium |
h5 |
headlineSmall |
h6 |
titleLarge |
subtitle1 |
titleMedium |
subtitle2 |
titleSmall |
body1 |
bodyLarge |
body2 |
bodyMedium |
caption |
bodySmall |
button |
labelLarge |
| – | labelMedium |
overline |
labelSmall |
Form
Das Formsystem in M3 unterscheidet sich von M2. Die Anzahl der Formparameter hat zugenommen, sie haben einen anderen Namen und sind anders den M3-Komponenten zugeordnet. In Compose gilt dies für die M2-Klasse Shapes und die M3-Klasse Shapes:
M2
import androidx.compose.material.Shapes
val AppShapes = Shapes(
// M2 Shape parameters
)
M3
import androidx.compose.material3.Shapes
val AppShapes = Shapes(
// M3 Shape parameters
)
Als Ausgangspunkt empfehlen wir die folgenden Shape-Parameterzuordnungen:
| M2 | M3 |
|---|---|
| – | extraSmall |
small |
small |
medium |
medium |
large |
large |
| – | extraLarge |
Komponenten und Layouts
Die meisten Komponenten und Layouts aus M2 sind in M3 verfügbar. Es gibt jedoch einige fehlende und neue, die in M2 nicht vorhanden waren. Außerdem haben einige M3-Komponenten mehr Variationen als ihre Entsprechungen in M2. Im Allgemeinen sollen die M3 API-Oberflächen so ähnlich wie möglich zu ihren engsten Entsprechungen in M2 sein.
Aufgrund der aktualisierten Farb-, Typografie- und Formsysteme werden M3-Komponenten in der Regel anders den neuen Designwerten zugeordnet. Das Verzeichnis „tokens“ im Quellcode von Compose Material 3 ist eine gute Informationsquelle für diese Zuordnungen.
Während einige Komponenten besondere Überlegungen erfordern, werden die folgenden Funktionszuordnungen als Ausgangspunkt empfohlen:
Fehlende APIs:
| M2 | M3 |
|---|---|
androidx.compose.material.swipeable |
Noch nicht verfügbar |
Ersetzte APIs:
| M2 | M3 |
|---|---|
androidx.compose.material.BackdropScaffold |
Kein M3-Äquivalent, stattdessen zu Scaffold oder BottomSheetScaffold migrieren |
androidx.compose.material.BottomDrawer |
Kein M3-Äquivalent, stattdessen zu ModalBottomSheet migrieren |
Umbenennung von APIs:
Alle anderen APIs:
Die neuesten M3-Komponenten und -Layouts finden Sie in der Referenzübersicht für Material 3 API. Neue und aktualisierte APIs finden Sie auf der Releaseseite.
Scaffold, Snackbars und Navigationsleiste
Das Gerüst in M3 unterscheidet sich von dem in M2. Sowohl in M2 als auch in M3 heißt das Hauptlayout-Composeable Scaffold, aber die Importpakete und ‑parameter unterscheiden sich:
M2
import androidx.compose.material.Scaffold
Scaffold(
// M2 scaffold parameters
)
M3
import androidx.compose.material3.Scaffold
Scaffold(
// M3 scaffold parameters
)
Die M2-Version Scaffold enthält einen backgroundColor-Parameter, der in der M3-Version Scaffold jetzt containerColor heißt:
M2
import androidx.compose.material.Scaffold
Scaffold(
backgroundColor = …,
content = { … }
)
M3
import androidx.compose.material3.Scaffold
Scaffold(
containerColor = …,
content = { … }
)
Die M2-Klasse ScaffoldState gibt es in M3 nicht mehr, da sie einen Parameter drawerState enthält, der nicht mehr benötigt wird. Wenn Sie Infofelder mit der M3-Scaffold anzeigen möchten, verwenden Sie stattdessen SnackbarHostState:
M2
import androidx.compose.material.Scaffold
import androidx.compose.material.rememberScaffoldState
val scaffoldState = rememberScaffoldState()
val scope = rememberCoroutineScope()
Scaffold(
scaffoldState = scaffoldState,
content = {
…
scope.launch {
scaffoldState.snackbarHostState.showSnackbar(…)
}
}
)
M3
import androidx.compose.material3.Scaffold
import androidx.compose.material3.SnackbarHost
import androidx.compose.material3.SnackbarHostState
val snackbarHostState = remember { SnackbarHostState() }
val scope = rememberCoroutineScope()
Scaffold(
snackbarHost = { SnackbarHost(snackbarHostState) },
content = {
…
scope.launch {
snackbarHostState.showSnackbar(…)
}
}
)
Alle drawer*-Parameter aus der M2-Scaffold wurden aus der M3-Scaffold entfernt. Dazu gehören Parameter wie drawerShape und drawerContent. Wenn Sie eine Navigationsleiste mit der M3 Scaffold anzeigen möchten, verwenden Sie stattdessen ein Navigationsleiste-Komposit, z. B. ModalNavigationDrawer:
M2
import androidx.compose.material.DrawerValue
import
import androidx.compose.material.Scaffold
import androidx.compose.material.rememberDrawerState
import androidx.compose.material.rememberScaffoldState
val scaffoldState = rememberScaffoldState(
drawerState = rememberDrawerState(DrawerValue.Closed)
)
val scope = rememberCoroutineScope()
Scaffold(
scaffoldState = scaffoldState,
drawerContent = { … },
drawerGesturesEnabled = …,
drawerShape = …,
drawerElevation = …,
drawerBackgroundColor = …,
drawerContentColor = …,
drawerScrimColor = …,
content = {
…
scope.launch {
scaffoldState.drawerState.open()
}
}
)
M3
import androidx.compose.material3.DrawerValue
import androidx.compose.material3.ModalDrawerSheet
import androidx.compose.material3.ModalNavigationDrawer
import androidx.compose.material3.Scaffold
import androidx.compose.material3.rememberDrawerState
val drawerState = rememberDrawerState(DrawerValue.Closed)
val scope = rememberCoroutineScope()
ModalNavigationDrawer(
drawerState = drawerState,
drawerContent = {
ModalDrawerSheet(
drawerShape = …,
drawerTonalElevation = …,
drawerContainerColor = …,
drawerContentColor = …,
content = { … }
)
},
gesturesEnabled = …,
scrimColor = …,
content = {
Scaffold(
content = {
…
scope.launch {
drawerState.open()
}
}
)
}
)
Obere App-Leiste
Die oberen App-Leisten in M3 unterscheiden sich von denen in M2. Sowohl in M2 als auch in M3 heißt das Hauptelement der App-Leiste oben TopAppBar, aber die Importpakete und ‑parameter unterscheiden sich:
M2
import androidx.compose.material.TopAppBar
TopAppBar(…)
M3
import androidx.compose.material3.TopAppBar
TopAppBar(…)
Verwenden Sie die M3 CenterAlignedTopAppBar, wenn Sie zuvor Inhalte im M2 TopAppBar zentriert haben. Es ist auch gut, die Tasten MediumTopAppBar und LargeTopAppBar zu kennen.
Die oberen App-Bars von M3 enthalten einen neuen Parameter scrollBehavior, mit dem beim Scrollen durch die Klasse TopAppBarScrollBehavior verschiedene Funktionen verfügbar sind, z. B. die Änderung der Höhe. Das funktioniert in Kombination mit dem Scrollen von Inhalten über Modifer.nestedScroll. In der M2 TopAppBar war das möglich, indem der Parameter elevation manuell geändert wurde:
M2
import androidx.compose.material.AppBarDefaults
import androidx.compose.material.Scaffold
import androidx.compose.material.TopAppBar
val state = rememberLazyListState()
val isAtTop by remember {
derivedStateOf {
state.firstVisibleItemIndex == 0 && state.firstVisibleItemScrollOffset == 0
}
}
Scaffold(
topBar = {
TopAppBar(
elevation = if (isAtTop) {
0.dp
} else {
AppBarDefaults.TopAppBarElevation
},
…
)
},
content = {
LazyColumn(state = state) { … }
}
)
M3
import androidx.compose.material3.Scaffold
import androidx.compose.material3.TopAppBar
import androidx.compose.material3.TopAppBarDefaults
val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior()
Scaffold(
modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
topBar = {
TopAppBar(
scrollBehavior = scrollBehavior,
…
)
},
content = {
LazyColumn { … }
}
)
Navigationsleiste unten
Die Navigation am unteren Rand in M2 wurde in M3 in Navigationsleiste umbenannt. In M2 gibt es die BottomNavigation- und BottomNavigationItem-Kompositen, in M3 die NavigationBar- und NavigationBarItem-Kompositen:
M2
import androidx.compose.material.BottomNavigation
import androidx.compose.material.BottomNavigationItem
BottomNavigation {
BottomNavigationItem(…)
BottomNavigationItem(…)
BottomNavigationItem(…)
}
M3
import androidx.compose.material3.NavigationBar
import androidx.compose.material3.NavigationBarItem
NavigationBar {
NavigationBarItem(…)
NavigationBarItem(…)
NavigationBarItem(…)
}
Schaltflächen, Symbolschaltflächen und UAS
Schaltflächen, Symbolschaltflächen und unverankerte Aktionsschaltflächen (Floating Action Buttons, FABs) in M3 unterscheiden sich von denen in M2. M3 enthält alle M2-Schaltflächen-Kompositionen:
M2
import androidx.compose.material.Button
import androidx.compose.material.ExtendedFloatingActionButton
import androidx.compose.material.FloatingActionButton
import androidx.compose.material.IconButton
import androidx.compose.material.IconToggleButton
import androidx.compose.material.OutlinedButton
import androidx.compose.material.TextButton
// M2 buttons
Button(…)
OutlinedButton(…)
TextButton(…)
// M2 icon buttons
IconButton(…)
IconToggleButton(…)
// M2 FABs
FloatingActionButton(…)
ExtendedFloatingActionButton(…)
M3
import androidx.compose.material3.Button
import androidx.compose.material3.ExtendedFloatingActionButton
import androidx.compose.material3.FloatingActionButton
import androidx.compose.material3.IconButton
import androidx.compose.material3.IconToggleButton
import androidx.compose.material3.OutlinedButton
import androidx.compose.material3.TextButton
// M3 buttons
Button(…)
OutlinedButton(…)
TextButton(…)
// M3 icon buttons
IconButton(…)
IconToggleButton(…)
// M3 FABs
FloatingActionButton(…)
ExtendedFloatingActionButton(…)
M3 enthält auch neue Schaltflächenvarianten. Weitere Informationen finden Sie in der Übersicht über die Compose Material 3 API-Referenz.
Wechseln
Der Schalter in M3 unterscheidet sich von dem in M2. Sowohl in M2 als auch in M3 heißt der Schalter „composable“, aber die Importpakete unterscheiden sich:Switch
M2
import androidx.compose.material.Switch
Switch(…)
M3
import androidx.compose.material3.Switch
Switch(…)
Oberflächen und Höhen
Die Oberflächen- und Höhensysteme in M3 unterscheiden sich von denen in M2. In M3 gibt es zwei Arten von Höhen:
- Schattenhöhe (wirft einen Schatten, wie bei M2)
- Höhen in Tonhöhe (überlagert eine Farbe, neu auf M3)
In Compose gilt das für die M2-Funktion Surface und die M3-Funktion Surface:
M2
import androidx.compose.material.Surface
Surface(
elevation = …
) { … }
M3
import androidx.compose.material3.Surface
Surface(
shadowElevation = …,
tonalElevation = …
) { … }
Sie können die Werte elevation Dp in M2 sowohl für shadowElevation als auch für tonalElevation in M3 verwenden, je nach UX-/UI-Designvorgabe.
Surface ist die zugrunde liegende Komponente der meisten Komponenten. Daher können auch Komponenten-Kompositionen Höhenparameter enthalten, die Sie auf die gleiche Weise migrieren müssen.
Die stufenförmigen Höhen in M3 ersetzen das Konzept der Höhen-Overlays in dunklen M2-Designs . Daher gibt es ElevationOverlay und LocalElevationOverlay in M3 nicht und LocalAbsoluteElevation in M2 wurde in M3 zu LocalAbsoluteTonalElevation geändert.
Betonung und Inhalt – Alphaversion
Die Betonung in M3 unterscheidet sich deutlich von M2. In M2 wurde die Betonung durch die Verwendung von on-Farben mit bestimmten Alphawerten erzielt, um Inhalte wie Text und Symbole zu unterscheiden. In M3 gibt es jetzt mehrere Möglichkeiten:
- Verwendung von on-Farben neben ihren variant on-Farben aus dem erweiterten M3-Farbsystem.
- Verwenden Sie unterschiedliche Schriftschnitte für den Text.
Daher sind ContentAlpha und LocalContentAlpha in M3 nicht vorhanden und müssen ersetzt werden.
Als Ausgangspunkt empfehlen wir die folgenden Zuordnungen:
| M2 | M3 |
|---|---|
onSurface mit ContentAlpha.high |
onSurface im Allgemeinen, FontWeight.Medium – FontWeight.Black für Text |
onSurface mit ContentAlpha.medium |
onSurfaceVariant im Allgemeinen, FontWeight.Thin – FontWeight.Normal für Text |
onSurface mit ContentAlpha.disabled |
onSurface.copy(alpha = 0.38f) |
Hier ein Beispiel für die Betonung von Symbolen in M2 und M3:
M2
import androidx.compose.material.ContentAlpha
import androidx.compose.material.LocalContentAlpha
// High emphasis
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.high) {
Icon(…)
}
// Medium emphasis
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
Icon(…)
}
// Disabled emphasis
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.disabled) {
Icon(…)
}
M3
import androidx.compose.material3.LocalContentColor
// High emphasis
CompositionLocalProvider(LocalContentColor provides MaterialTheme.colorScheme.onSurface) {
Icon(…)
}
// Medium emphasis
CompositionLocalProvider(LocalContentColor provides MaterialTheme.colorScheme.onSurfaceVariant) {
Icon(…)
}
// Disabled emphasis
CompositionLocalProvider(LocalContentColor provides MaterialTheme.colorScheme.onSurface.copy(alpha = 0.38f)) {
Icon(…)
}
Hier sind Beispiele für die Betonung von Text in M2 und M3:
M2
import androidx.compose.material.ContentAlpha
import androidx.compose.material.LocalContentAlpha
// High emphasis
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.high) {
Text(…)
}
// Medium emphasis
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
Text(…)
}
// Disabled emphasis
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.disabled) {
Text(…)
}
M3
import androidx.compose.material3.LocalContentColor
// High emphasis
Text(
…,
fontWeight = FontWeight.Bold
)
// Medium emphasis
Text(
…,
fontWeight = FontWeight.Normal
)
// Disabled emphasis
CompositionLocalProvider(LocalContentColor provides MaterialTheme.colorScheme.onSurface.copy(alpha = 0.38f)) {
Text(
…,
fontWeight = FontWeight.Normal
)
}
Hintergründe und Container
Hintergründe in M2 werden in M3 als Container bezeichnet. Im Allgemeinen können Sie background*-Parameter in M2 mit denselben Werten in M3 durch container* ersetzen.
Beispiel:
M2
Badge(
backgroundColor = MaterialTheme.colors.primary
) { … }
M3
Badge(
containerColor = MaterialTheme.colorScheme.primary
) { … }
Nützliche Links
Weitere Informationen zur Migration von M2 zu M3 in Compose finden Sie in den folgenden zusätzlichen Ressourcen.
Docs
Beispiel-Apps
- Antwort M3 Beispiel-App
- Migration der Beispiel-App „Jetchat“ von M2 zu M3
- Beispiel-App für Jetnews von M2 zu M3 migrieren
- Jetzt in der Android-M3-Hero-App :core-designsystem-Modul
Videos
API-Referenz und Quellcode
Empfehlungen für dich
- Hinweis: Der Linktext wird angezeigt, wenn JavaScript deaktiviert ist.
- Material Design 2 in der compose-Ansicht
- Material Design 3 in Compose
- Benutzerdefinierte Designsysteme in Compose