targetMorphingHeight

Modifier in Wear Material 3 Compose

This modifier provides the height of the target composable to the [scrollTransform] during a morph transition and represents minimum height of the item when morphed.

Should be applied to a single child element or none at all (in which case, the morph effect is disabled). When applied to multiple child elements, the last placed child's height we be used for morphing.

Last updated: 2024-09-07 14:23

Installation

dependencies {
   implementation("androidx.wear.compose:compose-material3:1.0.0-alpha24")
}

Overloads

fun Modifier.targetMorphingHeight(
    @Suppress("UNUSED_PARAMETER") scope: LazyColumnItemScope,
): Modifier

Parameters

name	description
scope	The LazyColumnItemScope provides access to the item's index and key.

Code Example

LazyColumnTargetMorphingHeightSample

@Preview
@Composable
fun LazyColumnTargetMorphingHeightSample() {
    data class MenuItem(val title: String, val price: Float)

    val drinks =
        listOf(
            MenuItem("Cappuccino", 2.5f),
            MenuItem("Late", 3f),
            MenuItem("Flat White", 3.2f),
            MenuItem("Americano", 1.5f),
            MenuItem("Black tea", 2f),
            MenuItem("London fog", 2.6f),
        )

    MaterialTheme {
        Box(modifier = Modifier.aspectRatio(1f).background(Color.Black)) {
            LazyColumn(
                modifier = Modifier.padding(horizontal = 10.dp),
            ) {
                item {
                    // No modifier is applied - no Material 3 Motion transformations.
                    ListHeader { Text("Drinks", style = MaterialTheme.typography.labelLarge) }
                }
                items(drinks) { notification ->
                    Column(
                        modifier =
                            Modifier.fillMaxWidth()
                                // Apply Material 3 Motion effect.
                                .scrollTransform(
                                    this@items,
                                    backgroundColor = Color.DarkGray,
                                    shape = RoundedCornerShape(20.dp),
                                )
                                .padding(horizontal = 10.dp)
                    ) {
                        Text(
                            notification.title,
                            fontWeight = FontWeight.Bold,
                            style = MaterialTheme.typography.labelLarge,
                            // Morphing is focusing on the title.
                            modifier = Modifier.targetMorphingHeight(this@items)
                        )
                        // Price is revealed after the morph.
                        Text("$${notification.price}")
                    }
                }
            }
        }
    }
}