Vignette

Functions summary

Unit
@Composable
Vignette(vignettePosition: VignettePosition, modifier: Modifier)

Vignette is whole screen decoration used to blur the top and bottom of the edges of a wearable screen when scrolling content is displayed.

Functions

Vignette

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

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

import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.runtime.mutableStateOf
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.wear.compose.foundation.lazy.ScalingLazyColumn
import androidx.wear.compose.foundation.lazy.rememberScalingLazyListState
import androidx.wear.compose.material.Chip
import androidx.wear.compose.material.ChipDefaults
import androidx.wear.compose.material.PositionIndicator
import androidx.wear.compose.material.Scaffold
import androidx.wear.compose.material.Text
import androidx.wear.compose.material.TimeText
import androidx.wear.compose.material.Vignette
import androidx.wear.compose.material.VignettePosition

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(),
            )
        }
    }
}
Parameters
vignettePosition: VignettePosition

whether to draw top and/or bottom images for this Vignette
modifier: Modifier = Modifier

optional Modifier for the root of the Vignette