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
CarouselParallaxScrollEffectState

A state holder for scrollable items to track effect values that are applied by the carouselParallaxScrollEffect modifier.
Cmn

Classes

CarouselParallaxScrollEffectItemInfo

Visual effect values calculated for an item at a specific index in a scrollable container.
Cmn
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
carouselParallaxScrollEffect

Add a parallax effect to an item by clipping and translating the item as it enters and exits a scrollable viewport.
Cmn
rememberCarouselState

Creates a CarouselState that is remembered across compositions.
Cmn

Top-level functions summary

CarouselParallaxScrollEffectState

Create a CarouselParallaxScrollEffectState object for a androidx.compose.foundation.lazy.grid.LazyHorizontalGrid or androidx.compose.foundation.lazy.grid.LazyVerticalGrid.
Cmn
CarouselParallaxScrollEffectState

Create a CarouselParallaxScrollEffectState object for a androidx.compose.foundation.lazy.LazyRow or androidx.compose.foundation.lazy.LazyColumn.
Cmn

Top-level functions

CarouselParallaxScrollEffectState

Cmn 
@ExperimentalMaterial3Api
@RememberInComposition
fun CarouselParallaxScrollEffectState(state: LazyGridState): CarouselParallaxScrollEffectState

Create a CarouselParallaxScrollEffectState object for a androidx.compose.foundation.lazy.grid.LazyHorizontalGrid or androidx.compose.foundation.lazy.grid.LazyVerticalGrid.

Remember a CarouselParallaxScrollEffectState for the LazyGrid and use carouselParallaxScrollEffect on each item's container that should be clipped and translated to create the effect.

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.CarouselParallaxScrollEffectState
import androidx.compose.material3.carousel.carouselParallaxScrollEffect
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,
        ),
    )

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

the LazyGridState for the grid

CarouselParallaxScrollEffectState

Cmn 
@ExperimentalMaterial3Api
@RememberInComposition
fun CarouselParallaxScrollEffectState(state: LazyListState): CarouselParallaxScrollEffectState

Create a CarouselParallaxScrollEffectState object for a androidx.compose.foundation.lazy.LazyRow or androidx.compose.foundation.lazy.LazyColumn.

Remember a CarouselParallaxScrollEffectState for the LazyList and use carouselParallaxScrollEffect on each item's container that should be clipped and translated to create the effect.

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.CarouselParallaxScrollEffectState
import androidx.compose.material3.carousel.carouselParallaxScrollEffect
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,
        ),
    )

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

the LazyListState of the list