Is there a way to add a gradient to the `colorFilt...

# compose

[Daniel Souza Bertoldi]

Is there a way to add a gradient to the colorFilter of an Image composable?

Best way I could find online was to use the drawWithCache { } modifier and call drawRect, but that doesn’t work the way I want to 😕 It creates a rect behind the image, not in the image. I’ve tried all the blend modes available and none worked. Am I missing something here?

[romainguy]

You need to create a graphicsLayer with an offscreen composition strategy

[romainguy]

And use drawWithContent to draw the content then your rectangle

[romainguy]

Using SrcIn as the blend mode

[romainguy]

Alternatively you could do it without the graphics layer but you must make sure your image is loaded as ALPHA_8 and you'd have then to use the native graphics objects to set your gradient on the paint

[Daniel Souza Bertoldi]

Damn, a bit more complex than I thought. Alright, cool! Thank you, I’ll try this 😄

[Daniel Souza Bertoldi]

Nice, the following modifiers worked like a charm:

.graphicsLayer { alpha = 0.99F }
.drawWithContent {
    drawContent()
    drawRect(
        brush = Brush.horizontalGradient(
            0.3f to LightGrey,
            1F to Color.Transparent,
        ),
        blendMode = BlendMode.SrcIn,
    )
}

Thanks once again!

[romainguy]

Yep that’s exactly it

[romainguy]

not with Compose 1.4 you don’t need the alpha=0.99f trick

[romainguy]

you can set the composition strategy instead

[romainguy]

if you must set alpha, use 254.0f/255.0f instead

[Daniel Souza Bertoldi]

oh alright, now I understood what you said in your first reply. I didn’t know about this compositeStrategy parameter, I changed the alpha to this:

.graphicsLayer { compositingStrategy = CompositingStrategy.Offscreen }

Works too, thanks!

[romainguy]

Yay!

[dewildte]

Woah