LocalRippleConfiguration

RippleConfigurationOpacitySample

@Preview
@Sampled
@Composable
fun RippleConfigurationOpacitySample() {
    Column {
        // Custom ripple color provided to a subtree via LocalRippleConfiguration
        val customRippleConfiguration = RippleConfiguration(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")
            }
        }
    }
}