Disabling ripple effect on buttons jetpack compose

Issue

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

enter image description here

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

Solution

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

enter image description here

Answered By – Thracian

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published