ripple

RippleSample

@Preview
@Sampled
@Composable
fun RippleSample() {
    val interactionSource = remember { MutableInteractionSource() }
    Box(
        modifier =
            Modifier.size(100.dp)
                .background(MaterialTheme.colorScheme.surfaceVariant)
                .clickable(
                    interactionSource = interactionSource,
                    indication = ripple(bounded = true, color = MaterialTheme.colorScheme.primary),
                    onClick = {},
                ),
        contentAlignment = Alignment.Center,
    ) {
        Text("Custom Ripple")
    }
}

InsetFocusRingRippleSample

@Preview
@Sampled
@Composable
fun InsetFocusRingRippleSample() {
    // Enable inset focus rings at theme level
    CompositionLocalProvider(
        LocalRippleThemeConfiguration provides RippleDefaults.InsetFocusRingThemeConfiguration
    ) {
        // Components in this tree will render inset focus rings using theme colors when focused
        Button(onClick = {}) { Text("Button with Inset Focus Ring") }
    }
}

RippleConfigurationInsetFocusRingSample

@Preview
@Sampled
@Composable
fun RippleConfigurationInsetFocusRingSample() {
    // Enable inset focus rings at theme level
    CompositionLocalProvider(
        LocalRippleThemeConfiguration provides RippleDefaults.InsetFocusRingThemeConfiguration
    ) {
        // Custom focus ring colors provided to a subtree via LocalRippleConfiguration
        val customFocusRingConfiguration =
            RippleConfiguration(
                focus =
                    RippleConfiguration.Focus.InsetRing(
                        outerStrokeColor = MaterialTheme.colorScheme.primary,
                        innerStrokeColor = MaterialTheme.colorScheme.onPrimary,
                    )
            )
        CompositionLocalProvider(LocalRippleConfiguration provides customFocusRingConfiguration) {
            val interactionSource = remember { MutableInteractionSource() }
            // Custom clickable element using inset focus ring with custom focusRingShape
            Box(
                modifier =
                    Modifier.size(120.dp)
                        .background(
                            MaterialTheme.colorScheme.surfaceVariant,
                            RoundedCornerShape(12.dp),
                        )
                        .clickable(
                            interactionSource = interactionSource,
                            indication = ripple(focusRingShape = RoundedCornerShape(12.dp)),
                            onClick = {},
                        ),
                contentAlignment = Alignment.Center,
            ) {
                Text("Custom Focus Ring")
            }
        }
    }
}

DynamicColorRippleSample

@Preview
@Sampled
@Composable
fun DynamicColorRippleSample() {
    var isSelected by remember { mutableStateOf(false) }
    val primaryColor = MaterialTheme.colorScheme.primary
    val secondaryColor = MaterialTheme.colorScheme.secondary
    // ColorProducer reads state during draw, avoiding recomposition when the ripple color changes
    val colorProducer =
        remember(primaryColor, secondaryColor) {
            ColorProducer { if (isSelected) primaryColor else secondaryColor }
        }
    val interactionSource = remember { MutableInteractionSource() }

    Box(
        modifier =
            Modifier.size(100.dp)
                .background(MaterialTheme.colorScheme.surfaceVariant)
                .clickable(
                    interactionSource = interactionSource,
                    indication = ripple(color = colorProducer),
                    onClick = { isSelected = !isSelected },
                ),
        contentAlignment = Alignment.Center,
    ) {
        Text(if (isSelected) "Selected" else "Unselected")
    }
}