Material Design 3 in Compose

Jetpack Compose bietet eine Implementierung von Material Design 3, Entwicklung des Material Design. Material 3 umfasst aktualisierte Themen, Komponenten und Material You-Personalisierungsfunktionen wie dynamische Farben Sie wurden so entwickelt, dass sie zum neuen visuellen Stil und zur System-UI von Android 12 passen. und höher.

Unten sehen Sie die Implementierung von Material Design 3. Verwenden Sie dazu die Beispiel-App für Antworten. Das Antwortbeispiel ist basierend auf Material Design 3.

<ph type="x-smartling-placeholder">

</ph>

Abhängigkeit

Wenn Sie Material 3 in Ihrer Google Compose-App verwenden möchten, fügen Sie Compose Material 3 hinzu Abhängigkeit von build.gradle-Dateien:

implementation "androidx.compose.material3:material3:$material3_version"

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

Experimentelle APIs

Einige M3 APIs gelten als experimentell. In solchen Fällen müssen Sie die Funktion oder Dateiebene mithilfe der Annotation ExperimentalMaterial3Api:

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

Materielle Thematisierung

Ein M3-Design enthält die folgenden Untersysteme: Farbschema, Typografie und Formen. Bei der Anpassung werden Ihre Änderungen automatisch in die M3-Komponenten übernommen, mit denen Sie Ihre App erstellen können.

<ph type="x-smartling-placeholder">

</ph>

Jetpack Compose implementiert diese Konzepte mit der M3-MaterialTheme zusammensetzbar:

MaterialTheme(
    colorScheme = /* ...
    typography = /* ...
    shapes = /* ...
) {
    // M3 app content
}
Material3Snippets.kt

Definieren Sie für den Anwendungsinhalt ein Design, Farbschema, Typografie und für Ihre App spezifisch sind.

Farbschema

Die Grundlage eines Farbschemas ist ein Satz von fünf Schlüsselfarben. Jede dieser Optionen Farben beziehen sich auf eine Tonpalette mit 13 Tönen, die von Material 3 verwendet werden. Komponenten. Dies ist z. B. das Farbschema für das helle Design Antwort:

<ph type="x-smartling-placeholder">

</ph>

Weitere Informationen zu Farbschema und Farbrollen

Farbschemas generieren

Es ist zwar möglich, ein benutzerdefiniertes ColorScheme manuell zu erstellen, es ist aber oft einfacher, mit den Farben Ihrer Marke erstellen. Das Thema Material Builder können Sie hierzu Themencode erstellen Die folgenden Dateien werden generiert:

• Color.kt enthält die Farben Ihres Designs mit allen Rollen, die für hellen und dunklen Designfarben.

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 die App aus.

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

Verwende isSystemInDarkTheme(), um helle und dunkle Designs zu unterstützen. Basierend auf den Systemeinstellung festlegen, welches Farbschema verwendet werden soll: hell oder dunkel.

Dynamische Farbschemas

Dynamische Farben sind der wichtigste Bestandteil von Material You. Der Algorithmus leitet benutzerdefinierte Farben aus dem Hintergrund eines Nutzers ab, die dann auf seine Apps und der System-UI. Diese Farbvorlage wird als Ausgangspunkt für die Generierung hellen und dunklen Farbschemata.

<ph type="x-smartling-placeholder">

</ph>

Dynamische Farben sind ab Android 12 verfügbar. Wenn die dynamische Farbe verfügbar ist, können Sie eine dynamische ColorScheme einrichten. Ist dies nicht der Fall, oder ein benutzerdefiniertes helles oder dunkles ColorScheme-Element verwenden.

ColorScheme bietet Builder-Funktionen zum Erstellen einer dynamischen Lampe oder eines dunkles Farbschema:

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

Farbnutzung

Sie können auf die Farben des Material Themes in Ihrer App zugreifen: MaterialTheme.colorScheme:

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

Jede Farbrolle kann an verschiedenen Stellen verwendet werden, je nachdem, Bedeutung und Betonung.

• „Primär“ ist die Grundfarbe, die für Hauptkomponenten wie markante Schaltflächen, Aktivierungsstatus und die Färbung erhöhter Oberflächen.
• Die sekundäre Schlüsselfarbe wird für weniger auffällige Komponenten in der Benutzeroberfläche verwendet, z. B. als Infofelder für Filter und bietet mehr Möglichkeiten, Farben auszudrücken.
• Die tertiäre Schlüsselfarbe wird verwendet, um die Rollen kontrastierender Akzente abzuleiten, die können verwendet werden, um Primär- und Sekundärfarben aufeinander abzustimmen Aufmerksamkeit auf ein Element lenken.

Das Design der Beispiel-Antwort-App verwendet die Farbe für den primären Container Primär-Container, um das ausgewählte Element hervorzuheben.

<ph type="x-smartling-placeholder">

</ph>

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 in der Antwortnavigationsleiste, wie sekundär und tertiär Containerfarben werden im Kontrast verwendet, um Betonung und Akzent zu schaffen.

<ph type="x-smartling-placeholder">

</ph>

Typografie

Material Design 3 definiert eine Schriftskala, einschließlich Textstile. die aus Material Design 2 übernommen wurden. Die Benennung und Gruppierung wurden vereinfacht zu: „display“, „headline“, „title“, „body“ und „label“, mit „Large“, „Medium“, und kleine Größen für jedes Element.

<ph type="x-smartling-placeholder">

</ph>

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 stellt die M3-Klasse Typography zusammen mit den vorhandenen TextStyle- und schriftbezogene Klassen, um den Material 3-Typ zu modellieren Der Typography-Konstruktor bietet Standardeinstellungen für jeden Stil, die Sie weglassen können Parameter, 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

<ph type="x-smartling-placeholder">

</ph>

Ihr Produkt benötigt wahrscheinlich nicht alle 15 Standardstile aus dem Material Design. mit der Schriftgröße. In diesem Beispiel werden fünf Größen für einen reduzierten Satz ausgewählt, während die werden ausgelassen.

Sie können die Typografie anpassen, indem Sie die Standardwerte von TextStyle ändern. und schriftbezogene Properties wie fontFamily und letterSpacing.

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 die zusammensetzbare Funktion MaterialTheme in M3 angegeben wurde: mit MaterialTheme.typography:

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 Materialrichtlinien für die Bewerbung von Typografie.

Formen

Materialoberflächen können in verschiedenen Formen dargestellt werden. Gestaltet direkte Aufmerksamkeit, Komponenten identifizieren, Zustand kommunizieren und die Marke zum Ausdruck bringen.

Die Formskala definiert den Stil der Containerecken und bietet eine Reihe von von quadratisch zu vollständig kreisförmig sein.

Formen definieren

Compose bietet der M3-Klasse Shapes erweiterte Parameter zur Unterstützung neue M3-Formen. Die M3-Formskala ähnelt eher der Schriftskala, und so eine ausdrucksstarke Form von Formen auf der Benutzeroberfläche ermöglichen.

Es gibt verschiedene Größen von Formen:

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

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

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 Sie Ihre Shapes definiert haben, können Sie sie an M3-MaterialTheme übergeben:

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

Formen verwenden

Sie können die Formskala für alle Komponenten im MaterialTheme- oder können Sie dies für einzelne Komponenten tun.

Form mittel und groß mit Standardwerten anwenden:

Card(shape = MaterialTheme.shapes.medium) { /* card content */ }
FloatingActionButton(
    shape = MaterialTheme.shapes.large,
    onClick = {
    }
) {
    /* fab content */
}
Material3Snippets.kt

<ph type="x-smartling-placeholder">

</ph>

Es gibt zwei weitere Formen, RectangleShape und CircleShape, die Teil von „Compose“. Die Rechteckform hat keinen Rahmenradius und die Kreisform wird vollständig angezeigt. Eingekreiste Kanten:

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

In den folgenden Beispielen werden einige der Komponenten mit Standardformwerten gezeigt. auf sie angewendet:

<ph type="x-smartling-placeholder">

</ph>

Weitere Informationen zu den Materialrichtlinien für die Bewerbung von Form angezeigt.

Betonung

M3 wird durch Farbvariationen und Farbvarianten hervorgehoben. Kombinationen. In M3 gibt es zwei Möglichkeiten, Ihre UI zu betonen:

• Die Verwendung von Oberfläche, Oberflächenvariante und Hintergrund verschiedene Farben aus dem erweiterten M3-Farbsystem. Beispiel: Oberflächenvariante kann mit „Oberflächenvariante“ und „Oberflächenvariante“ verwendet werden. auf der Oberfläche, um verschiedene Betonungen zu erzielen.

<ph type="x-smartling-placeholder">

</ph>

• Unterschiedliche Schriftstärken für Text verwenden Wie Sie oben gesehen haben, können Sie zu unserer Schriftskala hinzufügen, um verschiedene Betonungen zu schaffen.

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

Höhe

Material 3 stellt Erhebungen in erster Linie mithilfe von Ton-Overlays dar. Dies ist ein neues Container und Oberflächen voneinander zu unterscheiden und die Tonwerte zu erhöhen Elevation verwendet einen auffälligeren Ton – zusätzlich zu Schatten.

<ph type="x-smartling-placeholder">

</ph>

Höhen-Overlays in dunklen Designs sind jetzt auch in Tonfarben-Overlays verfügbar. Material 3. Die Overlay-Farbe stammt aus der primären Farbfläche.

<ph type="x-smartling-placeholder">

</ph>

Die M3-Oberfläche – die zusammensetzbare Back-up-Funktion hinter den meisten M3-Komponenten – unterstützt sowohl Höhen in Ton als auch Schatten:

