Feature request: Allow setting a brush as backgroundColor

[vo-QM]

HazeEffectScope.backgroundColor currently only accepts a solid Color. In many UI designs (e.g. iOS-style frosted bars, gradient overlays, brand tints) a gradient or other Brush is required behind the blur.

Please support backgroundColor to take a Brush (gradient, image shader, etc.) in addition to a solid Color.

[chrisbanes]

I'm not sure about this.

To give some context, the backgroundColor is purely there to act as a fallback for content which has a transparent background (text, etc). To be honest, I'd love to get rid of this feature.

You can add your own background content by adding some content (an Image or whatever), and then adding a hazeSource to it, with an appropriate zIndex.

https://chrisbanes.github.io/haze/latest/usage/#zindex

Let me know if that works for you (or not).

[vo-QM]

Thanks for your quick response!
This helps. I was able to add my own background content with a brush.

On another note: I require to apply a tint to the blurred area, but only if it is blurring something. As I understood, using zIndex or canDrawArea I should be able to turn the blurring and tinting on and off, depending to which composable I am scrolling in my LazyColumn. Unfortunately, in my experiments, whenever I try to blur any element, the tint is always visible.

Do you know what the issue could be?

Show experimental code

@Composable
fun Screen() {
    val hazeState = rememberHazeState(blurEnabled = true)

    Box(
        modifier = Modifier
            .fillMaxHeight()
            .fillMaxWidth()
            .background(Color.Gray),
    ) {
        Box(
            Modifier
                .height(20.dp)
                .fillMaxWidth()
                .align(Alignment.Center)
                .background(Color.Gray)
                .hazeEffect(hazeState) {
                    canDrawArea = { area ->
                        area.key != "foo"
                    }
                    tints = listOf(HazeTint(color = Color(0x4D000000)))
                    blurRadius = 10.dp
                },
        ) { }
        LazyColumn(
            modifier = Modifier
                .background(Color.Transparent)
                .align(Alignment.Center)
                .height(200.dp),
        ) {
            item {
                Text(
                    modifier = Modifier.hazeSource(hazeState, key = "foo"),
                    text = "This should not blur"
                )
            }
            item {
                Text(
                    modifier = Modifier.hazeSource(hazeState),
                    text = "This should blur"
                )
            }
            repeat(7) { // the next 7 items should not blur
                item {
                    Text(
                        modifier = Modifier.hazeSource(hazeState, key = "foo"),
                        text = "This should not blur"
                    )
                }
            }
            item {
                Text(
                    modifier = Modifier.hazeSource(hazeState),
                    text = "This should blur"
                )
            }
            repeat(2) {
                item {
                    Text(
                        modifier = Modifier.hazeSource(hazeState, key = "foo"),
                        text = "This should not blur"
                    )
                }
            }
        }
    }

[chrisbanes]

That isn't a use case I've really thought about, but your code looks like it should work.

I'll try your sample code and see where the issue is.

[github-actions]

This issue is stale because it has been open for 21 days with no activity.