A modern programming language that makes developers happier.

kotlinlang

Is there any possibility to add an alpha to a lazyRow component, so for example 30% of width will have some level of transparency, and that will change dynamically on user scroll? I have tried modifier.background, adding a box with alpha on top of the lazyRow, but this things do not modify the child views of Row. These are additional composables that render in background or in front. Picture in thread :thread:

I do think the only way to do this is using new RenderEffect API, but I have no idea how to use it in compose. Anyone has any example?

```Modifier
    .drawWithCache {
        val brush = Brush.horizontalGradient(
            0f to Color.Transparent,
            0.35f to Color.Black,
            0.65f to Color.Black,
            1f to Color.Transparent,
        )
        onDrawWithContent {
            drawContent()
            drawRect(brush = brush, blendMode = BlendMode.DstIn)
        }
    }```

Thanks for reply! As I understand this snippet, you are drawing a RECT on top of a Row with black and transparent colors. This will not add a dynamic alpha to my child items as presented on the screen

DstIn will discard the colors in the gradient and only multiply the alpha through

Screen Recording 2023-03-17 at 15.53.57.mov

You also need to add `.graphicsLayer(compositingStrategy = CompositingStrategy.Offscreen)` (or `.graphicsLayer(alpha = 0.99f)` if you are using stable version) before `.drawWithCache`.

yes, without being composited separately, the alpha multiply applies all the way through

if you wanted to use a RenderEffect, you could
```val shader = remember {
    RuntimeShader(
        """
        uniform shader image;
        uniform float width;
        half4 main(vec2 coords) {
            float alpha = saturate((0.5 - abs(coords.x / width - 0.5)) / 0.35);
            half4 color = image.eval(coords);
            return half4(color.rgb, color.a * alpha);
        }
        """.trimIndent()
    )
}
var width by remember { mutableStateOf(0) }
Modifier
    .onSizeChanged { width = it.width }
    .graphicsLayer {
        shader.setFloatUniform("width", width.toFloat())
        renderEffect = RenderEffect.createRuntimeShaderEffect(shader, "image").asComposeRenderEffect()
    }```
but RuntimeShader is Android 13+ and it really doesn't seem worthwhile to choose to go down that path

Thank you so much. I added the `.graphicsLayer(compositingStrategy = CompositingStrategy.Offscreen)` and it works!! :tada: