{"id":104,"date":"2014-04-03T19:04:46","date_gmt":"2014-04-03T19:04:46","guid":{"rendered":"https:\/\/idunnololz.com\/wordpress\/?p=104"},"modified":"2014-04-07T20:31:13","modified_gmt":"2014-04-07T20:31:13","slug":"the-animatedexpandablelistview","status":"publish","type":"post","link":"https:\/\/idunnololz.com\/wordpress\/?p=104","title":{"rendered":"The Animated ExpandableListView"},"content":{"rendered":"

In android, the ListView is one of my favorite widgets due to its beautiful implementation, it’s high performance and it’s flexibility. However, the ExpandableListView (which extends ListView) is much more primitive. A much needed feature that I was looking for is missing and the solutions offered online seemed less then ideal. The feature that I’m talking about is the animating of expanding and collapsing groups. Disappointed that there were no great solutions to this I decided to write my own.<\/p>\n

The problem with the popular solution<\/strong><\/p>\n

There is a very popular solution floating online which is to use a ListView instead of an ExpandableListView and populates the ListView with custom views which are animated to expand and contract. Although this solution does work if the number of children of a group is small, it will miserably fail when the child is more complex and large. This is because this solution uses a ListView therefore although group items will enjoy the benefits of being in a ListView, child items will not meaning they will take up more memory (so if you have 100 child views for one group, all 100 child views will get loaded into memory) and all child views will not be optimized (for instance if you have 100 child views, they will be iterated over every time the screen is drawn). So the main draw back here is performance when the number of children of a group is sufficiently large.<\/p>\n

A better implementation<\/strong><\/p>\n

A better implementation does exist, the main drawback being it is a bit more difficult to implement correctly but once implemented will still offer all the benefits of an ExpandableListView while providing great animations. However, we can ignore the drawback since I’ve already done the implementation part, all you need to do is include it in your project! You can view my implementation and a sample application here:<\/p>\n

https:\/\/github.com\/idunnololz\/AnimatedExpandableListView<\/a><\/p>\n

How does it (the AnimatedExpandableListView) work?<\/strong><\/p>\n

Well one thing you will need to offer all of the benefits of an ExpandableListView is to have an ExpandableListView, so the AnimatedExpandableListView does just that and extends ExpandableListView. The rest, however, is a bit complicated. I have done my best to put a lot of comments in my source, so you may find you’ll learn a lot from reading the source. However, to summarize how it all works:<\/p>\n

\n
\u00a0\/*<\/div>\n
* A detailed explanation for how this class works:<\/div>\n
*<\/div>\n
* Animating the ExpandableListView was no easy task. The way that this<\/div>\n
* class does it is by exploiting how an ExpandableListView works.<\/div>\n
*<\/div>\n
* Normally when ExpandableListView.collapseGroup(int) or<\/div>\n
* ExpandableListView.expandGroup(int) is called, the view toggles<\/div>\n
* the flag for a group and calls notifyDataSetChanged to cause the ListView<\/div>\n
* to refresh all of it’s view. This time however, depending on whether a<\/div>\n
* group is expanded or collapsed, certain childViews will either be ignored<\/div>\n
* or added to the list. Creating the effect of group expansion or collapse.<\/div>\n
*<\/div>\n
* Knowing this, we can come up with a way to animate our views by using a<\/div>\n
* custom adapter which will supply dummy views which we will animated. For<\/div>\n
* instance for group expansion, we tell the adapter to animate the<\/div>\n
* children of a certain group. We then expand the group which causes the<\/div>\n
* ExpandableListView to refresh all views on screen. The way that<\/div>\n
* ExpandableListView does this is by calling getView() in the adapter.<\/div>\n
* However, since the adapter knows that we are animating a certain group,<\/div>\n
* instead of returning the real views for the children of the group being<\/div>\n
* animated, it will return a fake dummy view. This dummy view will then<\/div>\n
* draw the real child views within it’s dispatchDraw function. The reason<\/div>\n
* we do this is so that we can animate all of it’s children by simply<\/div>\n
* animating the dummy view. After we complete the animation, we tell the<\/div>\n
* adapter to stop animating the group and call notifyDataSetChanged. Now<\/div>\n
* the ExpandableListView is forced to refresh it’s views again, except this<\/div>\n
* time, it will get the real views for the expanded group.<\/div>\n
*<\/div>\n
* So, to list it all out, when expandGroupWithAnimation(int) is<\/div>\n
* called the following happens:<\/div>\n
*<\/div>\n
* 1. The ExpandableListView tells the adapter to animate a certain group.<\/div>\n
* 2. The ExpandableListView calls expandGroup.<\/div>\n
* 3. ExpandGroup calls notifyDataSetChanged.<\/div>\n
* 4. As an result, getChildView is called for expanding group.<\/div>\n
* 5. Since the adapter is in “animating mode”, it will return a dummy view.<\/div>\n
* 6. This dummy view draws the actual children of the expanding group.<\/div>\n
* 7. This dummy view’s height is animated from 0 to it’s expanded height.<\/div>\n
* 8. Once the animation completes, the adapter is notified to stop<\/div>\n
* animating the group and notifyDataSetChanged is called again.<\/div>\n
* 9. This forces the ExpandableListView to refresh all of it’s views again.<\/div>\n
* 10.This time when getChildView is called, it will return the actual<\/div>\n
* child views.<\/div>\n
*<\/div>\n
* For animating the collapse of a group is a bit more difficult since we<\/div>\n
* can’t call collapseGroup from the start as it would just ignore the<\/div>\n
* child items, giving up no chance to do any sort of animation. Instead<\/div>\n
* what we have to do is play the animation first and call collapseGroup<\/div>\n
* after the animation is done.<\/div>\n
*<\/div>\n
* So, to list it all out, when collapseGroupWithAnimation(int) is<\/div>\n
* called the following happens:<\/div>\n
*<\/div>\n
* 1. The ExpandableListView tells the adapter to animate a certain group.<\/div>\n
* 2. The ExpandableListView calls notifyDataSetChanged.<\/div>\n
* 3. As an result, getChildView is called for expanding group.<\/div>\n
* 4. Since the adapter is in “animating mode”, it will return a dummy view.<\/div>\n
* 5. This dummy view draws the actual children of the expanding group.<\/div>\n
* 6. This dummy view’s height is animated from it’s current height to 0.<\/div>\n
* 7. Once the animation completes, the adapter is notified to stop<\/div>\n
* animating the group and notifyDataSetChanged is called again.<\/div>\n
* 8. collapseGroup is finally called.<\/div>\n
* 9. This forces the ExpandableListView to refresh all of it’s views again.<\/div>\n
* 10.This time when the ListView will not get any of the child views for<\/div>\n
* the collapsed group.<\/div>\n
*\/<\/div>\n<\/blockquote>\n

And that pretty much sums up how this thing works. Enjoy!<\/p>\n","protected":false},"excerpt":{"rendered":"

In android, the ListView is one of my favorite widgets due to its beautiful implementation, it’s high performance and it’s flexibility. However, the ExpandableListView (which extends ListView) is much more primitive. A much needed feature that I was looking for is missing and the solutions offered online seemed less then ideal. The feature that I’m … <\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[10],"tags":[11,12],"_links":{"self":[{"href":"https:\/\/idunnololz.com\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/104"}],"collection":[{"href":"https:\/\/idunnololz.com\/wordpress\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/idunnololz.com\/wordpress\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/idunnololz.com\/wordpress\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/idunnololz.com\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=104"}],"version-history":[{"count":8,"href":"https:\/\/idunnololz.com\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/104\/revisions"}],"predecessor-version":[{"id":120,"href":"https:\/\/idunnololz.com\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/104\/revisions\/120"}],"wp:attachment":[{"href":"https:\/\/idunnololz.com\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=104"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/idunnololz.com\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=104"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/idunnololz.com\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=104"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}