androidx.wear.compose.material3.lazy

Interfaces

ResponsiveTransformationSpec

Version of TransformationSpec that supports variable screen sizes.
TransformationSpec

Defines visual transformations on the items of a TransformingLazyColumn.
TransformedContainerPainterScope

Provides additional information to the painter inside TransformationSpec.

Classes

TransformationVariableSpec

This class represents the configuration parameters for one variable that changes as the item moves on the screen and will be used to apply the corresponding transformation - for example: container alpha.

Objects

ResponsiveTransformationSpecDefaults

Contains the default values used by ResponsiveTransformationSpec

Top-level functions summary

TransformationVariableSpec
lerp(
    start: TransformationVariableSpec,
    stop: TransformationVariableSpec,
    progress: Float
)

Helper function to lerp between the variables for different screen sizes.
TransformationSpec

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

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

Extension functions summary

Modifier

Convenience modifier to calculate transformed height using TransformationSpec.

Top-level functions

lerp

fun lerp(
    start: TransformationVariableSpec,
    stop: TransformationVariableSpec,
    progress: Float
): TransformationVariableSpec

Helper function to lerp between the variables for different screen sizes.

rememberTransformationSpec

@Composable
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.

rememberTransformationSpec

@Composable
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:

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")
            }
        }
    }
}
Parameters
vararg specs: ResponsiveTransformationSpec

The ResponsiveTransformationSpecs that should be used for different screen sizes.

Extension functions

transformedHeight

fun Modifier.transformedHeight(
    scope: TransformingLazyColumnItemScope,
    transformationSpec: TransformationSpec
): Modifier

Convenience modifier to calculate transformed height using TransformationSpec.