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

user_9260623 0
Viewed 773

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?

ripple-effect android-jetpack-compose android-button android
3 Answers

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.

user_75399270

Wrap your Box with Material Theme to get nice ripple effect

Admin1

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.

user_158808650
Related