30

Is it possible to apply an expand or collapse animation for expandableListView?

Ajit Pratap Singh
  • 1,299
  • 12
  • 24
dursun
  • 1,861
  • 2
  • 21
  • 38
  • I don't think it is possible to make the gap between the rows animate though I put slide left/right animation on the view that I show as the child. This only really works because there is only a single child. – skorulis Mar 04 '11 at 05:59

3 Answers3

10

It can be done using a simple ListView that contains an initially hidden view and a custom class that extends Animation. The basic idea is to start with View.GONE then gradually re-size the margin from a negative value to the required size while setting visibility to View.VISIBLE.

See:

..and finally

The last example contains all the code you need. It looks a bit hackish to me, especially the fact that you must initially set view.bottomMargin = -50 or more, otherwise the animation does not work properly the first time, but so far I did not find any viable alternative (apart from using a ScrollView with your own container items instead of a ListView).

And finally, this app includes the above example, among lots of other useful examples with links to sources:

Update: Google removed the app from play store allegedly for intellectual property violation (although it only contained demos and links to open source projects), the author now made the apk available for direct download from http://goo.gl/ihcgs For more details see https://plus.google.com/108176685096570584154/posts. NB: I'm not affiliated with the author.

Community
  • 1
  • 1
ccpizza
  • 28,968
  • 18
  • 162
  • 169
  • Thanks for the ui patterns app link. – howettl May 01 '12 at 21:30
  • but this will lose the whole point of using a listView, since all of the items inside the group (that you expand) have to be inside it. if you have a lot of items there, you will need to have a lot of views to be created there too... – android developer Dec 31 '13 at 15:31
  • @android developer: you might be better off using a ScrollView, populate it with views and apply animations to them as required. A ListView is a complex component that is optimized for big lists; if you only have up to a dozen items then a scroll view might be easier to animate - make your own block component and animate the views within it as you wish. The main disadvantage compared to a ListView is that android will not create/destroy your items as they are scrolled into and out of the view area, and that the containers will not be reused, but if you have a few items it's not a big deal. – ccpizza Jan 01 '14 at 22:46
  • @ccpizza that's the problem - i have a lot of items to show, like on a listview... :( – android developer Jan 02 '14 at 06:15
  • @ccpizza i've made a small workaround on this problem, which still uses the expandableListView. it has some drawbacks though... – android developer Jan 02 '14 at 14:00
1

I've found a possible (partial) workaround for this problem.

first you need to store the scroll state of the ExpnadableListView :

@Override
public void onScrollStateChanged(final AbsListView view, final int scrollState) {
    this.mScrollState = scrollState;
}

public int getScrollState() {
    return this.mScrollState;
}

for the listView itself, you need to store which group was clicked, so that only its children will get animated:

mListView.setOnGroupClickListener(...
@Override
public boolean onGroupClick(...){
mGroupPosition=groupPosition;

now, in the getChildView() method, you check the state of the scrolling , and if it's idle, you start the animation, for example:

public View getChildView(...) {
// <=prepare rootView and return it later
if (groupPosition==mGroupPosition&&getScrollState() == OnScrollListener.SCROLL_STATE_IDLE)
    rootView.setAnimation(...)

this will set an animation for the child views each time you expand the group.

the drawback of this are:

  1. only for the expanded child views. you will need to think of extra logic to animate them when collapsing the group.
  2. all animations start at once . you will need to add multiple animations one after another if you wish that it would work otherwise.
android developer
  • 114,585
  • 152
  • 739
  • 1,270
  • This is an interesting approach. But from what I've learned, the child *items* are not child *views*, but siblings. So do you animate all children with separate animations, or exactly how do you do it? Working example code? – Nilzor Nov 13 '14 at 10:14
  • @Nilzor I've done it a long time ago, and the requirement of animations was removed due to the short time I had to work on it. Sorry. – android developer Nov 13 '14 at 10:37
  • No prob, thanks for getting back to me. For anyone else out there, the problem is pretty much still unsolved, although I kind of feel it should be Google solving this problem if they're serious about the Material design guidelines – Nilzor Nov 13 '14 at 11:53
  • @Nilzor I think "ExpnadableListView" is quite neglected as it's very rarely being used. – android developer Nov 13 '14 at 17:07
1

I have done a similar job for a simple list view.For doing that I overrode the getView method and applied translate up( or down) animation on each list item.The degree of translation was decided by the position of the list item.

Ajit Pratap Singh
  • 1,299
  • 12
  • 24