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.unit.dp
import androidx.wear.compose.foundation.lazy.TransformingLazyColumn
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.SurfaceTransformation
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.lazy.ResponsiveTransformationSpec
import androidx.wear.compose.material3.lazy.TransformationSpec
import androidx.wear.compose.material3.lazy.TransformationVariableSpec
import androidx.wear.compose.material3.lazy.rememberTransformationSpec
import androidx.wear.compose.material3.lazy.transformedHeight

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 ->
        TransformExclusion {
            Button(
                onClick = {},
                modifier =
                    Modifier.fillMaxWidth().transformedHeight(this@items, transformationSpec),
                transformation = SurfaceTransformation(transformationSpec),
            ) {
                Text("Item $index")
            }
        }
    }
}

Summary

Public companion functions
ResponsiveTransformationSpec
largeScreen(
    screenSize: Dp,
    minElementHeightFraction: @FloatRange(from = 0.0, to = 1.0) Float,
    maxElementHeightFraction: @FloatRange(from = 0.0, to = 1.0) Float,
    minTransitionAreaHeightFraction: @FloatRange(from = 0.0, to = 1.0) Float,
    maxTransitionAreaHeightFraction: @FloatRange(from = 0.0, to = 1.0) Float,
    easing: Easing,
    containerAlpha: TransformationVariableSpec,
    contentAlpha: TransformationVariableSpec,
    scale: TransformationVariableSpec
)

Default TransformationSpec for large screen size.
ResponsiveTransformationSpec
smallScreen(
    screenSize: Dp,
    minElementHeightFraction: @FloatRange(from = 0.0, to = 1.0) Float,
    maxElementHeightFraction: @FloatRange(from = 0.0, to = 1.0) Float,
    minTransitionAreaHeightFraction: @FloatRange(from = 0.0, to = 1.0) Float,
    maxTransitionAreaHeightFraction: @FloatRange(from = 0.0, to = 1.0) Float,
    easing: Easing,
    containerAlpha: TransformationVariableSpec,
    contentAlpha: TransformationVariableSpec,
    scale: TransformationVariableSpec
)

Default TransformationSpec for small screen size.

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

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.

Public companion functions

largeScreen

fun largeScreen(
    screenSize: Dp = ResponsiveTransformationSpecDefaults.LargeScreenSize,
    minElementHeightFraction: @FloatRange(from = 0.0, to = 1.0) Float = 0.15f,
    maxElementHeightFraction: @FloatRange(from = 0.0, to = 1.0) Float = 0.45f,
    minTransitionAreaHeightFraction: @FloatRange(from = 0.0, to = 1.0) Float = 0.4f,
    maxTransitionAreaHeightFraction: @FloatRange(from = 0.0, to = 1.0) Float = 0.6f,
    easing: Easing = CubicBezierEasing(0.3f, 0f, 0.7f, 1f),
    containerAlpha: TransformationVariableSpec = TransformationVariableSpec(0.5f),
    contentAlpha: TransformationVariableSpec = TransformationVariableSpec(0.5f),
    scale: TransformationVariableSpec = TransformationVariableSpec(0.6f)
): ResponsiveTransformationSpec

Default TransformationSpec for large screen size.

This spec should be used in rememberTransformationSpec together with the specs for alternative screen sizes, so that in-between screen sizes can be supported using interpolation.

Parameters
screenSize: Dp = ResponsiveTransformationSpecDefaults.LargeScreenSize

The screen size of the large watch.
minElementHeightFraction: @FloatRange(from = 0.0, to = 1.0) Float = 0.15f

The minimum element height, as a ratio of the viewport height, to use for determining the transition area height within the range minTransitionAreaHeightFraction..maxTransitionAreaHeightFraction. Given a content item, this defines the start and end points for transitioning the item. Item heights lower than minElementHeightFraction will be treated as if minElementHeightFraction. Must be smaller than or equal to maxElementHeightFraction.
maxElementHeightFraction: @FloatRange(from = 0.0, to = 1.0) Float = 0.45f

The maximum element height, as a ratio of the viewport height, to use for determining the transition area height within the range minTransitionAreaHeightFraction..maxTransitionAreaHeightFraction. Given a content item, this defines the start and end points for transitioning the item. Item heights higher than maxElementHeightFraction will be treated as if maxElementHeightFraction. Must be greater than or equal to minElementHeightFraction.
minTransitionAreaHeightFraction: @FloatRange(from = 0.0, to = 1.0) Float = 0.4f

The lower bound of the range of heights for the transition area, i.e. how tall the transition area is for items of height minElementHeightFraction or shorter. Taller items will have taller transition areas, up to maxTransitionAreaHeightFraction. This is defined as a fraction (value between 0f..1f) of the viewport height. Must be less than or equal to maxTransitionAreaHeightFraction. Note that the transition area is the same for all variables, but each variable can define a transformation zone inside it in which the transformations will actually occur. See TransformationVariableSpec.
maxTransitionAreaHeightFraction: @FloatRange(from = 0.0, to = 1.0) Float = 0.6f

