I am trying to make Frosty glass effect in compose using RenderEffect and shaders. There is a series...

# compose

[Piotr Prus]

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 🧵

[Piotr Prus]

My attempt of doing blur in compose:

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

[Piotr Prus]

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.

[Zoltan Demant]

Please see my thread here, the end result is pretty much exactly like your screenshots!

[Piotr Prus]

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:

[Zoltan Demant]

Ah, gotcha. Have you tried playing with Modifier.blur then? It has some code that reminds me of yours, might be useful 😃

[mgrazianodecastro]

do you have a screenshot of your final result?

[mgrazianodecastro]

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

[Piotr Prus]

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 😞