Play Store Scrolling Customization

Question

I am writing an application where need to implement Google Play Store Scrolling implementation. There are sample library available to implement it, like

1. https://github.com/nirhart/ParallaxScroll
2. https://github.com/chrisjenx/Paralloid

additional I need to implement some extra effect here.

So like mention here there are three View available in screen. (Image A)

1. View A: Top Bar, will be of fix height
2. View B: Fix size block that will contain some text information.
3. View C: Scroll View (Expandable)

Here all I need same Parallax effect(like supported library),

1. but instead to scroll completely(View A, B, C) I just wanted to scroll till View-A not gone from picture.(Image B)
2. and then it should allow to scroll only View C which is list. Means now View B should remain on same position, until start scroll back down (with view A)(Image 3).

Any suggestion here ?

EDIT: Update on work I have done I am able to achieve some how this using kmshack solution but with little bit hack. Since scrolling only allow when list view have enough child to scroll so I have added some empty view and manage in Adapter.getView.

But this is not complete solution, since there are possibility that application List will not have any item to show and here also scrolling should work. Is there any way to make it possible without adding fake child?

Answer 1

There's many ways to do this, but basically: in your main scrollable view, leave 2 spaces for A and B but have them outside of the scrollable view, then listen to the scroll events and translate and/or transform A and B correspondingly.

The same applies to any kind of parallax effect, you simply translate in a "non linear" way giving the illusion of depth.

For some examples you can check out this G+ post by Roman Nurik.

A few tricks:

• The size of A and B will be known after layout, and might change; in order to keep the spaces the same size use View.getViewTreeObserver().addOnGlobalLayoutListener()
• Since API level 11 you can use View.setY() and/or View.setTranslationY() in addition to View.setLayerType() with type LAYER_TYPE_HARDWARE or LAYER_TYPE_SOFTWARE: it will save a bitmap of your view and move it around without re-drawing it every time, but updating the view will be more expensive, so use it with consideration (maybe only during the scroll).