The upper bound of the range of heights for the transition area, i.e. how tall the transition area is for items of height maxElementHeightFraction or taller. Shorter items will have shorter transition areas, down to minTransitionAreaHeightFraction. This is defined as a fraction (value between 0f..1f) of the viewport height. Must be greater than or equal to minTransitionAreaHeightFraction. Note that the transition area is the same for all variables, but each variable can define a transformation zone inside it in which the transformations will actually occur. See TransformationVariableSpec.
easing: Easing = CubicBezierEasing(0.3f, 0f, 0.7f, 1f)

An interpolator to use to determine how to apply transformations as the item transitions across the transformation zones.
containerAlpha: TransformationVariableSpec = TransformationVariableSpec(0.5f)

Configuration for how the container (background) of the item will fade in/out.
contentAlpha: TransformationVariableSpec = TransformationVariableSpec(0.5f)

Configuration for how the content of the item will fade in/out.
scale: TransformationVariableSpec = TransformationVariableSpec(0.6f)

Configuration for scaling the whole item (container and content).

smallScreen

fun smallScreen(
    screenSize: Dp = ResponsiveTransformationSpecDefaults.SmallScreenSize,
    minElementHeightFraction: @FloatRange(from = 0.0, to = 1.0) Float = 0.2f,
    maxElementHeightFraction: @FloatRange(from = 0.0, to = 1.0) Float = 0.6f,
    minTransitionAreaHeightFraction: @FloatRange(from = 0.0, to = 1.0) Float = 0.35f,
    maxTransitionAreaHeightFraction: @FloatRange(from = 0.0, to = 1.0) Float = 0.55f,
    easing: Easing = CubicBezierEasing(0.3f, 0f, 0.7f, 1f),
    containerAlpha: TransformationVariableSpec = TransformationVariableSpec(0.5f),
    contentAlpha: TransformationVariableSpec = TransformationVariableSpec(0.5f),
    scale: TransformationVariableSpec = TransformationVariableSpec(0.7f)
): ResponsiveTransformationSpec

Default TransformationSpec for small screen size.

This spec should be used in rememberTransformationSpec together with the specs for alternative screen sizes, so that in-between screen sizes can be supported using interpolation.

Parameters
screenSize: Dp = ResponsiveTransformationSpecDefaults.SmallScreenSize

The size of the small screen.
minElementHeightFraction: @FloatRange(from = 0.0, to = 1.0) Float = 0.2f

The minimum element height, as a ratio of the viewport height, to use for determining the transition area height within the range minTransitionAreaHeightFraction..maxTransitionAreaHeightFraction. Given a content item, this defines the start and end points for transitioning the item. Item heights lower than minElementHeightFraction will be treated as if minElementHeightFraction. Must be smaller than or equal to maxElementHeightFraction.
maxElementHeightFraction: @FloatRange(from = 0.0, to = 1.0) Float = 0.6f

The maximum element height, as a ratio of the viewport height, to use for determining the transition area height within the range minTransitionAreaHeightFraction..maxTransitionAreaHeightFraction. Given a content item, this defines the start and end points for transitioning the item. Item heights higher than maxElementHeightFraction will be treated as if maxElementHeightFraction. Must be greater than or equal to minElementHeightFraction.
minTransitionAreaHeightFraction: @FloatRange(from = 0.0, to = 1.0) Float = 0.35f

The lower bound of the range of heights for the transition area, i.e. how tall the transition area is for items of height minElementHeightFraction or shorter. Taller items will have taller transition areas, up to maxTransitionAreaHeightFraction. This is defined as a fraction (value between 0f..1f) of the viewport height. Must be less than or equal to maxTransitionAreaHeightFraction. Note that the transition area is the same for all variables, but each variable can define a transformation zone inside it in which the transformations will actually occur. See TransformationVariableSpec.
maxTransitionAreaHeightFraction: @FloatRange(from = 0.0, to = 1.0) Float = 0.55f

The upper bound of the range of heights for the transition area, i.e. how tall the transition area is for items of height maxElementHeightFraction or taller. Shorter items will have shorter transition areas, down to minTransitionAreaHeightFraction. This is defined as a fraction (value between 0f..1f) of the viewport height. Must be greater than or equal to minTransitionAreaHeightFraction. Note that the transition area is the same for all variables, but each variable can define a transformation zone inside it in which the transformations will actually occur. See TransformationVariableSpec.
easing: Easing = CubicBezierEasing(0.3f, 0f, 0.7f, 1f)

An interpolator to use to determine how to apply transformations as the item transitions across the transformation zones.
containerAlpha: TransformationVariableSpec = TransformationVariableSpec(0.5f)

Configuration for how the container (background) of the item will fade in/out.
contentAlpha: TransformationVariableSpec = TransformationVariableSpec(0.5f)

Configuration for how the content of the item will fade in/out.
scale: TransformationVariableSpec = TransformationVariableSpec(0.7f)

Configuration for scaling the whole item (container and content).