In Compose von Material 2 zu Material 3 migrieren

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. Es gibt einige Blockierer, die Sie vor Beginn untersuchen sollten:

Auch wenn Sie von den oben genannten Szenarien betroffen sind, sollten Sie die Migration in 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:

1. Fügen Sie neben der M2-Abhängigkeit eine M3-Abhängigkeit hinzu.
2. Fügen Sie M3-Versionen der Designs Ihrer App neben M2-Versionen der Designs Ihrer App hinzu.
3. 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.
4. Entfernen Sie nach der vollständigen Migration die M2-Versionen der Themen Ihrer App.
5. Entfernen Sie die M2-Abhängigkeit.

Abhängigkeiten

M3 hat ein separates Paket und eine separate Version als M2:

implementation "androidx.compose.material:material:$m2-version"

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 ohne Änderungen mit M3 verwendet werden:

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

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun AppComposable() {
    // M3 composables
}

Designs

Sowohl in M2 als auch in M3 heißt das Theme-Composeable MaterialTheme, aber die Importpakete und ‑parameter unterscheiden sich:

import androidx.compose.material.MaterialTheme

MaterialTheme(
    colors = AppColors,
    typography = AppTypography,
    shapes = AppShapes
) {
    // M2 content
}

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:

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
}

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, die im Tool in Tonpaletten erweitert werden, die vom M3-Farbschema verwendet werden. Als Ausgangspunkt empfehlen wir die folgenden Zuordnungen:

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. Im Allgemeinen sollten Sie versuchen, alles, was diese Informationen benötigt, auf Themenebene zu modellieren. Beispiel:

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
        …
    }
}

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 Leitfaden für benutzerdefinierte Designsysteme in Compose.

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:

• dynamicLightColorScheme
• dynamicDarkColorScheme

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:

import androidx.compose.material.Typography

val AppTypography = Typography(
    // M2 TextStyle parameters
)

import androidx.compose.material3.Typography

val AppTypography = Typography(
    // M3 TextStyle parameters
)

Als Ausgangspunkt empfehlen wir die folgenden TextStyle-Parameterzuordnungen:

Form

Das Formsystem in M3 unterscheidet sich von dem in M2. Die Anzahl der Formparameter hat zugenommen, sie haben unterschiedliche Namen und werden unterschiedlich M3-Komponenten zugeordnet. In Compose gilt dies für die M2-Klasse Shapes und die M3-Klasse Shapes:

import androidx.compose.material.Shapes

val AppShapes = Shapes(
    // M2 Shape parameters
)

import androidx.compose.material3.Shapes

val AppShapes = Shapes(
    // M3 Shape parameters
)

Als Ausgangspunkt empfehlen wir die folgenden Shape-Parameterzuordnungen:

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

Für einige Komponenten sind spezielle Überlegungen erforderlich. Als Ausgangspunkt empfehlen wir die folgenden Funktionszuordnungen:

Fehlende APIs:

Ersetzte APIs:

Umbenennung von APIs:

Alle anderen APIs:

Die neuesten M3-Komponenten und -Layouts finden Sie in der Übersicht der Compose Material 3 API-Referenz. Auf der Release-Seite werden neue und aktualisierte APIs angezeigt.

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:

import androidx.compose.material.Scaffold

Scaffold(
    // M2 scaffold parameters
)

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:

import androidx.compose.material.Scaffold

Scaffold(
    backgroundColor = …,
    content = { … }
)

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:

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(…)
        }
    }
)

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 wie ModalNavigationDrawer:

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

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:

import androidx.compose.material.TopAppBar

TopAppBar(…)

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, um beim Scrollen durch die Klasse TopAppBarScrollBehavior verschiedene Funktionen bereitzustellen, z. B. die Änderung der Höhe. Das funktioniert in Kombination mit dem Scrollen von Inhalten über Modifer.nestedScroll. In der M2 TopAppBar war dies möglich, indem der Parameter elevation manuell geändert wurde:

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) { … }
    }
)

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 untere Navigation in M2 wurde in M3 in Navigationsleiste umbenannt. In M2 gibt es die BottomNavigation- und BottomNavigationItem-Kompositen, in M3 die NavigationBar- und NavigationBarItem-Kompositen:

import androidx.compose.material.BottomNavigation
import androidx.compose.material.BottomNavigationItem

BottomNavigation {
    BottomNavigationItem(…)
    BottomNavigationItem(…)
    BottomNavigationItem(…)
}

import androidx.compose.material3.NavigationBar
import androidx.compose.material3.NavigationBarItem

NavigationBar {
    NavigationBarItem(…)
    NavigationBarItem(…)
    NavigationBarItem(…)
}

Schaltflächen, Symbolschaltflächen und Floating Action Buttons

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:

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

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 Switch „composable“, aber die Importpakete unterscheiden sich:Switch

import androidx.compose.material.Switch

Switch(…)

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)
• Tonale Höhenangabe (Farbe wird überlagert, neu in M3)

In Compose gilt dies für die M2-Funktion Surface und die M3-Funktion Surface:

import androidx.compose.material.Surface

Surface(
    elevation = …
) { … }

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 tonale Höhenanhebung in M3 ersetzt das Konzept der Höhenüberlagerungen in M2-Dunkelthemen . Daher gibt es ElevationOverlay und LocalElevationOverlay in M3 nicht und LocalAbsoluteElevation in M2 wurde in M3 zu LocalAbsoluteTonalElevation geändert.

Betonung und Inhalt – Alphaversion

Der Schwerpunkt 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:

• Verwenden Sie An-Farben zusammen mit ihren Variante-An-Farben aus dem erweiterten M3-Farbsystem.
• Verwenden Sie unterschiedliche Schriftschnitte für den Text.

Daher existieren ContentAlpha und LocalContentAlpha in M3 nicht und müssen ersetzt werden.

Als Ausgangspunkt empfehlen wir die folgenden Zuordnungen:

Hier ein Beispiel für die Betonung von Symbolen in M2 und M3:

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(…)
}

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:

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(…)
}

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 durch container* in M3 ersetzen und dabei dieselben Werte verwenden. Beispiel:

Badge(
    backgroundColor = MaterialTheme.colors.primary
) { … }

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

• Material Design 3 in Compose

Beispiel-Apps

• Reply M3-Beispiel-App
• Migration der Beispiel-App „Jetchat“ von M2 zu M3
  • Erste alpha01-Migration
  • Weitere Informationen zu Alpha 10
• Migration der Beispiel-App „Jetnews“ von M2 zu M3
• Jetzt in der Android-M3-Hero-App :core-designsystem-Modul

Videos

• Material You mit Jetpack Compose implementieren

API-Referenz und Quellcode

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