8

Has anyone had any luck adapting PinnedHeaderListView so that it can be used with an ExpandableListView instead of just a simple ListView with indexed sections? I basically want an ExpandableListView where each group item view stays pinned to the top until it is pushed up by the next group view.

I've studied the code to try and figure out how PinnedHeaderListView works and it seems like it will be difficult to adapt to an ExpandableListView. The main problem seems to be in the use of a different kind of adapter and drawing methodology. A PinnedHeaderListView makes use of SectionIndexer to keep track of section positions. As it draws each item with getView() it checks if the item is the beginning of a new section. If the item is the beginning of a new section it makes a section header visible within the item's list_item view. An ExpandableListAdapter has a getChildView() and a getGroupView() to draw the items and sections separately as different list items.

I am sure there must be some way of using the methodology in PinnedHeaderListView to get similar behavior in an ExpandableListView, but I am not sure where to begin.

Hiren Patel
  • 52,124
  • 21
  • 173
  • 151
joecan
  • 210
  • 2
  • 9

2 Answers2

4

I was able to get pinned headers working on the ExpandableList1 APIdemo.

The hardest problem I faced was figuring out how to get the SectionIndexer to play nicely with expanding lists. As was evidenced in my question, I was thinking of this all wrong. In my original attempt to solve this problem, I created a SectionIndexer object within MyExpandableAdapter and mapped it to my data, similar to how it is done in the Contacts app and Peter's example. This works in the Contacts app because the flat list positions statically match the data set. In an expandable list view the flat list positions change as groups are expanded in and out.

So, the solution is to not to map the section indexer to the data, but to the instance of your ExpandableListView. With this solution, you don't even need a SectionIndexer object as used in the examples. You just need to wrap the SectionIndexer implementation methods around the ExpandableListView methods like this:

    @Override
    public int getPositionForSection(int section) {
        return mView.getFlatListPosition(ExpandableListView
                .getPackedPositionForGroup(section));
    }

    @Override
    public int getSectionForPosition(int position) {
        return ExpandableListView.getPackedPositionGroup(mView
                .getExpandableListPosition(position));
    }

There are of course other changes you have to make to get this all working, but the above methods are the key. I'll post the full code to google code or github and link from here soon. ExpandableLists with pinned headers look great!

Community
  • 1
  • 1
joecan
  • 210
  • 2
  • 9
  • 1
    It would be nice if you can make a library project and make it available on github. If you need a model, see https://github.com/triposo/barone – aleb Apr 27 '12 at 00:33
  • @joecan I'm also interested in seeing how this is implemented. Please, if you are able to share some code with us, let us know. – Karakuri May 30 '12 at 08:56
  • plz let me know how to use this methods to add header in expandable listview. – Android-iPhone-rahul Mar 25 '13 at 11:51
  • The code above does not completely work for scrolling manually **and** per fastScroll thumb. I posted a solution how to workaround this [here](http://stackoverflow.com/a/17277901/1217871). It uses an `OnScrollListener` to catch both cases. – mitch000001 Jun 24 '13 at 14:41
  • @joecan Good information, but virtually useless without the implementation in the project. Please upload code. – Dylan Vander Berg Jun 05 '14 at 21:37
1

Well I have done in just 3 steps:

1. Add compile 'com.diegocarloslima:fgelv:0.1.+@aar' in build.gradle

2. Add ExpandableListView in xml.

<com.diegocarloslima.fgelv.lib.FloatingGroupExpandableListView
        android:id="@+id/expandableListView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/transparent"
        android:groupIndicator="@null" />

3. Java code:

FloatingGroupExpandableListView expandableListView = (FloatingGroupExpandableListView) findViewById(R.id.expandableListView);
MyexpandableListAdapter adapter = new MyexpandableListAdapter(context, mList);
WrapperExpandableListAdapter wrapperAdapter = new WrapperExpandableListAdapter(adapter);
expandableListView.setAdapter(wrapperAdapter);

Hope this will help you.

Hiren Patel
  • 52,124
  • 21
  • 173
  • 151