Tema Material di Compose

Jetpack Compose menawarkan implementasi Desain Material, yaitu sistem desain komprehensif untuk membuat antarmuka digital. Komponen Desain Material (tombol, kartu, tombol akses, dan sebagainya) dibuat di atas Tema Material, yang merupakan cara sistematis untuk menyesuaikan Desain Material agar lebih mencerminkan merek produk Anda. Tema Material terdiri dari atribut warna,tipografi, dan bentuk. Saat Anda menyesuaikan atribut ini, perubahan otomatis tercermin dalam komponen yang digunakan untuk membuat aplikasi.

Jetpack Compose mengimplementasikan konsep ini dengan composable MaterialTheme:

MaterialTheme(
    colors = …,
    typography = …,
    shapes = …
) {
    // app content
}

Konfigurasikan parameter yang Anda teruskan ke MaterialTheme untuk tema aplikasi Anda.

Dua screenshot yang kontras. Yang pertama menggunakan gaya MaterialTheme default,
screenshot kedua menggunakan gaya yang dimodifikasi.

Gambar 1. Screenshot pertama menunjukkan aplikasi yang tidak mengonfigurasi MaterialTheme, sehingga akan menggunakan gaya default. Screenshot kedua menampilkan aplikasi yang meneruskan parameter ke MaterialTheme untuk menyesuaikan gaya.

Warna

Warna dimodelkan dalam Compose dengan class Color, yaitu sebuah class penyimpanan data sederhana.

val Red = Color(0xffff0000)
val Blue = Color(red = 0f, green = 0f, blue = 1f)

Meskipun Anda dapat mengaturnya sesuka hati (sebagai konstanta tingkat teratas, dalam singleton, atau ditentukan sebagai bagian integral), kami sangat menyarankan untuk menentukan warna dalam tema Anda dan mengambil warna dari sana. Pendekatan ini memungkinkan dukungan untuk tema gelap dan tema bertingkat.

Contoh palet warna tema

Gambar 2. Sistem warna Material.

Compose menyediakan class Colors untuk membuat model Sistem warna material. Colors menyediakan fungsi builder untuk membuat kumpulan warna terang atau gelap :

private val Yellow200 = Color(0xffffeb46)
private val Blue200 = Color(0xff91a4fc)
// ...

private val DarkColors = darkColors(
    primary = Yellow200,
    secondary = Blue200,
    // ...
)
private val LightColors = lightColors(
    primary = Yellow500,
    primaryVariant = Yellow400,
    secondary = Blue700,
    // ...
)

Setelah menentukan Colors, Anda dapat meneruskannya ke MaterialTheme:

MaterialTheme(
    colors = if (darkTheme) DarkColors else LightColors
) {
    // app content
}

Menggunakan warna tema

Anda dapat mengambil Colors yang disediakan untuk composable MaterialTheme dengan menggunakan MaterialTheme.colors.

Text(
    text = "Hello theming",
    color = MaterialTheme.colors.primary
)

Warna permukaan dan konten

Banyak komponen menerima sepasang warna dan warna konten:

Surface(
    color: Color = MaterialTheme.colors.surface,
    contentColor: Color = contentColorFor(color),
    // ...

TopAppBar(
    backgroundColor: Color = MaterialTheme.colors.primarySurface,
    contentColor: Color = contentColorFor(backgroundColor),
    // ...

Hal ini memungkinkan Anda untuk tidak hanya menetapkan warna komposisi, tetapi juga memberikan warna default untuk konten, composable yang ada di dalamnya. Banyak composable menggunakan warna konten ini secara default. Misalnya, Text mendasarkan warnanya pada warna konten induknya, dan Icon menggunakan warna tersebut untuk menetapkan warnanya.

Dua contoh banner yang sama, dengan warna yang berbeda

Gambar 3. Menetapkan warna latar belakang yang berbeda akan menghasilkan warna teks dan ikon yang berbeda.

Metode contentColorFor() mengambil warna "aktif" yang sesuai untuk setiap warna tema. Misalnya, jika Anda menyetelprimary warna latar belakang aktifSurface, fungsi ini akan disetelonPrimary sebagai warna konten. Jika menetapkan warna latar belakang non-tema, Anda juga harus menentukan warna konten yang sesuai. Gunakan LocalContentColor untuk mengambil warna konten pilihan untuk latar belakang saat ini, pada posisi tertentu dalam hierarki.

Alfa konten

Sering kali Anda ingin membedakan seberapa besar Anda menekankan konten untuk menyampaikan level nilai penting dan memberikan hierarki visual. Rekomendasi keterbacaan teks Desain Material menyarankan penggunaan berbagai tingkat opasitas untuk menyatakan level nilai penting yang berbeda.

Jetpack Compose menerapkan ini melalui LocalContentAlpha. Anda dapat menentukan alfa konten untuk hierarki denganmemberikan nilai untuk CompositionLocal. Composable bertingkat dapat menggunakan nilai ini untuk menerapkan perlakuan alfa ke kontennya. Misalnya, Text dan Icon secara default menggunakan kombinasi LocalContentColor yang disesuaikan untuk menggunakan LocalContentAlpha. Material menentukan beberapa nilai alfa standar (high, medium, disabled) yang dimodelkan berdasarkan objek ContentAlpha.

// By default, both Icon & Text use the combination of LocalContentColor &
// LocalContentAlpha. De-emphasize content by setting content alpha
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
    Text(/*...*/)
}
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.disabled) {
    Icon(/*...*/)
    Text(/*...*/)
}

