Friday, June 14, 2013

DevBytes: Animating ListView Deletion

It's Friday: must be time for another DevBytes episode.

Finally, here is the DevBytes episode around the ListView animation demo in the talk A Moving Experience that I gave with Romain Guy at Google I/O last month.

The code is nearly the same as that in the I/O talk, except I tweaked it to make it more general-purpose. Specifically, it no longer depends on the setHasTransientState() method (introduced in Jellybean 4.1) to keep the views around while fiddling with layout. Instead, it uses an adapter with stable itemIds, and uses those Ids to track where the content is before and after layout.

As written, the code is still dependent on Android 4.1, but that's only because of the use of ViewPropertyAnimator.withEndAction() method, which is really just syntactic sugar around adding a listener and running the end-action code in the onAnimationEnd() callback. So you could totally port this code all the way back to Android 3.1 (when ViewPropertyAnimator was introduced) or even 3.0 (if you use ObjectAnimator instead).

Watch the video. Check out the code. Play with ListView. Animate. Enjoy.

A Moving Experience: http://www.youtube.com/watch?v=ihzZrS69i_s

DevBytes on YouTube: http://www.youtube.com/playlist?list=PLWz5rJ2EKKc_XOgcRukSoKKjewFJZrKV0

Code: http://developer.android.com/shareables/devbytes/ListViewRemovalAnimation.zip

12 comments:

Unknown said...

I can't wait to see Gingerbread code. There is still 36.4% of active users.

hazam said...

Whoa. Sketchy.
I imagine that as Android gets optimized for lower end devices, well'have to fight more with hyper-optimized code like ListView.

Thanks for the good code Chet!

Unknown said...

hey,chet haase,I have a question to ask you,I want to know that can we use ongloballayoutlistener to prepare for the animation, instead of nPreDrawListener?

Chet Haase said...

Yes, OnGlobalLayoutListener should work similarly in general. Using onPreDrawListener is a global catch-all, basically making sure that everything the framework wanted to do has been done and now the view hierarchy is ready to be drawn.

Unknown said...

i just got a strange thing while running this demo with limited collection of item ,

see attached image

http://www.freeimagehosting.net/3by3v

Unknown said...

It is very awesome code.But i have one problem,How i get click event of listview bcz OnItemClickListener is not called in this case...How can i call this one.

Unknown said...

me too... setOnItemSelectedListener don't work!!
@Mubarak Hussain: do you solve the problem?

Anonymous said...

My code is say no resource found for: android:paddingStart="?android:attr/listPreferredItemPaddingStart"
android:paddingEnd="?android:attr/listPreferredItemPaddingEnd"

wasim said...

this animation works on Gingerbread or Api level 9. b'z i am working on app and i want this effect in it.

Unknown said...

hello, Chet Hasse. I implement the listview item deletion in the way you showed. but there is a problem that the ListView can't receive its onItemClick and onItemLongClick events if when item deletion is implemented. do you have any idea how to solve this problem? thanks in advance.

Luker said...

Awesome, I can't wait anymore for that :D

Sohil Memon said...

This animation works on ginger bread right? What about Android 4.4 Kitkat