Tetap teratur dengan koleksi
Simpan dan kategorikan konten berdasarkan preferensi Anda.
Carousel menampilkan daftar item yang dapat di-scroll yang beradaptasi secara dinamis berdasarkan
ukuran jendela. Gunakan carousel untuk menampilkan koleksi konten terkait.
Item carousel menekankan visual, tetapi juga dapat berisi teks singkat yang menyesuaikan
ukuran item.
Ada empat tata letak carousel yang tersedia untuk menyesuaikan berbagai kasus penggunaan:
Multi-browse: Mencakup item dengan ukuran berbeda. Direkomendasikan untuk menjelajahi banyak item sekaligus, seperti foto.
Tidak Termuat: Berisi item yang berukuran tunggal dan mengalir melewati tepi
layar. Dapat disesuaikan untuk menampilkan lebih banyak teks atau UI lain di atas atau di bawah setiap item.
Hero: Menyoroti satu gambar besar untuk difokuskan dan memberikan intipan tentang apa yang akan datang dengan item kecil. Direkomendasikan untuk menyoroti konten yang ingin Anda tekankan, seperti thumbnail film atau acara TV.
Layar penuh: Menampilkan satu item besar layar penuh dalam satu waktu dan men-scroll
secara vertikal. Direkomendasikan untuk konten yang lebih tinggi daripada lebar.
Gambar 1. Jenis carousel tidak berisi (1) dan layar penuh (2).
Halaman ini menunjukkan cara menerapkan tata letak carousel multi-penjelajahan dan tidak tercakup. Lihat Panduan Carousel Material 3 untuk
mengetahui informasi selengkapnya tentang jenis tata letak.
state: Instance CarouselState yang mengelola indeks item saat ini dan
posisi scroll. Buat status ini menggunakan rememberCarouselState { itemCount },
dengan itemCount adalah jumlah total item dalam carousel.
itemSpacing: Menentukan jumlah ruang kosong antara item yang berdekatan dalam
carousel.
contentPadding: Menerapkan padding di sekitar area konten carousel. Gunakan
ini untuk menambahkan ruang sebelum item pertama atau setelah item terakhir, atau untuk memberikan
margin untuk item dalam area yang dapat di-scroll.
content: Fungsi composable yang menerima indeks bilangan bulat. Gunakan lambda ini untuk menentukan UI untuk setiap item di carousel berdasarkan indeksnya.
Composable ini berbeda dalam cara menentukan ukuran item:
itemWidth (untuk HorizontalUncontainedCarousel): Menentukan lebar yang tepat untuk setiap item dalam carousel yang tidak memiliki penampung.
preferredItemWidth (untuk HorizontalMultiBrowseCarousel): Menyarankan lebar ideal untuk item dalam carousel multi-penjelajahan, sehingga komponen dapat menampilkan beberapa item jika ruang memungkinkan.
Contoh: Korsel multi-penjelajahan
Cuplikan ini menerapkan carousel multi-penjelajahan:
Menentukan class data CarouselItem, yang menyusun data untuk setiap elemen dalam carousel.
Membuat dan mengingat List objek CarouselItem yang diisi dengan deskripsi dan resource gambar.
Menggunakan composable HorizontalMultiBrowseCarousel, yang dirancang untuk menampilkan beberapa item dalam carousel.
Status carousel diinisialisasi menggunakan rememberCarouselState, yang diberi jumlah total item.
Item memiliki preferredItemWidth (di sini, 186.dp), yang menunjukkan lebar optimal untuk setiap item. Carousel menggunakan nilai ini untuk menentukan jumlah item yang dapat muat di layar sekaligus.
Parameter itemSpacing menambahkan jarak kecil antar-item.
Lambda akhir HorizontalMultiBrowseCarousel melakukan iterasi melalui CarouselItems. Di setiap iterasi, item mengambil item pada indeks i dan merender composable Image untuknya.
Modifier.maskClip(MaterialTheme.shapes.extraLarge) menerapkan mask bentuk yang telah ditentukan sebelumnya ke setiap gambar, sehingga memberikan sudut yang membulat.
contentDescription memberikan deskripsi aksesibilitas untuk gambar.
Hasil
Gambar berikut menunjukkan hasil dari cuplikan sebelumnya:
Gambar 2. Carousel multi-penjelajahan, dengan item terakhir yang terpotong.
Contoh: Carousel tidak dibatasi
Cuplikan berikut mengimplementasikan carousel yang tidak memiliki penampung:
Composable HorizontalUncontainedCarousel membuat tata letak carousel.
Parameter itemWidth menetapkan lebar tetap untuk setiap item dalam carousel.
Hasil
Gambar berikut menunjukkan hasil dari cuplikan sebelumnya:
Gambar 3. Carousel yang tidak memiliki batas, dengan item terakhir di carousel tidak dipangkas.
Konten dan contoh kode di halaman ini tunduk kepada lisensi yang dijelaskan dalam Lisensi Konten. Java dan OpenJDK adalah merek dagang atau merek dagang terdaftar dari Oracle dan/atau afiliasinya.
Terakhir diperbarui pada 2025-08-28 UTC.
[[["Mudah dipahami","easyToUnderstand","thumb-up"],["Memecahkan masalah saya","solvedMyProblem","thumb-up"],["Lainnya","otherUp","thumb-up"]],[["Informasi yang saya butuhkan tidak ada","missingTheInformationINeed","thumb-down"],["Terlalu rumit/langkahnya terlalu banyak","tooComplicatedTooManySteps","thumb-down"],["Sudah usang","outOfDate","thumb-down"],["Masalah terjemahan","translationIssue","thumb-down"],["Masalah kode / contoh","samplesCodeIssue","thumb-down"],["Lainnya","otherDown","thumb-down"]],["Terakhir diperbarui pada 2025-08-28 UTC."],[],[],null,["A carousel displays a scrollable list of items that adapt dynamically based on\nwindow size. Use carousels to showcase a collection of related content.\nCarousel items emphasize visuals, but can also contain brief text that adapts to\nthe item size.\n\nThere are four carousel layouts available to suit different use cases:\n\n- **Multi-browse**: Includes differently sized items. Recommended for browsing many items at once, like photos.\n- **Uncontained**: Contains items that are a single size and flow past the edge of the screen. Can be customized to show more text or other UI above or below each item.\n- **Hero**: Highlights one large image to focus on and provides a peek of what's next with a small item. Recommended for spotlighting content that you want to emphasize, like movie or show thumbnails.\n- **Full-screen**: Shows one edge-to-edge large item at a time and scrolls vertically. Recommended for content that is taller than it is wide.\n\n**Figure 1.** Uncontained (1) and full-screen (2) carousel types.\n\nThis page shows you how to implement the multi-browse and uncontained carousel\nlayouts. See the [Carousel Material 3 guidelines](https://m3.material.io/components/carousel/overview) for\nmore information about the layout types.\n\nAPI surface\n\nTo implement multi-browse and uncontained carousels, use the\n[`HorizontalMultiBrowseCarousel`](/reference/kotlin/androidx/compose/material3/carousel/package-summary#HorizontalMultiBrowseCarousel(androidx.compose.material3.carousel.CarouselState,androidx.compose.ui.unit.Dp,androidx.compose.ui.Modifier,androidx.compose.ui.unit.Dp,androidx.compose.foundation.gestures.TargetedFlingBehavior,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.PaddingValues,kotlin.Function2)) and [`HorizontalUncontainedCarousel`](/reference/kotlin/androidx/compose/material3/carousel/package-summary#HorizontalUncontainedCarousel(androidx.compose.material3.carousel.CarouselState,androidx.compose.ui.unit.Dp,androidx.compose.ui.Modifier,androidx.compose.ui.unit.Dp,androidx.compose.foundation.gestures.TargetedFlingBehavior,androidx.compose.foundation.layout.PaddingValues,kotlin.Function2))\ncomposables. These composables share the following key parameters:\n\n- `state`: A `CarouselState` instance that manages the current item index and scroll position. Create this state using `rememberCarouselState { itemCount }`, where `itemCount` is the total number of items in the carousel.\n- `itemSpacing`: Defines the amount of empty space between adjacent items in the carousel.\n- `contentPadding`: Applies padding around the content area of the carousel. Use this to add space before the first item or after the last item, or to provide margins for the items within the scrollable region.\n- `content`: A composable function that receives an integer index. Use this lambda to define the UI for each item in the carousel based on its index.\n\nThese composables differ in how they specify item sizing:\n\n- `itemWidth` (for `HorizontalUncontainedCarousel`): Specifies the exact width for each item in an uncontained carousel.\n- `preferredItemWidth` (for `HorizontalMultiBrowseCarousel`): Suggests the ideal width for items in a multi-browse carousel, letting the component display multiple items if space permits.\n\nExample: Multi-browse carousel\n\nThis snippet implements a multi-browse carousel:\n\n\n```kotlin\n@Composable\nfun CarouselExample_MultiBrowse() {\n data class CarouselItem(\n val id: Int,\n @DrawableRes val imageResId: Int,\n val contentDescription: String\n )\n\n val items = remember {\n listOf(\n CarouselItem(0, R.drawable.cupcake, \"cupcake\"),\n CarouselItem(1, R.drawable.donut, \"donut\"),\n CarouselItem(2, R.drawable.eclair, \"eclair\"),\n CarouselItem(3, R.drawable.froyo, \"froyo\"),\n CarouselItem(4, R.drawable.gingerbread, \"gingerbread\"),\n )\n }\n\n HorizontalMultiBrowseCarousel(\n state = rememberCarouselState { items.count() },\n modifier = Modifier\n .fillMaxWidth()\n .wrapContentHeight()\n .padding(top = 16.dp, bottom = 16.dp),\n preferredItemWidth = 186.dp,\n itemSpacing = 8.dp,\n contentPadding = PaddingValues(horizontal = 16.dp)\n ) { i -\u003e\n val item = items[i]\n Image(\n modifier = Modifier\n .height(205.dp)\n .maskClip(MaterialTheme.shapes.extraLarge),\n painter = painterResource(id = item.imageResId),\n contentDescription = item.contentDescription,\n contentScale = ContentScale.Crop\n )\n }\n}https://github.com/android/snippets/blob/7a0ebbee11495f628cf9d574f6b6069c2867232a/compose/snippets/src/main/java/com/example/compose/snippets/components/Carousel.kt#L44-L82\n```\n\n\u003cbr /\u003e\n\nKey points about the code\n\n- Defines a `CarouselItem` data class, which structures the data for each element in the carousel.\n- Creates and remembers a `List` of `CarouselItem` objects that are populated with image resources and descriptions.\n- Uses the `HorizontalMultiBrowseCarousel` composable, which is designed for displaying multiple items in a carousel.\n - The carousel's state is initialized using `rememberCarouselState`, which is given the total count of items.\n - Items have a `preferredItemWidth` (here, `186.dp`), which suggests an optimal width for each item. The carousel uses this to determine how many items can fit on the screen at once.\n - The `itemSpacing` parameter adds a small gap between items.\n - The trailing lambda of `HorizontalMultiBrowseCarousel` iterates through the `CarouselItems`. In each iteration, it retrieves the item at index `i` and renders an `Image` composable for it.\n - `Modifier.maskClip(MaterialTheme.shapes.extraLarge)` applies a predefined shape mask to each image, giving it rounded corners.\n - `contentDescription` provides an accessibility description for the image.\n\nResult\n\nThe following image shows the result from the preceding snippet:\n**Figure 2.** A multi-browse carousel, with the last item clipped.\n\nExample: Uncontained carousel\n\nThe following snippet implements an uncontained carousel:\n\n\n```kotlin\n@Composable\nfun CarouselExample() {\n data class CarouselItem(\n val id: Int,\n @DrawableRes val imageResId: Int,\n val contentDescription: String\n )\n\n val carouselItems = remember {\n listOf(\n CarouselItem(0, R.drawable.cupcake, \"cupcake\"),\n CarouselItem(1, R.drawable.donut, \"donut\"),\n CarouselItem(2, R.drawable.eclair, \"eclair\"),\n CarouselItem(3, R.drawable.froyo, \"froyo\"),\n CarouselItem(4, R.drawable.gingerbread, \"gingerbread\"),\n )\n }\n\n HorizontalUncontainedCarousel(\n state = rememberCarouselState { carouselItems.count() },\n modifier = Modifier\n .fillMaxWidth()\n .wrapContentHeight()\n .padding(top = 16.dp, bottom = 16.dp),\n itemWidth = 186.dp,\n itemSpacing = 8.dp,\n contentPadding = PaddingValues(horizontal = 16.dp)\n ) { i -\u003e\n val item = carouselItems[i]\n Image(\n modifier = Modifier\n .height(205.dp)\n .maskClip(MaterialTheme.shapes.extraLarge),\n painter = painterResource(id = item.imageResId),\n contentDescription = item.contentDescription,\n contentScale = ContentScale.Crop\n )\n }\n}https://github.com/android/snippets/blob/7a0ebbee11495f628cf9d574f6b6069c2867232a/compose/snippets/src/main/java/com/example/compose/snippets/components/Carousel.kt#L88-L126\n```\n\n\u003cbr /\u003e\n\nKey points about the code\n\n- The `HorizontalUncontainedCarousel` composable creates the carousel layout.\n - The `itemWidth` parameter sets a fixed width for each item in the carousel.\n\nResult\n\nThe following image shows the result from the preceding snippet:\n**Figure 3.** An uncontained carousel, where the last item in the carousel is not clipped."]]
