How can I blur the persons legs? Code in thread

# compose

[Colton Idle]

How can I blur the persons legs?

Code in thread

[Colton Idle]

This is what I currently have in code

Box(modifier = Modifier.background(Color.White).height(200.dp).width(100.dp)) {
    Image(
        painterResource(R.drawable.stick_figure),
        contentDescription = null,
        modifier = Modifier.height(100.dp),
        contentScale = ContentScale.FillBounds,
        colorFilter = ColorFilter.tint(Color.Black))
    Box(
        modifier =
            Modifier.height(150.dp)
                .width(100.dp)
                .background(Color(0xE6FFF2CC))
                .align(BottomCenter)) {
      Text(text = "Something Cool", Modifier.align(Center), color = Color.Black)
    }
  }

[Colton Idle]

Where do I add the blur modifier to blur the overlap of the legs and the light yellow color?

[Colton Idle]

If I add it to the box I get this

Box(modifier = Modifier.background(Color.White).height(200.dp).width(100.dp).blur(10.dp)) {

[Sarankumar N]

Hi @Colton Idle, What about take the text out of the inner box and blur that inner box?

[Colton Idle]

Added blur to the inner box like so

Box(
    modifier =
    Modifier.height(150.dp)
        .width(100.dp)
        .background(Color(0xE6FFF2CC))
        .align(BottomCenter)
        .blur(10.dp)) {
    Text(text = "Something Cool", Modifier.align(Center), color = Color.Black)
}

and this is the result. My persons legs are NOT blurred, but the text is blurred. So this is the opposite of what I want.

[John Nichol]

You could do it with stacked composables with the text on the top - so move it out of the inner box

[Colton Idle]

I've tried stacking boxes. But still can't get the lower body of the person to blur.

[Albert Chang]

I think you need to split the image and blur the lower part. RenderEffect can only be applied to the entire graphics layer and I don't think you can render an image into two layers.

[Albert Chang]

Or you can probably use two Image composables rendering the different parts of an image.

[Colton Idle]

Split the image huh? I guess that might be my only choice since getting two different sections of an image from my backend team wont be feasible.

[Colton Idle]

why does ios make this so easy 😭

[Colton Idle]

So something like this in compose isn't easily doable with just the blur() modifier?

https://github.com/mmin18/RealtimeBlurView/raw/master/imgs/1.gif▾

[Chris Sinco [G]]

@Nader Jawad might have some insight. It does seem the RenderEffect limitation is the issue where it blurs the content and not what’s behind it or the background layer necessarily

[Chris Sinco [G]]

Interestingly the first thing I reached for is how this is done is CSS. The blur filter effect actually does the same as the blur modifier in this case. I think the functionality you’re looking for is what the backdrop-filter does: https://css-tricks.com/almanac/properties/b/backdrop-filter/

[Chris Sinco [G]]

Though I don’t think we have this capability yet in Compose, and as a designer I can’t speak to if it’s technically possible. But I can understand the effect you’re trying to achieve.

[Nader Jawad]

RenderEffect blur only applies to the content of the graphicsLayer it is applied on. That it it will not blur content behind automatically

[Nader Jawad]

To achieve this effect you could draw the asset clipped to the upper half and have another composable draw the bottom half with a different clip rect and apply the blur on that composable

[Colton Idle]

Okay. No idea how that would work, but I guess that gives me some direction.

[Colton Idle]

But that would only work on "static" blurs right?

[Colton Idle]

For example. My designer wants me to build this bottom navigation that is transparent (like spotify) but also blurs content under it. The iOS team built it so now its on me to try to come up with something similar as well.

[Colton Idle]

But from what @Nader Jawad has said... it seems like bluring content as it scrolls is 100% not possible? Whereas my "simple" example should be possible with some clipping?

[Nader Jawad]

I can't tell from the Spotify screenshot which UI you're trying to recreate

[Nader Jawad]

I didn't notice any blurring there but maybe I am missing something

[Colton Idle]

No blurring in that screenshot, just saying that my design team wants me to build the spotify transparent bottom nav PLUS blur content as it scrolls under.

[Chris Sinco [G]]

Right. This has become a common bottom nav bar pattern in iOS

Image from iOS.mov

[Colton Idle]

Bah.

[Colton Idle]

Dang iOS and their blurs everywhere

[Colton Idle]

Okay. I'm giving up in the bottom nav blur. Maybe I'll write a feature request.

[Colton Idle]

I'll focus on somehow trying to crop.

[Colton Idle]

Filed an issue. Let's see how possible this is... or if it just gets shut down completely. 😂
https://issuetracker.google.com/issues/203772215

[Chachako]

So something like this in compose isn’t easily doable with just the blur() modifier?

https://github.com/mmin18/RealtimeBlurView/raw/master/imgs/1.gif▾

So, if we can screenshot the content behind it, we can do this blur easily, but unfortunately, I can’t find any way to screenshot the content behind the widget in real time. 😪