https://kotlinlang.org logo
#compose
Title
# compose
p

Piotr Prus

01/17/2023, 9:34 AM
I am trying to make Frosty glass effect in compose using RenderEffect and shaders. There is a series of articles by Chet Haase: https://medium.com/@chethaase/blurring-the-lines-4fd33821b83c, but I cannot make it work in compose. Do anyone has any experience with that? The example code in thread 🧵
My attempt of doing blur in compose:
Copy code
Box(modifier = Modifier.fillMaxSize()) {
        Image(
            painter = painterResource(id = R.drawable.picture1),
            contentDescription = "",
            modifier = Modifier.fillMaxSize(),
            contentScale = ContentScale.FillHeight
        )

        Box(modifier = Modifier
            .fillMaxWidth()
            .fillMaxHeight()
            .align(Alignment.Center)
            .graphicsLayer {
                if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.TIRAMISU) {
                    val blur = RenderEffect.createBlurEffect(30f, 30f, Shader.TileMode.CLAMP)
                    val shader = RenderEffect.createRuntimeShaderEffect(FROSTED_GLASS_SHADER, "inputShader")
                    renderEffect = RenderEffect.createChainEffect(blur, shader).asComposeRenderEffect()
                }
            }
        )
    }
The box with graphicsLayer is not displayed OR do not have any effect on the Image. When I apply the blur effect on Image, it works, but I am trying to blur just a part of the image (background), not the whole thing.
z

Zoltan Demant

01/17/2023, 9:40 AM
Please see my thread here, the end result is pretty much exactly like your screenshots!
p

Piotr Prus

01/17/2023, 9:52 AM
Thank @Zoltan Demant for posting this. The trick that you are using here is makign the bitmap, bluring it and apply on the view. With RenderEffect that is no longer needed, however RenderEffect support starts from API 31 😛 I do not care about minSDK, cause I am just experimenting. I am not interested in blurring the whole composable. I am trying to make Frosty glass effect on part of the screen only. Something like this:
z

Zoltan Demant

01/17/2023, 10:06 AM
Ah, gotcha. Have you tried playing with
Modifier.blur
then? It has some code that reminds me of yours, might be useful 😃
m

mgrazianodecastro

01/17/2023, 6:14 PM
do you have a screenshot of your final result?
I'm also trying to reproduce the article, but with my own examples. With hope, I will not be a completely noob in the field
p

Piotr Prus

01/18/2023, 8:40 AM
The
Modifier.blur
works for the composable that use that modifier. It not affects the composable underneath. That is why you need to use rendereffect, but I have troubles applying it in composable 😞
55 Views