Material Design 3 w sekcji Utwórz

Jetpack Compose oferuje implementację Material You i Material 3 Expressive, czyli kolejną ewolucję Material Design. M3 Expressive to rozszerzenie Material Design 3, które obejmuje oparte na badaniach aktualizacje dotyczące motywów, komponentów, ruchu, typografii i innych elementów. Wszystkie te zmiany mają pomóc Ci tworzyć atrakcyjne i pożądane produkty, które pokochają użytkownicy. Obsługuje też funkcje personalizacji Material You, takie jak dynamiczne kolory. M3 Expressive uzupełnia styl wizualny Androida 16 i interfejs systemu.

Uwaga: terminy „Material Design 3”, „Material 3” i „M3” są wymienne.

Poniżej pokazujemy implementację Material Design 3 na przykładzie przykładowej aplikacji Reply. Przykładowa aplikacja Reply jest w całości oparta na Material Design 3.

Rysunek 1. Przykładowa aplikacja do odpowiadania z użyciem Material Design 3

Zależność

Aby zacząć używać Material 3 w aplikacji napisanej w Compose, dodaj zależność Compose Material 3 do plików build.gradle:

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

Po dodaniu zależności możesz zacząć dodawać do aplikacji systemy Material Design, w tym kolor, typografię i kształt.

Eksperymentalne interfejsy API

Niektóre interfejsy API M3 są uznawane za eksperymentalne. W takich przypadkach musisz wyrazić zgodę na poziomie funkcji lub pliku, używając adnotacji ExperimentalMaterial3Api:

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

Material Theming

Motyw M3 zawiera te podsystemy: schemat kolorów, typografia i kształty. Gdy dostosujesz te wartości, zmiany zostaną automatycznie odzwierciedlone w komponentach M3, których używasz do tworzenia aplikacji.

Rysunek 2. Podsystemy Material Design: kolor, typografia i kształty

Jetpack Compose implementuje te koncepcje za pomocą komponentu M3 MaterialTheme:

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

Aby zastosować motyw do treści aplikacji, zdefiniuj schemat kolorów, typografię i kształty charakterystyczne dla Twojej aplikacji.

Schemat kolorów

Podstawą schematu kolorów jest zestaw 5 kluczowych kolorów. Każdy z tych kolorów jest powiązany z paletą 13 odcieni, które są używane przez komponenty Material 3. Oto na przykład schemat kolorów jasnego motywu w przypadku Odpowiedzi:

Rysunek 3. Jasny schemat kolorów przykładowej aplikacji do odpowiadania

Dowiedz się więcej o schemacie kolorów i rolach kolorów.

Generowanie schematów kolorów

Możesz utworzyć niestandardowy ColorScheme ręcznie, ale często łatwiej jest wygenerować go na podstawie kolorów źródłowych marki. Możesz to zrobić za pomocą narzędzia Material Theme Builder, a także opcjonalnie wyeksportować kod motywu Compose. Wygenerowane zostaną te pliki:

• Color.kt zawiera kolory motywu ze wszystkimi rolami zdefiniowanymi dla kolorów motywu jasnego i ciemnego.

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 zawiera konfigurację jasnego i ciemnego schematu kolorów oraz motywu aplikacji.

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

Aby obsługiwać motywy jasne i ciemne, użyj isSystemInDarkTheme(). Na podstawie ustawień systemu określ, którego schematu kolorów używać: jasnego czy ciemnego.

Dynamiczne schematy kolorów

Dynamiczne kolory to kluczowy element Material You, w którym algorytm wyodrębnia niestandardowe kolory z tapety użytkownika, aby zastosować je w aplikacjach i interfejsie systemu. Ta paleta kolorów jest używana jako punkt wyjścia do generowania jasnych i ciemnych schematów kolorów.

Rysunek 4. Dynamiczne motywy w przykładowej aplikacji do odpowiadania na wiadomości – motyw dopasowany do tapety (po lewej) i domyślny motyw aplikacji (po prawej)

Dynamiczne kolory są dostępne na Androidzie 12 i nowszych. Jeśli dynamiczny kolor jest dostępny, możesz skonfigurować dynamiczny ColorScheme. W przeciwnym razie użyj niestandardowego jasnego lub ciemnego ColorScheme.

ColorScheme udostępnia funkcje do tworzenia dynamicznego schematu kolorów jasnego lub ciemnego:

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

Użycie kolorów

Kolory motywu Material możesz uzyskać w aplikacji za pomocą tego kodu:MaterialTheme.colorScheme

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

Każda rola koloru może być używana w różnych miejscach w zależności od stanu, widoczności i znaczenia komponentu.

