Bug: Edges of blur radius are not blurred

[durkester]

The greater the blur radius, the less of the edge of the top haze state is blurred. For example, I'm using 40.dp so the hazeChild text is readable, but the blurring algorithm isn't accounting for edges within that 40.dp section. Or at least not fully.

[chrisbanes]

No code? ✅
No screenshot? ✅

How do you expect anyone to reply to this?

FYI: the ‘blur algorithm’ very much does work up to edges, but it sounds like you’re not setting an appropriate background color.

[durkester]

Good point. I guess I figured it was a known issue or there was a work around I couldn't find.

val hazeState = remember { HazeState() }

    Box(

    ) {
        Image(
            painter = painterResource(id = R.drawable.map_light_full),
            contentDescription = "icon",
            contentScale = ContentScale.FillBounds,
            modifier = Modifier
                .fillMaxWidth(fraction = 1f)
                .fillMaxHeight(fraction = 1f)
                .haze(hazeState)
        )

        Box(
            Modifier
                .fillMaxSize()
                .hazeChild(state = hazeState) {
                    backgroundColor = Color.White.copy(alpha = 0f)
                    tints = listOf(
                        HazeTint(Color.White.copy(alpha = 0.0f))
                    )
                    blurRadius = 40.dp
                    noiseFactor = 0.0f
                }
        ) {

        }
    }

^Here is 80.dp blur radius with a transparent background to show that the edges are not blurred.

^And 10.dp to show the difference.

^Yes making the background white when the average blur is a light color works, but how do you handle it when the background color is dynamic and could be dark?

I tried looking if the HazeState exposes like an average color or something to set as the background but couldn't find anything.

And making the background black or any other color doesn't fix this issue.


You get the edges in the background color.

Compared with my Honor Magic V3 which has a notification shade that blurs the background and has a nice even blur across the view.

I found a decent workaround of layering 2 hazeChilds

.hazeChild(state = hazeState1) {
    backgroundColor = gray
    tints = listOf(
        HazeTint(black.copy(alpha = 0.15f))
    )
    blurRadius = 20.dp
    noiseFactor = 0.0f
}
.hazeChild(state = hazeState1) {
    backgroundColor = Color.Transparent
    tints = listOf(
        HazeTint(black.copy(alpha = 0.15f))
    )
    blurRadius = 60.dp
    noiseFactor = 0.0f
}

Probably not great for performance but the top's background color pretty much doesn't matter as the lower blurRadius blurs the background enough to average the background color to blend in well with the bottom hazeChild.

[chrisbanes]

The answer is simple, don't use a transparent backgroundColor. A blurring algorithm can only work with pixels which have a value, and transparent pixels have no value.

[durkester]

So you have no answer to edges not matching?

[durkester]

These are solid colors

[chrisbanes]

"No answer" 🙄. Feel free to go and implement this yourself.