ResponsiveTransformationSpec

public sealed interface ResponsiveTransformationSpec : TransformationSpec

Version of TransformationSpec that supports variable screen sizes.

Use this API to define custom transformations for the items as they scroll across the screen.

Code Examples

ResponsiveTransformationSpecButtonSample

@Composable
@Preview
fun ResponsiveTransformationSpecButtonSample() {
    val transformationSpec =
        rememberTransformationSpec(
            ResponsiveTransformationSpec.smallScreen(
                // Makes the content disappear on the edges.
                contentAlpha = TransformationVariableSpec(0f)
            ),
            ResponsiveTransformationSpec.largeScreen(
                // Makes the content disappear on the edges, but a bit more aggressively.
                contentAlpha =
                    TransformationVariableSpec(0f, transformationZoneEnterFraction = 0.2f)
            ),
        )
    TransformingLazyColumn(
        contentPadding = PaddingValues(20.dp),
        modifier = Modifier.background(Color.Black),
    ) {
        items(count = 100) { index ->
            Button(
                onClick = {},
                modifier =
                    Modifier.fillMaxWidth().transformedHeight(this@items, transformationSpec),
                transformation = SurfaceTransformation(transformationSpec),
            ) {
                Text("Item $index")
            }
        }
    }
}