Disabling ripple effect on buttons jetpack compose-CodePudding

I have seen that we can disable the ripple effect of a view with the clickable(interactionSource, indication) inside for example a row or column but my question is that if we can disable it from a Button or FloatingActionButton

I see that FloatingActionButton has an interactionSource attribute and I have tried this

FloatingActionButton(
        modifier = Modifier
            .size(40.dp),
        onClick = {
            buttonState = when (buttonState) {
                ButtonState.PRESSED -> ButtonState.UNPRESSED
                ButtonState.UNPRESSED -> ButtonState.PRESSED
            }
        },
        interactionSource = remember {
            MutableInteractionSource()
        })

this is not working to disable the ripple effect.

Then I have tried with the indication modifier like this

FloatingActionButton(
        modifier = Modifier
            .size(40.dp)
            .indication(
                interactionSource = remember {
                    MutableInteractionSource()
                },
                indication = null
            ),
        onClick = {
            buttonState = when (buttonState) {
                ButtonState.PRESSED -> ButtonState.UNPRESSED
                ButtonState.UNPRESSED -> ButtonState.PRESSED
            }
        })

also is not working, and then last thing I tried is adding the .clickable(...) in the modifier of the Fab button but I think that is pointless since the button has its own onClick event.

All the cases above yields to this

Is there anyway from any Button to disable its ripple effect without adding a Column or Box with a clickable attribute into its modifier ?

CodePudding user response：

You can change ripple o by providing RippleTheme

private class CustomRippleTheme : RippleTheme {
    @Composable
    override fun defaultColor(): Color = Color.Unspecified

    @Composable
    override fun rippleAlpha(): RippleAlpha = RippleAlpha(
        draggedAlpha = 0f,
        focusedAlpha = 0f,
        hoveredAlpha = 0f,
        pressedAlpha = 0f,
    )
}

Demo

@Composable
private fun RippleDemo() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(50.dp)
    ) {

        Button(onClick = { /*TODO*/ }) {
            Text("Button with ripple", fontSize = 20.sp)
        }

        Spacer(Modifier.height(20.dp))

        FloatingActionButton(onClick = { /*TODO*/ }) {
            Icon(imageVector = Icons.Filled.Add, contentDescription = null)
        }
        Spacer(Modifier.height(20.dp))
        CompositionLocalProvider(LocalRippleTheme provides CustomRippleTheme()) {
            Button(onClick = { /*TODO*/ }) {
                Text("Button with No ripple", fontSize = 20.sp)
            }
            Spacer(Modifier.height(20.dp))

            FloatingActionButton(onClick = { /*TODO*/ }) {
                Icon(imageVector = Icons.Filled.Add, contentDescription = null)
            }
        }
    }
}

Result

CodePudding user response：

A Button, internally, is just a surface with modifications applied to it to make it clickable. It has a default indication set within the implementation, hence cannot be "turned off" at the calling site.

Just pull up the source code and remove the indication, storing the resultant inside a new Composable.

Just do a quick Ctrl Left Click on the text "Button" in Studio, and it'll take you there.