• Kolor podstawowy jest używany w przypadku głównych komponentów, takich jak wyróżnione przyciski, stany aktywne i odcień podniesionych powierzchni.
• Drugorzędny kolor kluczowy jest używany w mniej widocznych komponentach interfejsu, takich jak tagi filtrów, i zwiększa możliwości wyrażania koloru.
• Trzeciorzędowy kolor kluczowy służy do określania ról kontrastujących akcentów, które mogą być używane do równoważenia kolorów podstawowych i drugorzędnych lub do zwracania większej uwagi na element.

Projekt przykładowej aplikacji Reply wykorzystuje kolor on-primary-container na kolorze primary-container, aby podkreślić wybrany element.

Rysunek 5. Główny kontener i pola tekstowe z kolorem on-primary-container.

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

W panelu nawigacji Odpowiedz możesz zobaczyć, jak drugorzędne i trzeciorzędne kolory kontenera są używane w kontraście, aby podkreślić i wyróżnić elementy.

Rysunek 6. Połączenie kontenera trzeciorzędnego i koloru tekstu na nim w przypadku pływającego przycisku polecenia.

Typografia

Material Design 3 definiuje skalę typograficzną, w tym style tekstu zaadaptowane z Material Design 2. Nazewnictwo i grupowanie zostały uproszczone do: wyświetlanie, nagłówek, tytuł, treść i etykieta, z rozmiarami dużym, średnim i małym dla każdego z nich.

Rysunek 7. Domyślna skala typograficzna w Material Design 3

M3	Domyślny rozmiar czcionki i wysokość wiersza
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

Uwaga: w przeciwieństwie do klasy M2 Typography klasa M3 Typography nie zawiera obecnie parametru defaultFontFamily. Zamiast tego musisz użyć parametru fontFamily w każdym z poszczególnych TextStyles.

Określanie typografii

Compose udostępnia klasę M3 Typography wraz z dotychczasowymi klasami TextStyle i związanymi z czcionkami, aby modelować skalę typów Material 3. Konstruktor Typography oferuje domyślne ustawienia każdego stylu, więc możesz pominąć wszystkie parametry, których nie chcesz dostosowywać:

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

Rysunek 8. Body large, body medium i label medium do różnych zastosowań typograficznych.

Twój produkt prawdopodobnie nie będzie potrzebować wszystkich 15 domyślnych stylów z skali typograficznej Material Design. W tym przykładzie wybrano 5 rozmiarów, a pozostałe pominięto.

Możesz dostosować typografię, zmieniając wartości domyślne właściwości TextStyle i związanych z czcionką, takich jak fontFamily i 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

Po zdefiniowaniu Typography przekaż ją do MaterialTheme M3:

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

Używanie stylów tekstu

Możesz pobrać typografię przekazaną do elementu kompozycyjnego MaterialTheme M3 za pomocą funkcji MaterialTheme.typography:

Text(
    text = "Hello M3 theming",
    style = MaterialTheme.typography.titleLarge
)
Text(
    text = "you are learning typography",
    style = MaterialTheme.typography.bodyMedium
)
Material3Snippets.kt

Więcej informacji o wytycznych Material znajdziesz w artykule Stosowanie typografii.

Kształty

Powierzchnie materiałów mogą być wyświetlane w różnych kształtach. Kształty przyciągają uwagę, identyfikują komponenty, informują o stanie i wyrażają markę.

Skala kształtu określa styl rogów kontenera, oferując zakres zaokrągleń od kwadratowych do całkowicie okrągłych.

Definiowanie kształtów

Biblioteka Compose udostępnia klasę M3 Shapes z rozszerzonymi parametrami, aby obsługiwać nowe kształty M3. Skala kształtów M3 jest bardziej podobna do skali typograficznej, dzięki czemu umożliwia ekspresyjny zakres kształtów w interfejsie.

Dostępne są różne rozmiary kształtów:

• Bardzo mały
• Mały
• średni,
• Duży
• Bardzo duży

Domyślnie każdy kształt ma wartość domyślną, ale możesz ją zastąpić:

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

Gdy określisz Shapes, możesz przekazać ją do MaterialTheme M3:

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

Używanie kształtów

Skalę kształtu możesz dostosować dla wszystkich komponentów w MaterialTheme lub dla każdego z nich osobno.

Zastosuj średni i duży kształt z wartościami domyślnymi:

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

Rysunek 9. Średni kształt karty i duży kształt pływającego przycisku polecenia w przykładowej aplikacji do odpowiadania

W Compose są jeszcze 2 inne kształty: RectangleShape i CircleShape. Prostokąt nie ma zaokrąglonych krawędzi, a okrąg ma w pełni zaokrąglone krawędzie:

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

Poniższe przykłady pokazują niektóre komponenty z zastosowanymi domyślnymi wartościami kształtu:

Rysunek 10. Domyślne wartości kształtów dla wszystkich komponentów Material 3.

Więcej informacji o wytycznych Material znajdziesz w artykule Stosowanie kształtu.