Untuk mempelajari CompositionLocal lebih lanjut, lihat Data yang dicakup secara lokal dengan panduan CompositionLocal.

Screenshot judul artikel, menampilkan berbagai tingkat emphasis
teks

Gambar 4. Menerapkan berbagai tingkat emphasis pada teks untuk menyampaikan hierarki informasi secara visual. Baris pertama teks adalah judul dan berisi informasi paling penting, sehingga menggunakan ContentAlpha.high. Baris kedua berisi metadata yang kurang penting, sehingga menggunakan ContentAlpha.medium.

Tema gelap

Di Compose, Anda menerapkan tema terang dan gelap dengan menyediakan berbagai kumpulan Colors ke composable MaterialTheme:

@Composable
fun MyTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit
) {
    MaterialTheme(
        colors = if (darkTheme) DarkColors else LightColors,
        /*...*/
        content = content
    )
}

Dalam contoh ini, MaterialTheme dikemas dalam fungsi yang dapat dikomposisi, yang menerima parameter yang menentukan apakah akan menggunakan tema gelap atau tidak. Dalam hal ini, fungsi tersebut akan mendapatkan nilai default untuk darkTheme dengan membuat kueri setelan tema perangkat.

Anda dapat menggunakan kode seperti ini untuk memeriksa apakah Colors saat ini sedang terang atau gelap:

val isLightTheme = MaterialTheme.colors.isLight
Icon(
    painterResource(
        id = if (isLightTheme) {
          R.drawable.ic_sun_24dp
        } else {
          R.drawable.ic_moon_24dp
        }
    ),
    contentDescription = "Theme"
)

Overlay ketinggian

Pada Material, permukaan tema gelap dengan elevasi yang lebih tinggi menerima overlay elevasi, yang akan mencerahkan latar belakangnya. Semakin tinggi ketinggian permukaan (meningkatnya lebih dekat ke sumber cahaya tersirat), semakin terang permukaan tersebut.

Overlay ini diterapkan secara otomatis oleh composable Surface saat menggunakan warna gelap, dan untuk composable Material lainnya yang menggunakan permukaan:

Surface(
    elevation = 2.dp,
    color = MaterialTheme.colors.surface, // color will be adjusted for elevation
    /*...*/
) { /*...*/ }

Screenshot aplikasi, yang menunjukkan warna yang sedikit berbeda dan digunakan untuk elemen
pada tingkat elevasi yang berbeda

Gambar 5. Kartu dan navigasi bawah menggunakan warna surface sebagai latar belakangnya. Karena kartu dan navigasi bawah berada pada level elevasi yang berbeda di atas latar belakang, warnanya sedikit berbeda. Kartu lebih terang dari latar belakang dan navigasi bawah lebih terang daripada kartu.

Untuk skenario kustom yang tidak melibatkan Surface, gunakan LocalElevationOverlay, CompositionLocal yang berisi ElevationOverlay digunakan oleh komponen Surface:

// Elevation overlays
// Implemented in Surface (and any components that use it)
val color = MaterialTheme.colors.surface
val elevation = 4.dp
val overlaidColor = LocalElevationOverlay.current?.apply(
    color, elevation
)

Untuk menonaktifkan overlay ketinggian, berikan null di titik yang diinginkan dalam hierarki yang dapat dikomposisi:

MyTheme {
    CompositionLocalProvider(LocalElevationOverlay provides null) {
        // Content without elevation overlays
    }
}

Aksen warna terbatas

Material merekomendasikan penerapan aksen warna terbatas untuk tema gelap dengan lebih memilih penggunaan warna surface daripada warna primary pada sebagian besar kasus. Composable material seperti TopAppBar dan BottomNavigation menerapkan perilaku ini secara default.

Gambar 6. Tema gelap material dengan aksen warna terbatas. Panel aplikasi atas menggunakan warna utama dalam tema terang, dan warna permukaan dalam tema gelap.

Untuk skenario kustom, gunakan properti ekstensi primarySurface:

Surface(
    // Switches between primary in light theme and surface in dark theme
    color = MaterialTheme.colors.primarySurface,
    /*...*/
) { /*...*/ }

Tipografi

Material menentukan sistem jenis, yang mendorong Anda untuk menggunakan sejumlah kecil gaya dengan nama semantik.

Contoh beberapa jenis huruf yang berbeda dalam berbagai gaya

Gambar 7. Sistem jenis Material.

Compose menerapkan sistem jenis dengan class Typography, TextStyle, dan terkait font. Konstruktor Typography menawarkan default untuk setiap gaya sehingga Anda dapat menghilangkan gaya yang tidak ingin Anda sesuaikan:

val Rubik = FontFamily(
    Font(R.font.rubik_regular),
    Font(R.font.rubik_medium, FontWeight.W500),
    Font(R.font.rubik_bold, FontWeight.Bold)
)

val MyTypography = Typography(
    h1 = TextStyle(
        fontFamily = Rubik,
        fontWeight = FontWeight.W300,
        fontSize = 96.sp
    ),
    body1 = TextStyle(
        fontFamily = Rubik,
        fontWeight = FontWeight.W600,
        fontSize = 16.sp
    )
    /*...*/
)
MaterialTheme(typography = MyTypography, /*...*/)

Jika Anda ingin menggunakan jenis huruf yang sama, tentukan defaultFontFamily parameter dan hapus fontFamily dari setiap elemen TextStyle:

val typography = Typography(defaultFontFamily = Rubik)
MaterialTheme(typography = typography, /*...*/)

Menggunakan gaya teks

TextStyle diakses melalui MaterialTheme.typography. Ambil TextStyle seperti ini:

Text(
    text = "Subtitle2 styled",
    style = MaterialTheme.typography.subtitle2
)

Screenshot yang menunjukkan perpaduan berbagai jenis huruf untuk tujuan berbeda

Gambar 8. Menggunakan pilihan jenis huruf dan gaya untuk mengekspresikan merek Anda.

Bentuk

Material menetapkan sistem bentuk, yang memungkinkan Anda menentukan bentuk untuk komponen besar, sedang, dan kecil.

Menampilkan berbagai bentuk Desain Material

Gambar 9. Sistem bentuk Material.

Compose menerapkan sistem bentuk dengan class Shapes, yang memungkinkan Anda menentukan CornerBasedShape untuk masing-masing ukuran kategori:

val Shapes = Shapes(
    small = RoundedCornerShape(percent = 50),
    medium = RoundedCornerShape(0f),
    large = CutCornerShape(
        topStart = 16.dp,
        topEnd = 0.dp,
        bottomEnd = 0.dp,
        bottomStart = 16.dp
    )
)

MaterialTheme(shapes = Shapes, /*...*/)

Banyak komponen menggunakan bentuk ini secara default. Misalnya, Button, TextField, dan FloatingActionButton default ke kecil, AlertDialog default ke sedang, dan ModalDrawer default ke besar - lihat referensi skema bentuk untuk pemetaan lengkap.

Menggunakan bentuk

Shape diakses melalui MaterialTheme.shapes. Ambil Shape dengan kode seperti ini:

Surface(
    shape = MaterialTheme.shapes.medium, /*...*/
) {
    /*...*/
}

Screenshot aplikasi yang menggunakan bentuk Material untuk menyampaikan status elemen di dalamnya

Gambar 10. Menggunakan bentuk untuk mengekspresikan merek atau status.

Gaya default

Tidak ada konsep yang setara di Compose dari gaya default dari Tampilan Android. Anda dapat menyediakan fungsi serupa dengan membuat fungsi yang dapat dikomposisi 'overload' Anda sendiri yang menggabungkan komponen Material. Misalnya, untuk membuat gaya tombol, letakkan tombol dalam fungsi Anda sendiri yang dapat dikomposisi, langsung tetapkan parameter yang ingin Anda ubah, dan tampilkan yang lain sebagai parameter ke composable yang memuatnya.

