So, our UX has decided that for tab rows, they want to blur the left and/or right edges when there i...

# compose

[mattinger]

So, our UX has decided that for tab rows, they want to blur the left and/or right edges when there is additional tabs to scroll to that are not currently visible on screen. Detecting whether you need the blur on each side is pretty easy if i’m using a LazyRow (or even a Row with a horizontalScroll). The problem is producing the blurred edge. There is a modifier blurring, but it’s a circular model that really wouldn’t work well if only one edge is to be blurred. Also, it works only on android 12 from what i understand. Does anyone have any recommendations on how to apply a blurred effect to a section of a lazy row?

[Kirill Grouchnikov]

Maybe crop on one side after the blur?

[mattinger]

@Kirill Grouchnikov I’m not really sure what you mean. Honestly, i’d be happy if the blur modifier (either the built in one or the one from skydoves) would support an offset. I think the left + right blue could easily be accomplished by making the radius the right size relative to the lazy row and have it blur both. but the individual ones i’m not sure.

[Kirill Grouchnikov]

Can you attach a design mock showing the target look?

[mattinger]

Something like this. In this particular case, we’re scrolled all the way to the right.

[mattinger]

but it would apply for the other direction as well (scrolled all the way left) as well as if we’re in the middle.

[Kirill Grouchnikov]

Doesn't look like blur. More of a fade out of the background.

[mattinger]

Agreed.

[MR3Y]

You can take a look at BasicMarqueeWithFadedEdgesSample https://cs.android.com/androidx/platform/tools/dokka-devsite-plugin/+/master:testDat[…]ion/samples/BasicMarqueeSamples.kt;l=81?q=Marquee&ss=androidx for inspiration

[mattinger]

I tried something like this:

graphicsLayer { alpha = 0.99F }
        .drawWithContent {
            val colors = listOf(Color.White.copy(alpha = 0f), Color.White)
            drawContent()
            drawRect(
//                topLeft = Offset(0f, 0f),
                size = Size(width = width.toPx(), height = size.height),
                brush = Brush.horizontalGradient(colors),
                blendMode = BlendMode.DstIn
            )
        }

But the second i set an explicit size, it just basically creates a box where everything in the box is faded, and everything outside of it is not. If I don’t set one, i get a full fade across the entire control.

[mattinger]

Thanks @MR3Y. This is perfect. I guess what i was missing is the explicit startX and startY on the gradient