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!
387
208
Mateusz Buda's profile photo黄立侯's profile photoDavid Dai's profile photolu marlon's profile photo
94 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
+
1
2
1
 
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
 
Big thanks to +Roman Nurik for this UI pattern. I have one question. How can i change the source code provided so i could change View's position from to to bottom?
 
So this QuickReturn view works well if you want the view to be at the top of the layout which contains a ScrollView.  But how about at the bottom of the layout.  I tried retooling all of the scrolling logic but couldn't seem to get it to work.  Does anyone have any ideas?
 
+Etienne Lawlor you can specify the position in the constructor, check out the project readme, look for POSITION_TOP and POSITION_BOTTOM.
 
Ohhh I see. The library you wrote. The logic I see is in QuickReturnTargetView.java
 
+Felipe Lima  It seems that your library works well with ListViews but not with a ScrollView.  Is that the case?
 
+Etienne Lawlor yeah ScrollView support hasn't being implemented yet actually, since it was created with focus on ListViews, which is the hardest scenario. I can add ScrollView support real quick and release a new version later today.
 
+Etienne Lawlor I just released QuickReturn 1.4.0 with support for ScrollView and many bug fixes. Please let me know your thoughts!
 
Thanks Roman. I had discussed about scroll problem with you during Google I/O and now this sample is awesome and helpful
 
thank you for this work,
i wont if there is a version that support dynamic lists!!!?
 
Just open an issue on Github and I can take a look
 
its not working with Pull - To -Refresh , i want listview to support pull-down to refresh and pull-up to more .
 
when I put the placeholder view to the first item , scroll down will have a flicking on the sticky textview. How can we fix it?
 
Is there a way to use a normal view, instead of a listview? thx a lot
 
+Etienne Lawlor  tried to implement your QuickReturn library  as a eclipse library project .I was trying it as a footer view supporting scroll view,the footer bar gets stuck midway if i scroll completely down the page .Any solution for this problem if encountered? Thanks
 
+Etienne Lawlor​ sorry for not updating !Library works fine n great to use.. solved the issue...it was related to the translation height of the footer bar.Thanks .
 
Any pinned list view with parallax effect library available?
Add a comment...