Button doesn't have ripple effect on clicking (Jetpack Compose)

Question

AFAIK, the buttons created with Jetpack compose should have ripple effect on clicking, by default. But my button doesn't show ripple effect on clicking. Below is code for my button:

 BoxWithConstraints(modifier = Modifier
                .constrainAs(button) {
                    top.linkTo(glTopButtonProceed)
                    start.linkTo(glLeftBtn)
                    end.linkTo(glRightBtn)
                    width = Dimension.fillToConstraints

                }) {

                Button(
                    onClick = {
                        navController.navigate("autosave_screen")
                    },
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(if (screenHeight>=700.dp)
                            50.dp
                        else
                            with(LocalDensity.current) {dimensionResource(id = R.dimen._35sdp)}) ,



                    colors = if (text.text != "" && text.text.length == 4)
                        ButtonDefaults.buttonColors(backgroundColor = colorResource(id = R.color.bright_green))
                    else
                        ButtonDefaults.buttonColors(backgroundColor = colorResource(id = R.color.gray))

                ) {
                    Text(
                        "Proceed", color = colorResource(id = R.color.dark_blue),
                        fontSize =
                        if (screenHeight>=700.dp)
                            19.sp
                        else
                            with(LocalDensity.current) {dimensionResource(id = R.dimen._12sdp).toSp()},
                        fontFamily = FontFamily(Font(R.font.poppins_medium)),

                        textAlign = TextAlign.Center,
                        modifier = Modifier.align(Alignment.CenterVertically)
                    )

                }

            }
        }

How do I enable ripple effect for my button?

See I am almost certain that it is because of the custom background that you are setting. The built-in ripple might not be able to infer the colour it should produce. — Richard Onslow Roper, Jun 21 '21 at 10:51
The ripple effect appears when the background of button is gray, not when it is bright green. I think MARSK you are right. — Sparsh Dutta, Jun 21 '21 at 10:57
Gabriele, ripple doesn't appear for bright green background both when enabled is true and false. — Sparsh Dutta, Jun 21 '21 at 10:58
@SparshDutta it is quite strange. when the background is gray the button should be disabled. — Gabriele Mariotti, Jun 21 '21 at 12:05
Gabriele, I haven't used the 'enabled' parameter. My bad, I should have removed this line "enabled = (text.text != "" && text.text.length == 4)", from question. Updating the question. — Sparsh Dutta, Jun 21 '21 at 12:09
Also, I tried removing all background colors from the button. Ripple effect seems to appear only when the button is 'non-functional', i.e doesn't meet the criteria to go to next screen. When the button is 'functional', i.e clicking on it goes to next screen, ripple effect doesn't appear. — Sparsh Dutta, Jun 21 '21 at 12:13
@Marsk and Gabriele, The ripple effect is produced when the color of button is gray, but not when the color of button is bright green. Is there any way to produce ripple effect even with bright green color of button? — Sparsh Dutta, Aug 13 '21 at 07:40

score 1 · Answer 1 · answered Jun 21 '21 at 13:52

1

Instead of calling onClick on Button can you try to use click on Modifier click

modifier = Modifier .clickable(
 interactionSource = remember { MutableInteractionSource() },
    indication = rememberRipple(bounded = false),
    onClick = {}
        )

You can customise the button ripple also.

answered Jun 21 '21 at 13:52

Rajshekhar

571
5
9

1

The clickable modifier doesn't work in the Button. – Gabriele Mariotti Jun 21 '21 at 14:01

score 0 · Answer 2 · edited Jun 21 '21 at 15:07

0

Wrap your Box with Material Theme to get nice ripple effect

edited Jun 21 '21 at 15:07

Dharman

30,962
25
85
135

answered Jun 21 '21 at 15:01

score 0 · Answer 3 · answered Aug 13 '21 at 07:57

0

If you want to impart specific colors to your button, try instead using Modifier.fillMaxSize().background(...) on theText Composable instead. Don't use that colors parameter of Button.

answered Aug 13 '21 at 07:57

Richard Onslow Roper

5,477
2
11
42

Didn't work. 2 problems : 1. Text composable inside button didn't cover the entire button, there was still some thick border surrounding the Text composable in button. 2. Ripple effect happened only in the surrounding thick border – Sparsh Dutta Aug 13 '21 at 09:01

Button doesn't have ripple effect on clicking (Jetpack Compose)

3 Answers3