How to set ClipToBounds "false" in JetpackCompose "row" or "column"

Question

    Row(modifier = Modifier.height(58.dp).fillMaxWidth().notClip()) {
                Icon(
                    painter = painterResource(id = R.drawable.ic_launcher_foreground),
                    contentDescription = null,
                    modifier = Modifier
                        .height(100.dp)
                        .width(100.dp)
                        .clip(shape = CircleShape)
                    .clickable(
                        onClick = {
                        Toast
                            .makeText(
                                this@MainActivity,
                                "YOU clicked android button",
                                Toast.LENGTH_SHORT
                            )
                            .show();
                    },
                    ))
            }

In my above code, im trying to show ripples of the button outside the row constraints (Just like in github-mobile app's bottom navigation bar; when you click a button in the bottomNavigation bar it shows ripple outside the BottomNavigation bar) i.e height(60.dp), however its not working. I researched a bit and created own extension function as

fun Modifier.notClip()= graphicsLayer(clip = false) ;

and use it on the Row's modifier to disable clipping, but the Row still clips the ripple that is to be shown outside the Row's constraints. Someone help!, `

user_2016562 · Answer

In the clickable modifier you can specify the Indication parameter. You can use the default ripple defined by rememberRipple changing the bounded parameter.

    Row(
        modifier = Modifier.height(58.dp).fillMaxWidth().background(Color.Yellow)
    ) {
        Icon(
            painter = painterResource(id = R.drawable.ic_launcher_foreground),
            contentDescription = null,
            modifier = Modifier
                .clickable(
                    interactionSource = interactionSource,
                    indication = rememberRipple(
                        //radius= 300.dp,
                        bounded = false),
                    onClick = { /* .. */ })
                .height(100.dp)
                .width(100.dp)
                .clip(shape = CircleShape)

        )
    }

How to set ClipToBounds "false" in JetpackCompose "row" or "column"

1 Answers