CODEWITHSUNDEEP
androidlistviewanimation
jumper0k
jumper0k

Reputation: 2166

animate adding item and item movement in listview

How can I animate adding new item or moving item from one position to another in listview? I want to make animation effect, like in this app: any.do(youtube). I'm using adapter extended from ResourceCursorAdapter. How I should use newView and bindView functions to achieve this effect? Or is there another way to do it, like extending ListView class? I suspect that there is a ScrollView instead of Listview in any.do app. But I think this is wrong way, if you will have many items in list. Any ideas?

Upvotes: 3

Views: 4207

Answers (1)

Udinic
Udinic

Reputation: 3064

To do that effect, you need to: 1. "close" the slot where the item used to be. 2. "open" a slot in the list, where the item will "land". 3. Move the item between the slots.

To achieve the first animation, you need to animate the list item view itself. To make it disappear, you can animate the value of its bottom margin. I wrote a blog post about other Animation I did in Any.DO, where I animated this value - http://udinic.wordpress.com/2011/09/03/expanding-listview-items/. You can use the same animation to animate list item's view.

The "open" animation is the same as the close, but in the opposite direction. You take the list item, positioned right before your "landing point", and animate its bottom margin outwards, making an empty space for the new item to come.

Moving the item between the positions is fairly easy. You need to inflate a view with the same layout as the list items, populate it with the current item's data, add it to the WindowManager:

WindowManager winManager = (WindowManager) Context.getSystemService(Context.WINDOW_SERVICE);
winManager.addView(..)

and animate it's coordinates by using:

winManager.updateViewLayout(..);

After the animation will finish - you can remove this view and refresh the list.

The Add item animation is done using the same concept.

Sorry I don't have full source to provide here. At my blog post you can find the code for the expand/close animation.

Hope this helps!

Upvotes: 5

Related Questions