Material 3 Carousels in Jetpack Compose

Get started with Material 3 carousels in Jetpack Compose to create user-friendly interfaces for showcasing a collection of content.

Explore Carousel Styles

Learn to implement two Material 3 carousel layouts for displaying content. Other layouts like Hero and Full-screen are available but not covered here.

Multi-browse Carousel

Shows multiple items with adaptive sizes.

@Composable
fun CarouselExample_MultiBrowse() {
    // Creates a carousel with adaptive item sizes
    data class CarouselItem(
        val id: Int,
        @DrawableRes val imageResId: Int,
        val contentDescription: String
    )

    val items = remember {
        listOf(
            CarouselItem(0, R.drawable.cupcake, "cupcake"),
            CarouselItem(1, R.drawable.donut, "donut"),
            CarouselItem(2, R.drawable.eclair, "eclair"),
            CarouselItem(3, R.drawable.froyo, "froyo"),
            CarouselItem(4, R.drawable.gingerbread, "gingerbread"),
        )
    }

    HorizontalMultiBrowseCarousel(
        state = rememberCarouselState { items.count() }, // *Required: Manages carousel scroll and index
        modifier = Modifier
            .fillMaxWidth()
            .wrapContentHeight()
            .padding(top = 16.dp, bottom = 16.dp), // *Required: Customizes carousel layout
        preferredItemWidth = 186.dp, // Suggests ideal item width
        itemSpacing = 8.dp, // Sets space between items
        contentPadding = PaddingValues(horizontal = 16.dp) // Adds padding around content
    ) { i ->
        val item = items[i]
        Image(
            modifier = Modifier
                .height(205.dp)
                .maskClip(MaterialTheme.shapes.extraLarge), // Applies rounded corners
            painter = painterResource(id = item.imageResId), // *Required: Displays item image
            contentDescription = item.contentDescription, // Describes image for accessibility
            contentScale = ContentScale.Crop // Scales image to fit
        )
    }
}
  

Use a Multi-browse Carousel when you want to show multiple items with adaptive sizes.

Examples:

• Show a photo gallery in a gallery app
• Display product previews in a shopping app
• Present event thumbnails in a calendar app

---

Uncontained Carousel

Shows items with fixed sizes flowing past the screen edge.

@Composable
fun CarouselExample() {
    // Creates a carousel with fixed-size items
    data class CarouselItem(
        val id: Int,
        @DrawableRes val imageResId: Int,
        val contentDescription: String
    )

    val carouselItems = remember {
        listOf(
            CarouselItem(0, R.drawable.cupcake, "cupcake"),
            CarouselItem(1, R.drawable.donut, "donut"),
            CarouselItem(2, R.drawable.eclair, "eclair"),
            CarouselItem(3, R.drawable.froyo, "froyo"),
            CarouselItem(4, R.drawable.gingerbread, "gingerbread"),
        )
    }

    HorizontalUncontainedCarousel(
        state = rememberCarouselState { carouselItems.count() }, // *Required: Manages carousel scroll and index
        modifier = Modifier
            .fillMaxWidth()
            .wrapContentHeight()
            .padding(top = 16.dp, bottom = 16.dp), // *Required: Customizes carousel layout
        itemWidth = 186.dp, // Sets fixed item width
        itemSpacing = 8.dp, // Sets space between items
        contentPadding = PaddingValues(horizontal = 16.dp) // Adds padding around content
    ) { i ->
        val item = carouselItems[i]
        Image(
            modifier = Modifier
                .height(205.dp)
                .maskClip(MaterialTheme.shapes.extraLarge), // Applies rounded corners
            painter = painterResource(id = item.imageResId), // *Required: Displays item image
            contentDescription = item.contentDescription, // Describes image for accessibility
            contentScale = ContentScale.Crop // Scales image to fit
        )
    }
}
  

Use an Uncontained Carousel when you want to show items with fixed sizes flowing past the screen edge.

Examples:

• Show movie posters in a streaming app
• Display product images in an e-commerce app
• Present article thumbnails in a news app

---

Carousel Properties

Understand the key properties used in the carousel examples.

Property	Usage
state*	Required: Manages carousel scroll and index using rememberCarouselState
content*	Required: Defines carousel items, typically Images, based on index
modifier*	Required: Customizes layout, like width and padding (e.g., fillMaxWidth)
preferredItemWidth	Suggests ideal item width for Multi-browse carousel (e.g., 186.dp)
itemWidth	Sets fixed item width for Uncontained carousel (e.g., 186.dp)
itemSpacing	Sets space between items (e.g., 8.dp)
contentPadding	Adds padding around carousel content (e.g., 16.dp horizontal)
contentDescription	Describes carousel images for accessibility