Shared publicly  - 
 
#AndroidDev  

Scrolling Tricks

+Nick Butcher and I spent some time today in London coding up a few useful scrolling techniques. A screencap video is shown below, and you can get the code at:

http://code.google.com/p/romannurik-code/source/browse/misc/scrolltricks

Sticky — This trick is similar to the "synchronized scrolling" technique that +Kirill Grouchnikov described here: http://goo.gl/BHbD7. It shows how to make a scrolling view (such as a 'buy now' button) stick to the top of its scroll container instead of scrolling off-screen.

Quick Return — This is similar to Google Now's search box. It scrolls off-screen with the rest of the scrollable content, but upon scrolling slightly up at any point, it scrolls back into view. Quite a handy technique for search bars and the like.

Enjoy!
317
159
Mauricio Lara Soberanis's profile photoGuillaume BOUERAT's profile photoDarren Mansell's profile photoPaulo Khouri's profile photo
59 comments
 
I love the quick return in Now and hope to see it in more Google apps and Android apps in general 
 
Nice timing! One of these might be very useful for a project that I am currently working on.
 
+Roman Nurik  It is unbelievable how elegant and straight forward the solution of a sticky view is.
 
thanks a lot for this...
 
+Emil Sjölander thanks for the lib... When you say it isn't perfect you are talking about something specifically?
 
with some workarounds this is possible for a scrollview. It works perfectly fine:) It does not yet work for the listview
 
+Alexander Blom you can handle click events if your translate the click positions based on your scroll position
 
+Lucio Maciel yeah, the listview version does not support touch events or animations on the sticky header. This is something i plan to fix when i find the time but i think most implementations won't need it. The ScrollView version works perfectly though (knock wood)
 
In the g+ app the quick return has a flaw in my opinion. If you scroll first up to make it appear and then down again (without leaving the screen with your finger), it will not disappear again. Not sure how you solved it in your library, but I see no reason why it should stay visible.
 
I personally think the Google+ quick return is too eager and would do well with some tweaking. When flinging down to skip an post or two I almost always need to scroll up slightly to see the whole post I end up on. This makes the quick return trigger, where most of the time I just want to scroll so the bar gets in the way. Perhaps there should be a scroll velocity and distance threshold before triggering?
 
Today, in my current app (under development) I decided to use Quick Return but since I need to support devices above Eclair and setTranslationY requires API >= 11, I've made small changes to your code +Roman Nurik and +Nick Butcher (hope you don't mind).

Here's my code:
if (preHoneycomb) {
      anim = new TranslateAnimation(0, 0, translationY, translationY);
      anim.setFillAfter(true);
      anim.setDuration(0);
      mQuickReturnView.startAnimation(anim);
} else 
      mQuickReturnView.setTranslationY(translationY);
 
+Hugo Fernandes nice! The only issue I've seen with using the pre-HC API is that interaction (e.g. touch events) are handled at the un-translated view position. So just beware when using interactive elements in your 'quick return' view (for lack of a better name)
rex yau
 
i seems that it is a starting point that make something like the iphone table view 's group title
 
If this is not for listviews what is Google+ or Google Now app using for the items? Do we have to manually add all the items into the scrollview? What is the point?
 
Thanks for the great example.  I was successful in getting this working as a listview, with it sticking both at the top and the bottom.
 
I want to sticky this. Thanks! Very useful!
 
+Josh McKinney Mind sharing? I'm stuck on the fact that this implementation needs fixed heights for its children. Thus I wasn't able to add a ViewPager (with ListViews) and sticky TabPageIndicators...
 
How do you make the emulator to run so smoothly? If I try to do it with mine it won't show the animations that well :(
 
+Roman Nurik have you seen any implementations of Quick Return for GridView ? I am curious as to how it could be done.

Edit: I have implemented a version for GridView using the original ObservableScrollView code and a custom GridView found at:

http://stackoverflow.com/a/8483078

Note that solution completely disables the view recycling in the GridView, and so should only be used for relatively small amounts of views.
 
+Hugo Fernandes I have same needs than you ( use it and support device above Eclair ), can you say me how work with "getTranslationY()" ? 
 
getTranslationY is only available from API 11 (http://developer.android.com/reference/android/view/View.html#setTranslationY(float)), that's why in Hugo's implementation there's a differentiation between <11 and >=11. He uses Animation to get the same effect, but you have the issue that interaction elements keep their interaction area while the UI is moved (clickable areas don't move from where they were). That's why I'd suggest to use scrollTo. I've used that approach in several scenarios getting always a proper outcome.
 
Anybody know if there's an existing html/css/js method for this quick return sync-scroll technique? It's so awesome it makes me want to develop for android... +Roman Nurik 
 
+Hugo Fernandes
 would you be able to post me your entire class quickreturn class that works for prehoneycomb? im also having a similar issue.
Ed Baev
 
How to do quickreturn view at the bottom in ScrollView?
 
its super and amazing. but i can not dynamically create textview  fragment activity, can you plz tell me how to create textview dynamically in fragment activity.
 
What if I need to combine the Sticky effect with a ListView? I can't combine the ObservableScrollView with a ListView inside, but I need both (ObservableScrollView for the Sticky and ListView for the view recycling and optimization - I need to load images in the ListView items)
 
Does anyone here try to use this code to populate a listview asynchronouslly? Because this code works fine for fixed items populated in the adapter, but it would be nice to support a dinamic way for adding more items when you hit the end of the listview
Translate
Add a comment...