Vignette

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.

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

Parameters

Code Examples

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(),
                )
            }
        }
    }
}

Create your own Component Library

Material Components are meant to be used as is and they do not allow customizations. To build your own Jetpack Compose component library use Compose Unstyled