Glassmorphism/Blur effect in part of the image with Jetpack Compose?

Question

I need to make a card (or other type of layout) with the design you can see below.

The problem: I don't know how to apply this kind of glassmorphism/blur effect to the bottom of the image where the text is.

I leave you the code that I have done below to make it easier. For the tests I'm using an image taken from Google, I think it has no influence.

@Preview
@Composable
fun BoxCard() {
    Card(elevation = 0.dp, shape = RectangleShape) {
        Box(contentAlignment = Alignment.BottomCenter) {
            Image(
                painter = painterResource(id = R.drawable.scale),
                contentDescription = null,
                contentScale = ContentScale.Fit
            )

            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(45.dp)
                    .background(Color.White)
            ) {
                Column(modifier = Modifier.padding(horizontal = 12.dp, vertical = 4.dp)) {
                    Text(text = "Title Title")
                    Text(text = "Subtitle Subtitle")
                }
            }
        }
    }
}

https://medium.com/@jahongir9779/glassmorphism-in-jetpack-compose-for-scrolling-item-b0c5824b55d0 — CommonsWare, Oct 25 '22 at 12:22
@CommonsWare I tried that, but I was not able to make it work. Can you help me? — R0ck, Oct 25 '22 at 14:19
Never thought i'd say that but Jetpack compose needs to learn from CSS and provide a backdrop-filter — Arnaud JEZEQUEL, Dec 09 '22 at 10:31

score 0 · Answer 1 · answered Jan 23 '23 at 16:07

0

there is a blur modifier, but works only with Android 12 and above.

Modifier.blur(radius = 4.dp)

answered Jan 23 '23 at 16:07

puszkinowski

11
2

Glassmorphism/Blur effect in part of the image with Jetpack Compose?

1 Answers1