https://kotlinlang.org logo
Channels
Powered by
#compose
Title
# compose
c

czuckie

11/15/2023, 1:42 PM
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? 🧵
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
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 😞
z

Zach Klippenstein (he/him) [MOD]

11/15/2023, 2:13 PM
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.
But the higher level transition animation APIs also support fade transitions.
c

czuckie

11/15/2023, 2:32 PM
Sorry I may not have explained it very well, I want to accomplish something like:
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
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
z

Zach Klippenstein (he/him) [MOD]

11/15/2023, 5:31 PM
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
8 Views
Powered by