carouselParallaxScrollEffect

Functions summary

Modifier

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

Functions

Modifier.carouselParallaxScrollEffect

Cmn 
@ExperimentalMaterial3Api
@Composable
fun Modifier.carouselParallaxScrollEffect(
    index: Int,
    state: CarouselParallaxScrollEffectState,
    shape: Shape,
    border: BorderStroke? = null
): Modifier

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

Use carouselParallaxScrollEffect to give any scrollable container the look and feel of a Material uncontained multi-aspect carousel. Unlike dedicated Carousel composables (i.e. HorizontalMultiBrowseCarousel, HorizontalCenteredHeroCarousel) which are based on Pager and require all items to be the same size, this modifier can be used with androidx.compose.foundation.lazy.LazyRow, androidx.compose.foundation.lazy.LazyColumn, androidx.compose.foundation.lazy.grid.LazyHorizontalGrid, androidx.compose.foundation.lazy.grid.LazyVerticalGrid, or any custom scrollable where items are able to vary in size.

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
index: Int

the index of the item this modifier is applied to
state: CarouselParallaxScrollEffectState

the object holding the scrollable container's effect state
shape: Shape

the shape to clip the item and optional border to
border: BorderStroke? = null

an optional border to draw around the clipped shape