Surface(
    modifier = Modifier,
    tonalElevation = /*...
    shadowElevation = /*...
) {
    Column(content = content)
}
Material3Snippets.kt

Materialkomponenten

Material Design bietet zahlreiche Material-Komponenten. (z. B. Schaltflächen, Chips, Karten, Navigationsleisten), die bereits im Designs und helfen Ihnen, ansprechende Material Design-Apps zu erstellen. Sie können jetzt Komponenten mit Standardeigenschaften sofort ein.

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

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

<ph type="x-smartling-placeholder">

</ph>

<ph type="x-smartling-placeholder">

</ph>
• 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 hervorgehobene Aktion:

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

• Eine 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 große Vielfalt an Komponenten wie Schaltflächen, App- Leisten, Navigationskomponenten, die speziell für verschiedene Zwecke entwickelt wurden Gehäuse und Bildschirmgrößen.

Navigationskomponenten

Material bietet auch mehrere Navigationskomponenten, die dir dabei helfen, je nach Bildschirmgröße und -status anpassen.

NavigationBar wird für kompakte Geräte verwendet, wenn das Ziel fünf oder weniger sein soll Ziele:

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 in Querformat verwenden. Ergonomische Funktionen und ein besseres Nutzererlebnis für diese Geräte.

NavigationRail(
    modifier = Modifier.fillMaxHeight(),
) {
    Destinations.entries.forEach { replyDestination ->
        NavigationRailItem(
            selected = selectedDestination == replyDestination,
            onClick = { },
            icon = { }
        )
    }
}
Material3Snippets.kt

<ph type="x-smartling-placeholder">

</ph>

Wenn du beide als Standardmotiv verwenden möchtest, kannst du eine umfassende Nutzererfahrung bieten. Gerätegrößen.

NavigationDrawer wird für Tablets der mittleren bis großen Größe verwendet, auf denen genügend Platz, um Details anzuzeigen. Sie können sowohl PermanentNavigationDrawer als auch ModalNavigationDrawer zusammen mit NavigationRail.

PermanentNavigationDrawer(modifier = Modifier.fillMaxHeight(), drawerContent = {
    Destinations.entries.forEach { replyDestination ->
        NavigationRailItem(
            selected = selectedDestination == replyDestination,
            onClick = { },
            icon = { },
            label = { }
        )
    }
}) {
}
Material3Snippets.kt

<ph type="x-smartling-placeholder">

</ph>

Navigationsoptionen verbessern die User Experience, Ergonomie und Erreichbarkeit. Weitere Informationen zu den Navigationskomponenten von Material findest du in der Adaptives Codelab erstellen

Design einer Komponente anpassen

M3 fördert Personalisierung und Flexibilität. Alle Komponenten haben Standardeinstellungen die auf sie angewendet wurden, aber flexible APIs zur Verfügung stellen, um ihre Farben anzupassen, erforderlich.

Die meisten Komponenten, wie Karten und Schaltflächen, stellen eine Standardfarbe für die Objektbeleuchtung bereit. und Höhenoberflächen, die Sie ändern können, um Ihre Komponente anzupassen:

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 System-UI Android 12 und höher. Zwei wichtige Bereiche, in denen es Änderungen gibt, sind Wellen und Overscroll verwenden. Für die Implementierung dieser Änderungen ist kein zusätzlicher Aufwand erforderlich.

Welle

Ripple verwendet jetzt ein dezentes Funkeln, um Oberflächen zu beleuchten, wenn es gedrückt wird. Compose Material Ripple nutzt die Plattform „RippleDrawable“ im Hintergrund auf Das Funkeln ist ab Android 12 für alle Materialien Komponenten.

<ph type="x-smartling-placeholder">

</ph>

Overscroll

Beim Overscroll wird jetzt ein Stretch-Effekt am Rand von scrollbaren Containern verwendet. Das gestreckte Overscroll ist in zusammensetzbaren Scrolling-Containern standardmäßig aktiviert. Beispiel: LazyColumn, LazyRow und LazyVerticalGrid – in Compose Foundation 1.1.0 und höher, unabhängig vom API-Level.

<ph type="x-smartling-placeholder">

</ph>

Bedienungshilfen

Die in Material-Komponenten integrierten Standards zur Barrierefreiheit dienen dazu, die Grundlage für inklusives Produktdesign. Die Leistungsfähigkeit Ihres Produkts zu verstehen Barrierefreiheit kann die Usability für alle Nutzenden verbessern, auch für diejenigen mit geringer Sehvermögen, Blindheit, Hörbeeinträchtigungen, kognitive Beeinträchtigungen, motorische Einschränkungen Beeinträchtigungen oder situativen Beeinträchtigungen (z. B. ein gebrochener Arm).

Farb-Bedienungshilfen

Dynamische Farben entsprechen den Standards für Barrierefreiheit im Hinblick auf Farbkontraste. Das System der Tonpaletten ist entscheidend, um jedes Farbschema barrierefrei zu machen. ist standardmäßig aktiviert.

Das Farbsystem des Materials liefert Standardtonwerte und -messungen, die um barrierefreie Kontrastverhältnisse zu erreichen.

<ph type="x-smartling-placeholder">

</ph>

Alle Material-Komponenten und dynamischen Designs verwenden bereits die oben genannten Farbrollen. aus einer Reihe von Farbpaletten, die im Sinne der Barrierefreiheit ausgewählt wurden Anforderungen. Wenn Sie jedoch Komponenten anpassen, Farbrollen und vermeiden Abweichungen.

Verwenden Sie den lokalen Container zusätzlich zum primären Container und dann den primären Container Primärcontainer. Dasselbe gilt für andere Akzent- und neutrale Farben, um den Nutzenden barrierefrei sind.

Die Verwendung eines tertiären Containers auf dem primären Container führt zu einer schlechten Schaltfläche „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

<ph type="x-smartling-placeholder">

</ph>

Typografie-Bedienungshilfen

Mit der M3-Skalierung werden die Erhöhung und die Werte des statischen Typs aktualisiert, um eine vereinfachte ein dynamisches Framework von Größenkategorien, die geräteübergreifend skaliert werden.

Zum Beispiel können in M3 der Option „Display (klein)“ verschiedene Werte zugewiesen werden, je nachdem, vom Kontext des Geräts abhängig, z. B. von einem Smartphone oder Tablet.

Großes Display

Material liefert Informationen zu adaptiven Layouts und faltbaren Geräten, damit deine Apps und die Ergonomie von Nutzenden mit großen Geräten verbessern.

Material bietet verschiedene Arten der Navigation, die dir dabei helfen, die die Nutzerfreundlichkeit auf großen Geräten verbessern.

Weitere Informationen zu den Qualitätsrichtlinien für Android-Apps für große Bildschirme und findest du in unserem Antwortbeispiel für adaptives und barrierefreies Design.

Weitere Informationen

Weitere Informationen zu Material Theming in Compose findest du in den folgenden Ressourcen:

Beispiel-Apps

• Antwort 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

Empfehlungen für dich

• Hinweis: Der Linktext wird angezeigt, wenn JavaScript deaktiviert ist.
• In Compose von Material 2 zu Material 3 migrieren
• Material Design 2 in Compose
• Benutzerdefinierte Designsysteme in Compose