ListBox repositioning of rows - delete row animation



Hi All!

I am trying to animate the removal of an item from the list in a listBox. The idea is that the user deletes the item, and the row collapses upward with the following rows following its position ultimately resulting in a list with 1 less row. I have attempted to illustrate this in the image below.

Is there an obvious way of doing this? I’m thinking not :confused:
Some code that could allow me to animate all the rows to new bounds with an updated y-coordinate of negative-row.getHeight()

any thoughts? I might be on thin ice here…


You’d probably need to create your own ListBox class (I’ve done that and it’s fairly simple)… then use ComponentAnimator to do the animation on yourListBox items’ Components.



I started doing this with an app a couple of years ago, but didn’t get round to finishing it - yes ComponentAnimator is your friend, and you might want to take a snapshot of the bit you want to move and animate that as whole, before revealing the actual components underneath. I found it tricky to get it really smooth. Good luck! I’ll see if I can dig out some code (its in an abandoned git branch somewhere…)


I think I’ll take a look at creating my own ListBox class. That might give me the freedom to do what I want.

The snapshot is a good suggestion, but I would like to make the animation “real”. It might, however, prove useful as a last resort.

Thanks for the feedback!


I’m now creating a ListBox subclass, and the implementation of moving every component underneath the component I wish to delete works… but ehm. It simply moves each component out of sight within its designated row-rectangle limits of existence. Hence resulting in each row to animate its component out of sight. Is there no way to re-arrange the bounds of the rows containing the components of the list?


Trust me, it will be way simpler, and more efficient, to animate a snapshot image overlay rather than actual components…


I’m seriously starting to trust you :slight_smile: