CarouselItemDrawInfo

Artifact: androidx.compose.material3:material3

Cmn

@ExperimentalMaterial3Api
sealed interface CarouselItemDrawInfo

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

Example of CarouselItemDrawInfo usage:

import androidx.annotation.DrawableRes
import androidx.annotation.StringRes
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Image
import androidx.compose.material3.AssistChipDefaults
import androidx.compose.material3.ElevatedAssistChip
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.material3.carousel.HorizontalMultiBrowseCarousel
import androidx.compose.material3.carousel.rememberCarouselState
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.CornerRadius
import androidx.compose.ui.geometry.RoundRect
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.Outline
import androidx.compose.ui.graphics.Path
import androidx.compose.ui.graphics.Shape
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.Density
import androidx.compose.ui.unit.LayoutDirection
import androidx.compose.ui.unit.dp
import androidx.compose.ui.util.lerp

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

val items =
    listOf(
        CarouselItem(0, R.drawable.carousel_image_1, R.string.carousel_image_1_description),
        CarouselItem(1, R.drawable.carousel_image_2, R.string.carousel_image_2_description),
        CarouselItem(2, R.drawable.carousel_image_3, R.string.carousel_image_3_description),
        CarouselItem(3, R.drawable.carousel_image_4, R.string.carousel_image_4_description),
        CarouselItem(4, R.drawable.carousel_image_5, R.string.carousel_image_5_description),
    )
val state = rememberCarouselState { items.count() }
HorizontalMultiBrowseCarousel(
    state = state,
    modifier = Modifier.width(412.dp).height(221.dp),
    preferredItemWidth = 186.dp,
    itemSpacing = 8.dp,
    contentPadding = PaddingValues(horizontal = 16.dp)
) { i ->
    val item = items[i]
    // For item 1 and 4, create a stacked item layout that clips two images independently
    // to the item's mask
    if (i == 1 || i == 4) {
        Column(
            modifier = Modifier.height(205.dp),
            verticalArrangement = Arrangement.spacedBy(8.dp)
        ) {
            Image(
                modifier =
                    Modifier.fillMaxWidth()
                        .fillMaxHeight(.5f)
                        .maskClip(MaterialTheme.shapes.extraLarge)
                        .maskBorder(
                            BorderStroke(3.dp, Color.Magenta),
                            MaterialTheme.shapes.extraLarge
                        ),
                painter = painterResource(id = item.imageResId),
                contentDescription = stringResource(item.contentDescriptionResId),
                contentScale = ContentScale.Crop
            )
            Image(
                modifier =
                    Modifier.fillMaxSize()
                        .maskClip(RoundedCornerShape(8.dp))
                        .maskBorder(BorderStroke(5.dp, Color.Green), RoundedCornerShape(8.dp)),
                painter = painterResource(id = item.imageResId),
                contentDescription = stringResource(item.contentDescriptionResId),
                contentScale = ContentScale.Crop
            )
        }
    } else {
        // Mask using a generic path shape
        val pathShape = remember {
            object : Shape {
                override fun createOutline(
                    size: Size,
                    layoutDirection: LayoutDirection,
                    density: Density
                ): Outline {
                    val roundRect =
                        RoundRect(0f, 0f, size.width, size.height, CornerRadius(30f))
                    val shapePath = Path().apply { addRoundRect(roundRect) }
                    return Outline.Generic(shapePath)
                }
            }
        }
        Box(
            modifier =
                Modifier.height(205.dp)
                    .maskClip(pathShape)
                    .maskBorder(BorderStroke(5.dp, Color.Red), pathShape),
        ) {
            Image(
                painter = painterResource(id = item.imageResId),
                contentDescription = stringResource(item.contentDescriptionResId),
                modifier = Modifier.fillMaxSize(),
                contentScale = ContentScale.Crop
            )
            ElevatedAssistChip(
                onClick = { /* Do something! */ },
                label = { Text("Image $i") },
                modifier =
                    Modifier.graphicsLayer {
                        // Fade the chip in once the carousel item's size is large enough to
                        // display the entire chip
                        alpha =
                            lerp(
                                0f,
                                1f,
                                max(
                                    size.width - (carouselItemDrawInfo.maxSize) +
                                        carouselItemDrawInfo.size,
                                    0f
                                ) / size.width
                            )
                        // Translate the chip to be pinned to the left side of the item's mask
                        translationX = carouselItemDrawInfo.maskRect.left + 8.dp.toPx()
                    },
                leadingIcon = {
                    Icon(
                        Icons.Filled.Image,
                        contentDescription = "Localized description",
                        Modifier.size(AssistChipDefaults.IconSize)
                    )
                }
            )
        }
    }
}

Summary

Public properties
`Rect`	`maskRect` The `Rect` by which the carousel item is being clipped.	Cmn
`Float`	`maxSize` The maximum size of the carousel item in the main axis in pixels, eg. the size of the item when it is at a focal position	Cmn
`Float`	`minSize` The minimum size of the carousel item in the main axis in pixels, eg. the size of the item as it scrolls off the sides of the carousel	Cmn
`Float`	`size` The size of the carousel item in the main axis in pixels	Cmn