scrollTransform

Modifier in Wear Material 3 Compose

A modifier that enables Material3 Motion transformations for content within a [TransformingLazyColumn] 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 [TransformingLazyColumnItemScrollProgress] of the item inside the [TransformingLazyColumn]. It adjusts the height, position, applies scaling and morphing effects as the item scrolls.

Last updated: 2024-10-22 13:47

Installation

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

Overloads

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

Parameters

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

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

Parameters

name	description
scope	The [TransformingLazyColumnItemScope] provides access to the item's index and key.

Code Example

TransformingLazyColumnScalingMorphingEffectSample

@Preview
@Composable
fun TransformingLazyColumnScalingMorphingEffectSample() {
    val allIngredients = listOf("2 eggs", "tomato", "cheese", "bread")
    val state = rememberTransformingLazyColumnState()
    val coroutineScope = rememberCoroutineScope()
    AppScaffold {
        ScreenScaffold(
            state,
            bottomButton = {
                EdgeButton(onClick = { coroutineScope.launch { state.scrollToItem(1) } }) {
                    Text("To top")
                }
            }
        ) {
            TransformingLazyColumn(
                state = state,
                modifier =
                    Modifier.background(MaterialTheme.colorScheme.background)
                        .padding(horizontal = 10.dp)
            ) {
                item(contentType = "header") {
                    // No modifier is applied - no Material 3 Motion.
                    ListHeader { Text("Ingredients") }
                }

                items(allIngredients, key = { it }) { 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 = MaterialTheme.shapes.small
                                )
                                .padding(10.dp)
                    )
                }
            }
        }
    }
}