Wyróżnienie

W M3 nacisk jest kładziony na warianty kolorów i ich kombinacje z kolorem tekstu. W M3 możesz wyróżnić elementy interfejsu na 2 sposoby:

• Używaj kolorów powierzchni, wariantu powierzchni i tła wraz z kolorami na powierzchni i na wariantach powierzchni z rozszerzonego systemu kolorów M3. Na przykład koloru surface można używać z kolorem on-surface-variant, a koloru surface-variant z kolorem on-surface, aby zapewnić różne poziomy wyróżnienia.

Rysunek 11. Używanie neutralnych kombinacji kolorów w celu podkreślenia.

• Używanie różnych grubości czcionki w tekście. Jak widać powyżej, możesz podać niestandardowe wagi w naszej skali typów, aby uzyskać różne efekty.

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

Uwaga: w przypadku stanów wyłączonych w M3 nadal można używać kolorów „on-x” (gdzie x może być kolorem podstawowym, dodatkowym, powierzchni itp.) z wartościami alfa.

Wysokość

Material 3 reprezentuje wysokość głównie za pomocą nakładek kolorystycznych. Jest to nowy sposób na odróżnianie od siebie kontenerów i powierzchni – zwiększenie tonalnego podniesienia powoduje użycie bardziej wyrazistego odcienia – oprócz cieni.

Rysunek 12. Wysokość tonalna z wysokością cieniaE

Nakładki wysokości w ciemnych motywach również zostały zmienione na nakładki kolorów tonalnych w Material 3. Kolor nakładki pochodzi z miejsca na kolor podstawowy.

Rysunek 13. Wysokość cienia a wysokość tonalna w Material Design 3

Komponent M3 Surface, który jest podstawą większości komponentów M3, obsługuje zarówno tonalne, jak i cieniowe podniesienie:

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

Komponenty materiałowe

Material Design zawiera bogaty zestaw komponentów Material (takich jak przyciski, tagi, karty czy pasek nawigacyjny), które są zgodne z motywami Material i pomagają tworzyć atrakcyjne aplikacje w stylu Material Design. Możesz od razu zacząć korzystać z komponentów z właściwościami domyślnymi.

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

M3 udostępnia wiele wersji tych samych komponentów, które można wykorzystywać w różnych rolach w zależności od nacisku i uwagi.

Rysunek 14. Wyróżnienie przycisku, od przycisku FAB, głównego po przycisk tekstowy

• Rozwinięty pływający przycisk polecenia dla działania o najwyższym priorytecie:

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

• Wypełniony przycisk dla działania o wysokim priorytecie:

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

• Przycisk tekstowy do działania o niskim priorytecie:

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

Dowiedz się więcej o przyciskach Material i innych komponentach. Material 3 udostępnia szeroką gamę pakietów komponentów, takich jak przyciski, paski aplikacji i komponenty nawigacyjne, które są specjalnie zaprojektowane do różnych zastosowań i rozmiarów ekranu.

Komponenty nawigacji

Material udostępnia też kilka komponentów nawigacyjnych, które pomagają w implementacji nawigacji w zależności od różnych rozmiarów i stanów ekranu.

NavigationBar jest używany w przypadku urządzeń kompaktowych, gdy chcesz kierować reklamy na maksymalnie 5 miejsc docelowych:

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

NavigationRail – w przypadku małych i średnich tabletów lub telefonów w trybie poziomym. Zapewnia użytkownikom ergonomię i poprawia komfort korzystania z tych urządzeń.

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

Rysunek 15. Prezentacja odpowiedzi: BottomNavigationBar (po lewej) i NavigationRail (po prawej)

Odpowiadaj w domyślnym motywie, aby zapewnić doskonałe wrażenia użytkownikom urządzeń o różnych rozmiarach.

NavigationDrawer – używany w przypadku średnich i dużych tabletów, na których jest wystarczająco dużo miejsca, aby wyświetlać szczegóły. Możesz użyć właściwości PermanentNavigationDrawer lub ModalNavigationDrawer wraz z właściwością NavigationRail.

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

Rysunek 16. Prezentacja odpowiedzi w stałym panelu nawigacji

Opcje nawigacji zwiększają wygodę użytkowników, ergonomię i dostępność. Więcej informacji o komponentach nawigacji Material znajdziesz w samouczku Compose adaptive.

Dostosowywanie motywu komponentu

M3 zachęca do personalizacji i elastyczności. Wszystkie komponenty mają domyślne kolory, ale udostępniają elastyczne interfejsy API, które umożliwiają dostosowanie kolorów w razie potrzeby.

Większość komponentów, takich jak karty i przyciski, udostępnia domyślny obiekt z interfejsami koloru i wysokości, które można modyfikować w celu dostosowania komponentu:

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

