If you ever wrote an Android app, there’s a 90% chance that you used the ListView component at least once.
In the app that I wrote, I needed to give the user some options he can perform on each one of the list items. I thought about sliding a toolbar from the side, which will replace the list item, like they do on twitter, but it’s less convenient due to the fact that you hide the data that list item presents. A better approach, for me at least, was to slide out a toolbar. In that way - you can see the list item and get the option to perform some commands on it. And basically getting from this:
The problem with that approach is that the ListView component doesn’t have any built-in option for that, nor an easy way to add new views to the list, and not to mention adding new views with a cool animation! To do that, I had to pull some tricks up my sleeves.
First, I’ve added another view for the list item’s layout, just below the one handling the data itself (In this case - the text item), and I gave it a negative bottom margin as the size of its height. That’s a neat trick to hide the toolbar view completely!
Secondly, I wrote an animation class that changes the value of that bottom margin, getting the toolbar revealed/hidden.
And finally, I got the ListView’s OnItemClickListener to toggle the toolbar state, using the above animation class.
Combining all together, got me a cool ListView, with a sweet animation for opening/closing the toolbar!
This is just a demo for my ExpandAnimation, There’s a lot more you can do. For instance - if the list item is on the bottom of the list, we can scroll the list and then show the toolbar. It’ll give a better user experience than having to scroll down manually. You can also use it for any view, not only ListView items. For instance, animating the visibility of some Activity’s title.
As always, the full source code is on my GitHub.
If you have any ideas how to improve this method - please send me feedback here!