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?

an interesting case: if I leave a button parameter "onClick" empty - ripple is ok — Rustam, Jul 01 '22 at 03:57
when i copy your code, there is no problem about ripple effect. I wonder if you have a global code that affects ripple. — commandiron, Jul 01 '22 at 06:56
I've made brand new project with just two composable functions below (DigitalBanking and OnBoardingScreen) - the result is the same, no ripple — Rustam, Jul 01 '22 at 10:08
Or maybe you have any other Idea how to make onBoarding screen (without any topAppBar and bottomAppBar) with one button, when user tap on it he goes to the Profile screen (it has topAppBar and bottomAppBar) — Rustam, Jul 01 '22 at 15:59

Megh · Accepted Answer · 2022-07-12T06:32:59.370

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,
                )
            }

Jayant Kumar · Answer 2 · 2022-12-03T04:33:39.063

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)
            }
    ) {
}

Ripple effect is missing in Jetpack Compose

2 Answers2