Więcej informacji o dostosowywaniu Material 3

interfejs systemu

Niektóre aspekty Material You pochodzą z nowego stylu wizualnego i interfejsu systemu na Androidzie 12 i nowszych. Dwa kluczowe obszary, w których wprowadzono zmiany, to efekt falowania i przewijanie poza krawędź. Aby wdrożyć te zmiany, nie musisz podejmować żadnych dodatkowych działań.

Marszczenie

Po naciśnięciu efekt fali rozświetla powierzchnie subtelnym blaskiem. Compose Material Ripple używa na Androidzie platformy RippleDrawable, więc efekt rozbłysku jest dostępny na Androidzie 12 i nowszym we wszystkich komponentach Material.

Rysunek 17. Ripple in M2 versus M3

Overscroll

Przewijanie poza krawędź kontenerów przewijania wykorzystuje teraz efekt rozciągania. Efekt rozciągania przy przewijaniu jest domyślnie włączony w komponentach kompozycyjnych kontenera przewijania, np. LazyColumn, LazyRow i LazyVerticalGrid, w Compose Foundation w wersji 1.1.0 i nowszej, niezależnie od poziomu interfejsu API.

Rysunek 18. Przewijanie z efektem rozciągania na krawędzi kontenera

Ułatwienia dostępu

Standardy ułatwień dostępu wbudowane w komponenty Material zostały zaprojektowane tak, aby stanowić podstawę dla projektowania produktów z myślą o wszystkich użytkownikach. Zrozumienie, jak Twój produkt jest dostępny, może zwiększyć jego użyteczność dla wszystkich użytkowników, w tym osób niedowidzących, niewidomych, niedosłyszących, z zaburzeniami funkcji poznawczych, z niepełnosprawnością ruchową lub z niepełnosprawnością sytuacyjną (np. ze złamaną ręką).

Ułatwienia dostępu dotyczące kolorów

Dynamiczne kolory są zgodne ze standardami ułatwień dostępu dotyczącymi kontrastu kolorów. System palet tonalnych ma kluczowe znaczenie dla zapewnienia domyślnej dostępności każdego schematu kolorów.

System kolorów Material Design udostępnia standardowe wartości odcieni i pomiary, które można wykorzystać do uzyskania kontrastu spełniającego wymagania dotyczące dostępności.

Rysunek 19. Przykładowa aplikacja do odpowiadania: palety tonalne podstawowe, dodatkowe i trzeciorzędowe (od góry do dołu)

Wszystkie komponenty Material i dynamiczne motywy korzystają już z powyższych ról kolorów z zestawu palet tonalnych, które zostały wybrane pod kątem zgodności z wymaganiami dotyczącymi ułatwień dostępu. Jeśli jednak dostosowujesz komponenty, pamiętaj, aby używać odpowiednich ról kolorów i unikać niezgodności.

Używaj koloru „on-primary” na kolorze „primary”, a koloru „on-primary-container” na kolorze „primary-container”. To samo dotyczy innych kolorów akcentujących i neutralnych, aby zapewnić użytkownikowi kontrast ułatwiający dostępność.

Użycie kontenera trzeciego poziomu na kontenerze podstawowym daje użytkownikowi przycisk o słabym kontraście:

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

Rysunek 20. Wystarczający kontrast (po lewej) i niewystarczający kontrast (po prawej)

Ułatwienia dostępu dotyczące typografii

Skala typu M3 aktualizuje statyczną rampę typu i wartości, aby zapewnić uproszczone, ale dynamiczne ramy kategorii rozmiarów, które można skalować na różnych urządzeniach.

Na przykład w M3 element Display Small może mieć różne wartości w zależności od kontekstu urządzenia, np. telefonu lub tabletu.

Duże ekrany

Material zawiera wskazówki dotyczące układów adaptacyjnych i urządzeń składanych, które pomogą Ci zwiększyć dostępność aplikacji i poprawić ergonomię użytkowników korzystających z dużych urządzeń.

Material udostępnia różne rodzaje nawigacji, które pomagają zapewnić większy komfort korzystania z aplikacji na dużych urządzeniach.

Więcej informacji o wytycznych dotyczących jakości aplikacji na Androida na duże ekrany znajdziesz w przykładzie aplikacji Odpowiedz, która ma adaptacyjny i dostępny interfejs.

Więcej informacji

Więcej informacji o motywach Material w Compose znajdziesz w tych materiałach:

Przykładowe aplikacje

• Przykładowa aplikacja Reply M3

Dokumenty

• Migracja z Material Design 2 do Material Design 3 w Compose
• Wskazówki dotyczące Material Design

Dokumentacja API i kod źródłowy

• Dokumentacja Compose Material 3 API
• Przykłady Compose Material 3 w kodzie źródłowym

Filmy

• Material You w Jetpack Compose