ResponsiveTransformationSpec

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.

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.unit.dp
import androidx.wear.compose.foundation.lazy.TransformingLazyColumn
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.lazy.ResponsiveTransformationSpecDefaults
import androidx.wear.compose.material3.lazy.TransformationSpec
import androidx.wear.compose.material3.lazy.TransformationVariableSpec
import androidx.wear.compose.material3.lazy.rememberResponsiveTransformationSpec

val transformationSpec =
    rememberResponsiveTransformationSpec(
        ResponsiveTransformationSpecDefaults.smallScreenSpec(
            // Makes the content disappear on the edges.
            contentAlpha = TransformationVariableSpec(0f)
        ),
        ResponsiveTransformationSpecDefaults.largeScreenSpec(
            // 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 ->
        TransformExclusion {
            Button(
                onClick = {},
                modifier =
                    Modifier.fillMaxWidth()
                        .transformedHeight(transformationSpec::getTransformedHeight)
                        .graphicsLayer {
                            with(transformationSpec) {
                                applyContainerTransformation(scrollProgress)
                            }
                        },
            ) {
                Text(
                    "Item $index",
                    modifier =
                        Modifier.graphicsLayer {
                            with(transformationSpec) {
                                applyContentTransformation(scrollProgress)
                            }
                        }
                )
            }
        }
    }
}

Summary

Inherited functions
From androidx.wear.compose.material3.lazy.TransformationSpec
Unit

Visual transformations to be applied to the container of the item as it scrolls.
Unit

Visual transformations to be applied to the content of the item as it scrolls.
Painter
TransformedPainterScope.createTransformedPainter(
    painter: Painter,
    shape: Shape,
    border: BorderStroke?
)

Returns a new painter to be used instead of painter which should react on a transformation.
Int
getTransformedHeight(
    measuredHeight: Int,
    scrollProgress: TransformingLazyColumnItemScrollProgress
)

Calculates the transformed height to be passed into TransformingLazyColumnItemScope.transformedHeight based on the parameters for the spec.