LocalRippleConfiguration

RippleConfigurationOpacitySample

@Preview
@Sampled
@Composable
fun RippleConfigurationOpacitySample() {
    // Use opacity-based focus at theme level
    CompositionLocalProvider(
        LocalRippleThemeConfiguration provides RippleDefaults.OpacityFocusThemeConfiguration
    ) {
        Column {
            // Custom ripple color provided to a subtree via LocalRippleConfiguration
            val customRippleConfiguration =
                RippleConfiguration(
                    // explicit opacity focus configuration object
                    focus = RippleConfiguration.Focus.Opacity,
                    color = Color.Magenta,
                )
            CompositionLocalProvider(LocalRippleConfiguration provides customRippleConfiguration) {
                Button(onClick = {}) { Text("Magenta Ripple Button") }
            }

            Spacer(Modifier.height(16.dp))

            // Disabling ripples entirely for a subtree by providing null
            CompositionLocalProvider(LocalRippleConfiguration provides null) {
                Button(onClick = {}) { Text("No Ripple Button") }
            }
        }
    }
}

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")
            }
        }
    }
}