scrollTransform

Modifier in Wear Material 3 Compose

A modifier that enables Material3 Motion transformations for content within a LazyColumn item. It also draws the background behind the content using Material3 Motion transformations. There is also an overload that applies the same visual transformations to the background.

This modifier calculates and applies transformations to the content based on the [LazyColumnItemScrollProgress] of the item inside the LazyColumn. It adjusts the height, position, applies scaling and morphing effects as the item scrolls.

Last updated: 2024-09-07 14:23

Installation

dependencies {
   implementation("androidx.wear.compose:compose-material3:1.0.0-alpha24")
}

Overloads

@Composable
fun Modifier.scrollTransform(
    scope: LazyColumnItemScope,
    backgroundColor: Color,
    shape: Shape = RectangleShape
): Modifier

Parameters

name	description
scope	The LazyColumnItemScope provides access to the item's index and key.
backgroundColor	Color of the background.
shape	Shape of the background.

@Composable
fun Modifier.scrollTransform(
    scope: LazyColumnItemScope,
): Modifier

Parameters

name	description
scope	The LazyColumnItemScope provides access to the item's index and key.

Code Example

LazyColumnScalingMorphingEffectSample

@Preview
@Composable
fun LazyColumnScalingMorphingEffectSample() {
    val allIngredients = listOf("2 eggs", "tomato", "cheese", "bread")

    LazyColumn(modifier = Modifier.background(Color.Black).padding(horizontal = 10.dp)) {
        item {
            // No modifier is applied - no Material 3 Motion.
            ListHeader { Text("Ingredients") }
        }

        items(allIngredients) { ingredient ->
            Text(
                ingredient,
                color = MaterialTheme.colorScheme.onSurface,
                style = MaterialTheme.typography.bodyLarge,
                modifier =
                    Modifier.fillMaxWidth()
                        // Apply Material 3 Motion transformations.
                        .scrollTransform(
                            this,
                            backgroundColor = MaterialTheme.colorScheme.surfaceContainer,
                            shape = RoundedCornerShape(10.dp)
                        )
                        .padding(10.dp)
            )
        }
    }
}