New Compose Multiplatform components arrived on Composables UICheck it out →

← Component in Wear Material Compose

Vignette

Android

Vignette is whole screen decoration used to blur the top and bottom of the edges of a wearable screen when scrolling content is displayed. The vignette is split between a top and bottom image which can be displayed independently depending on the use case.

The vignette is designed to be used as an overlay, typically in the [Scaffold].

Simple example of a Vignette with a [ScalingLazyColumn] as the main application content where the top/bottom vignette images can be turned on/off can be found at

Last updated:

Installation

dependencies {
   implementation("androidx.wear.compose:compose-material:1.4.0-beta03")
}

Overloads

@Composable
fun Vignette(
    vignettePosition: VignettePosition,
    modifier: Modifier = Modifier,
)

Parameters

namedescription
vignettePositionwhether to draw top and/or bottom images for this [Vignette]
modifieroptional Modifier for the root of the [Vignette]

Code Example

SimpleScaffoldWithScrollIndicator

@Composable
@Sampled
@SuppressLint("UnrememberedMutableState"
fun SimpleScaffoldWithScrollIndicator() {

    val listState = rememberScalingLazyListState()
    val vignetteState = mutableStateOf(VignettePosition.TopAndBottom)
    val showVignette = mutableStateOf(true)

    Scaffold(
        positionIndicator = {
            PositionIndicator(
                scalingLazyListState = listState,
                modifier = Modifier
            )
        },
        vignette = {
            if (showVignette.value) {
                Vignette(vignettePosition = vignetteState.value)
            }
        },
        timeText = {
            TimeText()
        }
    ) {
        ScalingLazyColumn(
            contentPadding = PaddingValues(top = 40.dp),
            state = listState,
            modifier = Modifier.fillMaxWidth()
        ) {
            item {
                Chip(
                    onClick = { showVignette.value = false },
                    label = { Text("No Vignette") },
                    colors = ChipDefaults.secondaryChipColors()
                )
            }
            item {
                Chip(
                    onClick = {
                        showVignette.value = true
                        vignetteState.value = VignettePosition.Top
                    },
                    label = { Text("Top Vignette only") },
                    colors = ChipDefaults.secondaryChipColors()
                )
            }
            item {
                Chip(
                    onClick = {
                        showVignette.value = true
                        vignetteState.value = VignettePosition.Bottom
                    },
                    label = { Text("Bottom Vignette only") },
                    colors = ChipDefaults.secondaryChipColors()
                )
            }
            item {
                Chip(
                    onClick = {
                        showVignette.value = true
                        vignetteState.value = VignettePosition.TopAndBottom
                    },
                    label = { Text("Top and Bottom Vignette") },
                    colors = ChipDefaults.secondaryChipColors()
                )
            }
            items(20) {
                Chip(
                    onClick = { },
                    label = { Text("List item $it") },
                    colors = ChipDefaults.secondaryChipColors()
                )
            }
        }
    }
}