Vignette

Component in Wear Material Compose

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: 2025-05-30 14:30

Installation

dependencies {
   implementation("androidx.wear.compose:compose-material:1.5.0-beta02")
}

Overloads

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

Parameters

name	description
vignettePosition	whether to draw top and/or bottom images for this [Vignette]
modifier	optional Modifier for the root of the [Vignette]

Code Example

SimpleScaffoldWithScrollIndicator

@SuppressLint("UnrememberedMutableState")
@Composable
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()
                )
            }
        }
    }
}