rememberTransformationSpec

@Composable
public fun rememberTransformationSpec(
    vararg specs: ResponsiveTransformationSpec
): TransformationSpec

Computes and remembers the appropriate TransformationSpec for the current screen size, given one or more ResponsiveTransformationSpecs for different screen sizes.

It would return special NoOp version of TransformationSpec when ReducedMotion is on.

Example usage for ResponsiveTransformationSpec, the recommended TransformationSpec for large-screen aware Wear apps:

Parameters

@Composable
public fun rememberTransformationSpec(): TransformationSpec

Computes and remembers the appropriate TransformationSpec for the current screen size.

It would return special NoOp version of TransformationSpec when ReducedMotion is on.

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")
            }
        }
    }
}

TransformingLazyColumnNotificationsSample

@Preview
@Composable
fun TransformingLazyColumnNotificationsSample() {
    val state = rememberTransformingLazyColumnState()
    val transformationSpec = rememberTransformationSpec()
    data class NotificationItem(val title: String, val body: String)
    val notifications =
        listOf(
            NotificationItem(
                "☕ Coffee Break?",
                "Step away from the screen and grab a pick-me-up. Step away from the screen and grab a pick-me-up.",
            ),
            NotificationItem("🌟 You're Awesome!", "Just a little reminder in case you forgot 😊"),
            NotificationItem("👀 Did you know?", "Check out [app name]'s latest feature update."),
            NotificationItem("📅 Appointment Time", "Your meeting with [name] is in 15 minutes."),
        )
    AppScaffold {
        ScreenScaffold(state) { contentPadding ->
            TransformingLazyColumn(state = state, contentPadding = contentPadding) {
                item {
                    ListHeader(
                        transformation = SurfaceTransformation(transformationSpec),
                        modifier =
                            Modifier.transformedHeight(this, transformationSpec).animateItem(),
                    ) {
                        Text("Notifications")
                    }
                }
                items(notifications) { notification ->
                    TitleCard(
                        onClick = {},
                        title = {
                            Text(
                                notification.title,
                                fontWeight = FontWeight.Bold,
                                style = MaterialTheme.typography.labelLarge,
                                maxLines = 1,
                            )
                        },
                        subtitle = { Text(notification.body) },
                        transformation = SurfaceTransformation(transformationSpec),
                        modifier =
                            Modifier.transformedHeight(this, transformationSpec).animateItem(),
                    )
                }
            }
        }
    }
}