using the compose `drawWithContent` is it possible to implement some kind of alpha masking such that...

# compose

[czuckie]

using the compose drawWithContent is it possible to implement some kind of alpha masking such that the contents of say a Box with the drawWithContent call will fade to transparency? 🧵

[czuckie]

I kind of want to be able to have an Image that has say 32.dp at the bottom that fades like a linear gradient to 0 alpha

[czuckie]

It looks like it may be possible using Modifier.paint(...) with a vertical gradient brush but I can't seem to get it to work 😞

[Zach Klippenstein (he/him) [MOD]]

The best low-level way to do this is with the graphicsLayer {} modifier. It will only animate the layer’s alpha which is much cheaper than actually redrawing.

[Zach Klippenstein (he/him) [MOD]]

But the higher level transition animation APIs also support fade transitions.

[czuckie]

Sorry I may not have explained it very well, I want to accomplish something like:

[czuckie]

where the source image is full opacity, but the composable fades it to full transparency.

I've tried Modifier.paint, I've tried Modifier.drawWithContent, I'm trying a custom painter, but I don't know how to mask the image with a linear gradient of some description

[czuckie]

I figured it out!!!

I had to use the graphicsLayer to set the composition strategy to off screen.

Basically:

https://developer.android.com/jetpack/compose/graphics/draw/modifiers#compositing-strategy-offscreen

[Zach Klippenstein (he/him) [MOD]]

Ah yea, offscreen compositing and then you can composite an alpha gradient. We also have a sample of doing that here: https://cs.android.com/androidx/platform/tools/dokka-devsite-plugin/+/master:testDat[…]mples.kt;l=81-95;drc=45110c76c7fa0ebcdb3807a9bc89cdf8fdf9a75b