@Composable
fun MyButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    content: @Composable RowScope.() -> Unit
) {
    Button(
        colors = ButtonDefaults.buttonColors(
            backgroundColor = MaterialTheme.colors.secondary
        ),
        onClick = onClick,
        modifier = modifier,
        content = content
    )
}

Overlay tema

Anda dapat mencapai overlay tema yang setara dari Tampilan Android di Compose, dengan menyarangkan komponen MaterialTheme. Karena MaterialTheme menetapkan warna, tipografi, dan bentuk ke nilai tema saat ini secara default, jika tema hanya menetapkan salah satu parameter tersebut, parameter lainnya akan mempertahankan nilai defaultnya.

Saat memigrasikan layar berbasis View ke Compose, perhatikan penggunaan atribut android:theme. Sepertinya Anda memerlukan MaterialTheme baru di bagian pohon UI Compose.

Di sampel Owl, layar detail menggunakan PinkTheme untuk sebagian besar layar, lalu BlueTheme untuk bagian terkait. Lihat screenshot dan kode di bawah.

Gambar 11. Tema bertingkat dalam contoh Owl.

@Composable
fun DetailsScreen(/* ... */) {
    PinkTheme {
        // other content
        RelatedSection()
    }
}

@Composable
fun RelatedSection(/* ... */) {
    BlueTheme {
        // content
    }
}

Status komponen

Komponen material yang dapat berinteraksi (diklik, dialihkan, dsb.) dapat berada dalam status visual yang berbeda. Status mencakup diaktifkan, dinonaktifkan, ditekan, dll.

Composable sering memiliki parameter enabled. Menyetelnya ke false akan mencegah interaksi, dan mengubah properti seperti warna dan ketinggian untuk menyampaikan status komponen secara visual.

Gambar 12. Tombol dengan enabled = true (kiri) dan enabled = false (kanan).

Pada umumnya, Anda dapat menggunakan nilai default untuk nilai seperti warna dan ketinggian. Jika Anda ingin mengonfigurasi nilai yang digunakan dalam status berbeda, tersedia class dan fungsi praktis. Lihat contoh tombol di bawah ini:

Button(
    onClick = { /* ... */ },
    enabled = true,
    // Custom colors for different states
    colors = ButtonDefaults.buttonColors(
        backgroundColor = MaterialTheme.colors.secondary,
        disabledBackgroundColor = MaterialTheme.colors.onBackground
            .copy(alpha = 0.2f)
            .compositeOver(MaterialTheme.colors.background)
        // Also contentColor and disabledContentColor
    ),
    // Custom elevation for different states
    elevation = ButtonDefaults.elevation(
        defaultElevation = 8.dp,
        disabledElevation = 2.dp,
        // Also pressedElevation
    )
) { /* ... */ }

Gambar 13. Tombol dengan enabled = true (kiri) dan enabled = false (kanan), dengan nilai warna dan ketinggian yang disesuaikan.

Ripples

Komponen Material menggunakan ripple untuk menunjukkan bahwa mereka sedang berinteraksi. Jika Anda menggunakanMaterialTheme dalam hierarki, jenis Ripple akan digunakan sebagai defaultIndication di dalam pengubah seperti clickable dan indication data.

Dalam sebagian besar kasus, Anda dapat menggunakan Ripple default. Jika ingin mengonfigurasi tampilannya, Anda dapat menggunakan RippleTheme untuk mengubah properti seperti warna dan alfa.

Anda dapat memperluas RippleTheme dan memanfaatkan fungsi utilitas defaultRippleColor dan defaultRippleAlpha. Kemudian, Anda dapat memberikan tema ripple kustom dalam hierarki menggunakan LocalRippleTheme:

@Composable
fun MyApp() {
  MaterialTheme {
    CompositionLocalProvider(
      LocalRippleTheme provides SecondaryRippleTheme
    ) {
      // App content
    }
  }
}

@Immutable
private object SecondaryRippleTheme : RippleTheme {
  @Composable
  override fun defaultColor() = RippleTheme.defaultRippleColor(
    contentColor = MaterialTheme.colors.secondary,
    lightTheme = MaterialTheme.colors.isLight
  )

  @Composable
  override fun rippleAlpha() = RippleTheme.defaultRippleAlpha(
    contentColor = MaterialTheme.colors.secondary,
    lightTheme = MaterialTheme.colors.isLight
  )
}

alt_text

Gambar 14. Tombol dengan nilai ripple berbeda yang disediakan melalui RippleTheme.

Desain Material 3 dan Material You

Jetpack Compose menawarkan implementasi Desain Material 3, evolusi berikutnya dari Desain Material. Material 3 menyertakan tema dan komponen yang diperbarui serta fitur personalisasi Material You seperti warna dinamis, dan didesain agar kohesif dengan gaya visual dan sistem UI Android 12 yang baru.

Mulailah dengan menambahkan dependensi Compose Material 3 yang baru ke file build.gradle:

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

Tema M3 berisi nilai skema warna dan tipografi yang akan segera diperbarui dengan bentuk. Saat Anda menyesuaikan nilai ini, perubahan otomatis tercermin dalam komponen M3 yang digunakan untuk membuat aplikasi.

Jetpack Compose mengimplementasikan konsep ini dengan composable MaterialTheme M3 yang baru:

MaterialTheme(
    colorScheme = …,
    typography = …
    // Updates to shapes coming soon
) {
    // M3 app content
}

Konfigurasikan parameter yang Anda teruskan ke MaterialTheme M3 untuk tema aplikasi Anda.

Gambar 15. Dua screenshot pertama menampilkan aplikasi yang tidak mengonfigurasi MaterialTheme M3 sehingga menggunakan gaya default. Dua screenshot kedua menampilkan aplikasi yang meneruskan parameter ke MaterialTheme untuk menyesuaikan gaya.

Skema warna

Desain Material 3 memisahkan warna menjadi "slot" warna yang dinamai — seperti 'primer', 'latar belakang', dan 'error' — yang digunakan oleh komponen Material 3. Slot ini bersama-sama membentuk skema warna. Nilai warna yang digunakan oleh setiap slot diambil dari sekumpulan palet tonal, yang dipilih untuk memenuhi persyaratan aksesibilitas (misalnya, slot 'utama dijamin akan kontras dengan slot 'di utama’). Skema warna menampilkan warna dasar default baru untuk tema terang dan gelap.

Gambar 16. Palet tonal dan skema warna Material 3 dengan nilai warna dasar.

Compose menyediakan class ColorScheme untuk memodelkan skema warna Material 3. ColorScheme menyediakan fungsi builder untuk membuat skema warna terang atau gelap:

private val Blue40 = Color(0xff1e40ff​​)
private val DarkBlue40 = Color(0xff3e41f4)
private val Yellow40 = Color(0xff7d5700)
// Remaining colors from tonal palettes

private val LightColorScheme = lightColorScheme(
    primary = Blue40,
    secondary = DarkBlue40,
    tertiary = Yellow40,
    // error, primaryContainer, onSecondary, etc.
)
private val DarkColorScheme = darkColorScheme(
    primary = Blue80,
    secondary = DarkBlue80,
    tertiary = Yellow80,
    // error, primaryContainer, onSecondary, etc.
)

Setelah menentukan ColorScheme Anda dapat meneruskannya ke MaterialTheme M3:

val darkTheme = isSystemInDarkTheme()
MaterialTheme(
    colorScheme = if (darkTheme) DarkColorScheme else LightColorScheme
) {
    // M3 app content
}

Membuat skema warna

Meskipun Anda dapat membuat ColorScheme kustom secara manual, akan jauh lebih mudah untuk membuatnya menggunakan warna sumber dari merek. Alat Builder Tema Material memungkinkan Anda melakukannya, dan jika ingin, mengekspor kode tema Compose.

Gambar 17. Palet warna dan skema warna Material 3, dengan nilai warna kustom, yang dihasilkan oleh alat Builder Tema Material.

Skema warna dinamis

Warna dinamis adalah bagian penting dari Material You, tempat algoritme memperoleh warna kustom dari wallpaper pengguna untuk diterapkan ke aplikasi dan UI sistemnya. Palet warna ini digunakan sebagai titik awal untuk menghasilkan skema warna terang dan gelap yang lengkap.

Warna dinamis tersedia di Android 12 dan yang lebih baru. Jika warna dinamis tersedia, Anda dapat menyiapkan ColorScheme dinamis. Jika tidak, Anda dapat beralih kembali ke penggunaan ColorScheme kustom terang atau gelap.

