Finally achieved parallax effect with LazyList

# compose

[Samir Basnet]

Finally achieved parallax effect with LazyList

device-2021-03-31-151029.mp4

[Samir Basnet]

Modifier.graphicsLayer {
    scrolledY += scrollState.firstVisibleItemScrollOffset - previousOffset
    translationY = scrolledY * 0.3f
    previousOffset = scrollState.firstVisibleItemScrollOffset
}

Above is the code where scrollState is scrollState of lazy list , scrolledY and previousOffset are both gloabally initialized as 0 and the main part is the content/header that has parallax effect is kept inside item eg. item { Header() } of that lazy list. if anyone knows how to do it without including that header inside item{} of lazy list but rather inidividually then please do share the code.

[subashz]

sahi ho

[Lukas Sztefek]

Can you publish it on github?

[subashz]

This may be helpful: https://github.com/material-components/material-components-android/blob/9c75ad07f7[…]com/google/android/material/appbar/CollapsingToolbarLayout.java

[Samir Basnet]

@subashz That link is for implementation in View system and is on the opposite end of the spectrum to the one i have done totally in Compose. In view system it is pretty much plug and play with collapsing toolbar and coordinator and i have already done that in my previous apps

[Samir Basnet]

@Lukas Sztefek i will try publishing it on Saturday

[nglauber]

@Samir Basnet not sure if you published your code, but it helped to answer this question here:
https://stackoverflow.com/questions/67227755/jetpack-compose-collapsing-toolbar
Please, let me know if I can improve the solution.

[Geert]

Is it also possible to show a small part of the image when its on top? So do not scroll it of the page?

[filipegoncalves]

@Samir Basnet did you get to publish the code ? I would really need to check something like this please