Ripple effect is missing in Jetpack Compose

Question

I've made a simple app. It has two screens: onBoarding and homeScreen:

@Composable
fun DigitalBanking() {
    var shouldShowOnBoarding by rememberSaveable { mutableStateOf(true) }
    if (shouldShowOnBoarding) {
        OnBoardingScreen {
            shouldShowOnBoarding = false
        }
    } else {
        MainScreen()
    }
}


@Composable
fun OnBoardingScreen(
    onClick: () -> Unit
) {

    Surface {
        Column(
            modifier = Modifier.fillMaxSize(),
            verticalArrangement = Arrangement.Top,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Box(
                modifier = Modifier
                    .fillMaxSize()
                    .background(color = MaterialTheme.colors.onBackground)
            )
            {
                Image(
                    painter = painterResource(id = R.drawable.starting_screen),
                    contentDescription = null,
                    modifier = Modifier
                        .fillMaxSize()
                        .padding(bottom = 160.dp)
                )
                Column(
                    modifier = Modifier
                        .fillMaxSize()
                        .padding(horizontal = 16.dp),
                    verticalArrangement = Arrangement.Bottom,
                    horizontalAlignment = Alignment.Start,
                ) {
                    Text(
                        text = stringResource(id = R.string.on_boarding_moto),
                        color = MaterialTheme.colors.background,
                        style = Typography.h4,
                    )
                    Text(
                        modifier = Modifier
                            .padding(vertical = 8.dp),
                        text = stringResource(id = R.string.on_boarding_lure),
                        color = MaterialTheme.colors.onSecondary,
                        fontFamily = FontFamily(Font(R.font.plus_jakarta_sans)),
                    )
                    Button(
                        modifier = Modifier`enter code here`
                            .padding(vertical = 8.dp)
                            .fillMaxWidth(),
                        colors = ButtonDefaults.buttonColors(backgroundColor = ArcTransferColor),
                        onClick = onClick,
                    ) {
                        Text(
                            text = "Get Started!",
                            style = MaterialTheme.typography.button,
                        )
                    }
                }
            }
        }
    }
}

The flow is: when I'm on the onBoarding screen I can tap only one button "Get Started" and the Home screen is opened. It works fine, But there is no ripple effect when I tap this button. Could you advise me what to do, please?

Answer 1

you can make an extension function of modifier for no ripple effect

fun Modifier.noRippleEffect( onClick: () -> Unit) = composed {
    clickable(
        interactionSource = remember { MutableInteractionSource() },
        indication = rememberRipple(radius = 0.dp)
    ) {
        onClick()
    }
}

And use it like this

Box(
        modifier = Modifier
            .padding(horizontal = 10.dp)
            .noRippleEffect {
                onTitleUpdate(title)
            }
    ) {
}

Answer 2

You can use clickable property of Modifier and provide interactive ripple effect like this:

             Button(
                modifier = Modifier`enter code here`
                        .padding(vertical = 8.dp)
                    .fillMaxWidth()
                    .clickable(
                        interactionSource = MutableInteractionSource(),
                        indication = rememberRipple(bounded = false, color = ColorPrimary),
                        onClick = {
                            /*TODO*/
                        }
                    ),
                colors = ButtonDefaults.buttonColors(backgroundColor = ArcTransferColor),
                onClick = /*onClick--->You can remove this now*/,
            ) {
                Text(
                    text = "Get Started!",
                    style = MaterialTheme.typography.button,
                )
            }