Question

I need to implement a scrolling layout which is loaded with images from an Adapter, and another scrolling layout on top of it (second layer of a FrameLayout) that contains text labels of individual images. The top layer should scroll with a "parallax effect": http://upload.wikimedia.org/wikipedia/commons/3/34/Parallax_scrolling_example_scene.gif -- but in our case, unlike in that animation, the items in the background and foreground layers are related to each other since the text labels obviously belong to and describe the images. The layers can be listviews with custom dynamics (top one is faster than the bottom one) but I'm not sure how to sync them; couple of ideas:

  • when movement stops in both layers, redraw one of them to match the visible items of the other list -- but this leads to flicker/jumps

  • or top layer could dynamically increase spacing between the items based on velocity so the slower background layer could keep up with its movement -- but I'm not sure of the Math required for this

Was it helpful?

Solution 2

I have finally implemented it using a fast scrolling top layer with bigger size albums and two slower bottom layers with small albums (both layers have text and image combined together).

OTHER TIPS

Use the 2 listviews with custom dynamics and then relate their speed by the distance between the images. So, where x is the speed of the foreground listview and y is the speed of the background listview, y=x*(subimage2.y-subimage1.y)*percentile.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top