I'm using graphicsLayer to update the alpha of composable while scrolling. But it causing performan...

# compose

[Shakil Karim]

I'm using graphicsLayer to update the alpha of composable while scrolling. But it causing performance issue. Is it a know issue?

[Adam Powell]

Can you post your code? There are definitely more and less efficient ways to write this.

[Shakil Karim]

@Adam Powell Here how I'm using graphicsLayer https://gist.github.com/shakil807g/313f01dfaadb9e69d29beca261c0f5a2

[Adam Powell]

alphaFraction being a composable function parameter before it is provided to the graphicsLayer block is likely causing a lot of recomposition whenever alpha changes. I'll bet you'll see a difference if you pass that as getAlphaFraction: () -> Float instead, graphicsLayer can pull the value in the places it's used when it changes (presuming you pass something like { computeBasedOn(someSnapshotState.value) }) rather than using recomposition to push new values

[Adam Powell]

that would make your graphicsLayer usage look like

.graphicsLayer {
  alpha = getAlpha() // call the provided function here
}

and these graphicsLayer blocks would be the only places where that function is actually called

[Shakil Karim]

Wow thanks @Adam Powell it is so much smoother now, I have updated my code
https://gist.github.com/shakil807g/313f01dfaadb9e69d29beca261c0f5a2

[Shakil Karim]

I guess, I need to rethink my whole app again 😄

[Adam Powell]

Another way you could phrase this if this is only used to determine alpha is to skip the lambda argument and pass around the graphicsLayer modifier instead, applying it wherever desired with .then(alphaModifier)

[Adam Powell]

so

val getAlpha = { (1f - collapseFraction).coerceIn(0f, 1f) }

would turn into

val alphaModifier = Modifier.graphicsLayer { alpha = (1f - collapseFraction).coerceIn(0f, 1f) }

[Adam Powell]

it's perfectly valid to use a modifier instance in more than one place at once like this

[Shakil Karim]

I will try to use modifier, Thanks you so much for your time 👍 Here is the final screen look like but one thing, i need to figure is to disable ripple on item when scrolling.

Recording #2.mp4

[Adam Powell]

The ripple when you begin a scroll is a bug in the compose-material library, I wouldn't spend too much time on that, it's our problem 🙂