ColorScheme menyediakan fungsi builder untuk membuat skema warna terang atau gelap dinamis:

// Dynamic color is available on Android 12+
val dynamicColor = Build.VERSION.SDK_INT >= Build.VERSION_CODES.S
val colorScheme = when {
    dynamicColor && darkTheme -> dynamicDarkColorScheme(LocalContext.current)
    dynamicColor && !darkTheme -> dynamicLightColorScheme(LocalContext.current)
    darkTheme -> DarkColorScheme
    else -> LightColorScheme
}

Gambar 18. Dua screenshot pertama menampilkan aplikasi yang menggunakan ColorScheme dinamis berdasarkan wallpaper merah. Dua screenshot kedua menunjukkan aplikasi yang menggunakan ColorScheme dinamis berdasarkan wallpaper biru.

Menggunakan warna skema warna

Anda dapat mengambil ColorScheme yang disediakan untuk composable MaterialTheme M3 dengan menggunakan MaterialTheme.colorScheme:

Text(
    text = "Hello M3 theming",
    color = MaterialTheme.colorScheme.tertiary
)

Tipografi

Desain Material 3 menentukan skala jenis, seperti gaya teks yang telah diadaptasi dari Desain Material 2. Penamaan dan pengelompokannya telah disederhanakan untuk: tampilan, judul, judul, isi, dan label, dengan setiap ukuran besar, sedang, dan kecil.

Gambar 19. Skala jenis Material 3 vs. skala jenis Material 2.

Compose menyediakan class Typography M3 yang baru — bersama dengan class TextStyle dan class terkait font — untuk memodelkan skala jenis Material 3:

val KarlaFontFamily = FontFamily(
    Font(R.font.karla_regular),
    Font(R.font.karla_bold, FontWeight.Bold)
)

val AppTypography = Typography(
    bodyLarge = TextStyle(
        fontFamily = KarlaFontFamily,
        fontWeight = FontWeight.Normal,
        fontSize = 16.sp,
        lineHeight = 24.sp,
        letterSpacing = 0.15.sp
    ),
    // titleMedium, labelSmall, etc.
)

Setelah menentukan Typography, Anda dapat meneruskannya ke MaterialTheme M3:

MaterialTheme(
    typography = AppTypography
) {
    // M3 app content
}

Menggunakan gaya teks

Anda dapat mengambil Typography yang disediakan untuk composable MaterialTheme M3 dengan menggunakan MaterialTheme.typography:

Text(
    text = "Hello M3 theming",
    style = MaterialTheme.typography.bodyLarge
)

Elevasi

Material 3 mewakili elevasi terutama menggunakan overlay warna tonal. Ini adalah cara baru untuk membedakan container dan permukaan satu sama lain — meningkatkan elevasi tonal menggunakan warna yang lebih menarik — selain bayangan.

Overlay elevasi dalam tema gelap juga berubah menjadi overlay warna tonal di Material 3.

Warna overlay berasal dari slot warna utama.

Gambar 20. Elevasi Material 3 vs. elevasi Material 2, baik dalam tema terang maupun gelap.

M3 Surface — composable pendukung di balik sebagian besar komponen M3 — mencakup dukungan untuk elevasi tonal dan bayangan:

Surface(
    tonalElevation = 16.dp,
    shadowElevation = 16.dp
) {
    // Surface content
}

UI sistem

Beberapa aspek Material You berasal dari gaya visual dan UI sistem Android 12 yang baru. Dua area utama yang mengalami perubahan adalah ripple dan overscroll. Tidak diperlukan pekerjaan tambahan untuk menerapkan perubahan ini.

Ripple

Ripple kini menggunakan kilauan halus untuk menerangi permukaan saat ditekan. Compose Material Ripple menggunakan platform RippleDrawable di balik layar di Android agar sparkle ripple dapat tersedia di Android 12 dan yang lebih baru untuk semua komponen Material.

Gambar 21. Ripple Android 12 vs. ripple pra-Android 12.

Overscroll

Sekarang overscroll menggunakan efek regangan di tepi container scroll. Overscroll regangan aktif secara default dalam composable container scroll — misalnya, LazyColumn, LazyRow, dan LazyVerticalGrid — dalam Compose Foundation 1.1.0 dan yang lebih baru, apa pun level API.

Gambar 22. Overscroll regangan.

Pelajari lebih lanjut

Untuk mempelajari Tema Material dalam Compose lebih lanjut, lihat referensi tambahan berikut.

Codelab

Video