---
title: "MultiAspectCarouselItemDrawInfo"
description: "Interface to hold information about a multi-aspect carousel item and its draw info that change as
the item scrolls.

Example of MultiAspectCarouselItemDrawInfo usage:"
type: "interface"
---

<div class='type'>Interface</div>


<a id='references'></a>

<div class='sourceset sourceset-common'>Common</div>



```kotlin
@ExperimentalMaterial3Api
sealed interface MultiAspectCarouselItemDrawInfo
```


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

Example of MultiAspectCarouselItemDrawInfo usage:


## Properties

<div class='sourceset sourceset-common'>Common</div>


```kotlin
val index: Int
```


The index of this item in the list.



<div class='sourceset sourceset-common'>Common</div>


```kotlin
@get:FrequentlyChangingValue val size: Float
```


The current size of this item in the main scrolling axis taking into account any masking from
maskStart and maskEnd.



<div class='sourceset sourceset-common'>Common</div>


```kotlin
val minSize: Float
```


The smallest size this item will ever be masked to in the main scrolling axis. `size` will
never be less than `minSize`.



<div class='sourceset sourceset-common'>Common</div>


```kotlin
val maxSize: Float
```


The maximum size this item will be in the main scrolling axis. This is the fully unmasked
size of the item with no mask applied. `size` will never be greater than `maxSize`.



<div class='sourceset sourceset-common'>Common</div>


```kotlin
@get:FrequentlyChangingValue val maskStart: Float
```


The offset in pixels from the start of this item's bounds by which the item should be masked.

When this item exists the start or top of the viewport, maskStart will increase to make it
look like this item is being squeezed against the edge of the viewport.



<div class='sourceset sourceset-common'>Common</div>


```kotlin
@get:FrequentlyChangingValue val maskEnd: Float
```


The offset in pixels from the end of this item's bounds by which the item should be masked.

When this item exists the end or bottom of the viewport, maskEnd will increase to make it
look like this item is being squeezed against the edge of the viewport.



<div class='sourceset sourceset-common'>Common</div>


```kotlin
@get:FrequentlyChangingValue val parallax: Float
```


The distance in pixels to translate this item's content in the main scrolling axis.

When an item is exiting the viewport, parallax will translate the content in the opposite
direction of scroll, making it look like the item is moving more slowly and being compressed
against the edge of the viewport.



<div class='sourceset sourceset-common'>Common</div>


```kotlin
val isHorizontal: Boolean
```


True if the main scrolling axis is horizontal.




## Code Examples

### MultiAspectCarouselLazyRowSample
```kotlin
@OptIn(ExperimentalMaterial3Api::class)
@Preview
@Composable
fun MultiAspectCarouselLazyRowSample() {
    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,
                )
            }
        }
    }
}
```

