androidx.compose.material3.carousel

Interfaces

CarouselItemDrawInfo

Interface to hold information about a Carousel item and its size.
Cmn
CarouselItemScope

Receiver scope for Carousel item content.
Cmn
MultiAspectCarouselItemDrawInfo

Interface to hold information about a multi-aspect carousel item and its draw info that change as the item scrolls.
Cmn
MultiAspectCarouselScope

A scope containing all methods used to create a multi-aspect carousel from a androidx.compose.foundation.lazy.LazyRow or androidx.compose.foundation.lazy.LazyColumn.
Cmn

Classes

CarouselState

The state that can be used to control all types of carousels.
Cmn

Objects

CarouselDefaults

Contains the default values used by Carousel.
Cmn

Composables

HorizontalCenteredHeroCarousel

Material Design Carousel
Cmn
HorizontalMultiBrowseCarousel

Material Design Carousel
Cmn
HorizontalUncontainedCarousel

Material Design Carousel
Cmn
MultiAspectCarouselScope

Creates a multi-apsect carousel scope that includes all related methods for creating a multi-aspect carousel.
Cmn
rememberCarouselState

Creates a CarouselState that is remembered across compositions.
Cmn

Top-level functions summary

MultiAspectCarouselItemDrawInfo

Create a MultiAspectCarouselItemDrawInfo object for an item at the given index in a androidx.compose.foundation.lazy.grid.LazyHorizontalGrid or androidx.compose.foundation.lazy.grid.LazyVerticalGrid.
Cmn
MultiAspectCarouselItemDrawInfo

Create a MultiAspectCarouselItemDrawInfo object for an item at the given index in a androidx.compose.foundation.lazy.LazyRow or androidx.compose.foundation.lazy.LazyColumn.
Cmn

Top-level functions

MultiAspectCarouselItemDrawInfo

Cmn 
@ExperimentalMaterial3Api
fun MultiAspectCarouselItemDrawInfo(index: Int, state: LazyGridState): MultiAspectCarouselItemDrawInfo

Create a MultiAspectCarouselItemDrawInfo object for an item at the given index in a androidx.compose.foundation.lazy.grid.LazyHorizontalGrid or androidx.compose.foundation.lazy.grid.LazyVerticalGrid.

Remember a MultiAspectCarouselItemDrawInfo for each item in the LazyList and use MultiAspectCarouselScope.maskClip on the item's outermost container to mask and parallax the item on scroll.

Parameters
index: Int

the index of the LazyGrid item this draw info is being used for
state: LazyGridState

the LazyGridState of the list this item belongs to

MultiAspectCarouselItemDrawInfo

Cmn 
@ExperimentalMaterial3Api
fun MultiAspectCarouselItemDrawInfo(index: Int, state: LazyListState): MultiAspectCarouselItemDrawInfo

Create a MultiAspectCarouselItemDrawInfo object for an item at the given index in a androidx.compose.foundation.lazy.LazyRow or androidx.compose.foundation.lazy.LazyColumn.

Remember a MultiAspectCarouselItemDrawInfo for each item in the LazyList and use MultiAspectCarouselScope.maskClip on the item's outermost container to mask and parallax the item on scroll.

import androidx.annotation.DrawableRes
import androidx.annotation.StringRes
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.foundation.lazy.itemsIndexed
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.material.icons.filled.Image
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.carousel.MultiAspectCarouselItemDrawInfo
import androidx.compose.material3.carousel.MultiAspectCarouselScope
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp

data class CarouselItem(
    val id: Int,
    @DrawableRes val imageResId: Int,
    @StringRes val contentDescriptionResId: Int,
    val mainAxisSize: Dp,
)

val items =
    listOf(
        CarouselItem(
            0,
            R.drawable.carousel_image_1,
            R.string.carousel_image_1_description,
            305.dp,
        ),
        CarouselItem(
            1,
            R.drawable.carousel_image_2,
            R.string.carousel_image_2_description,
            205.dp,
        ),
        CarouselItem(
            2,
            R.drawable.carousel_image_3,
            R.string.carousel_image_3_description,
            275.dp,
        ),
        CarouselItem(
            3,
            R.drawable.carousel_image_4,
            R.string.carousel_image_4_description,
            350.dp,
        ),
        CarouselItem(
            4,
            R.drawable.carousel_image_5,
            R.string.carousel_image_5_description,
            100.dp,
        ),
    )

MultiAspectCarouselScope {
    val state = rememberLazyListState()
    LazyRow(
        state = state,
        contentPadding = PaddingValues(16.dp),
        horizontalArrangement = Arrangement.spacedBy(8.dp),
        modifier = Modifier.fillMaxWidth().height(221.dp),
    ) {
        itemsIndexed(items) { i, item ->
            val drawInfo = remember { MultiAspectCarouselItemDrawInfo(i, state) }
            Image(
                painter = painterResource(id = item.imageResId),
                contentDescription = stringResource(item.contentDescriptionResId),
                modifier =
                    Modifier.width(item.mainAxisSize)
                        .height(205.dp)
                        .maskClip(MaterialTheme.shapes.extraLarge, drawInfo),
                contentScale = ContentScale.Crop,
            )
        }
    }
}
Parameters
index: Int

the index of the LazyList item this draw info is being used for
state: LazyListState

the LazyListState of the list this item belongs to