title: synchronizing layers in parallax scrolling
body: <p>I need to implement a scrolling layout which is loaded with images from an <code>Adapter</code>, and another scrolling layout on top of it (second layer of a <code>FrameLayout</code>) that contains text labels of individual images. The top layer should scroll with a "parallax effect": <a href="http://upload.wikimedia.org/wikipedia/commons/3/34/Parallax_scrolling_example_scene.gif" rel="nofollow">http://upload.wikimedia.org/wikipedia/commons/3/34/Parallax_scrolling_example_scene.gif</a> -- 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 <a href="http://developer.sonymobile.com/2010/06/23/android-tutorial-making-your-own-3d-list-part-3/" rel="nofollow">listviews with custom dynamics</a> (top one is faster than the bottom one) but I'm not sure how to sync them; couple of ideas:</p>
  
  <ul>
  <li><p>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</p></li>
  <li><p>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</p></li>
  </ul>