Using the Android ExpandableListView

In this post I am going to talk about some common struggles with the ExpandableListView such as scrolling to a given child element. First, let’s do a quick run through on using the Android ExpandableListView.

The XML

This component is easy to add in. It was included in API 1, so no support library required:

We also need to create two layout files. One will represent the group layout, and one for the child. Throughout this example, we will consider a schedule as our datatype. Our groups will be the days of events, and the children will be the events that occur on that day. For simplicity, let’s just include the date text for the group and the description and time for the event. The code for that can be found at this link if you would like to see it.

The Data

The objects used in this adapter are very simple. Each event has a description (String) and a time that it occurs (I use the JodaTime library for this). If you need a refresher on how to make a Class in Java, see this file on my Github page.

BaseExpandableAdapter

As with all AdapterViews, you need an Adapter to populate the element with a given dataset. ExpandableListViews are not single dimensional like a normal ListView, the dataset is two dimensional. This means we will be including a HashMap as the underlying data structure for the adapter. Let’s take a look at the code before we dissect it:

In this Adapter I use the ViewHolder pattern to help improve the scrolling of the ListView. Notice that there are two underlying sets of data here, a List<LocalDate> objects representing each of the days events occur, and a HashMap to hold all events for a given day. The way we populate those will be hard coded in this example, and shown later. The code above shows all of the required implemented methods, as well as my two ViewHolder classes. These implemented methods are pretty straight forward if you have ever used a HashMap. If not, more info can be found here.

Prepare ExpandableListView in the Activity

In this sample application, I have hardcoded three groups that occur on different dates, and ranging from 8-10 events each day. This information is retrieved using two methods, getDates() which returns a List<LocalDate> object and getEventDates() which returns a HashMap<LocalDate, List<Event>> object. Then, we prepare the ListView like this:

Congrats! You have now implemented an ExpandableListView in Android. While we are on the topic of the ELV, I would like to provide a solution to a unique problem with this element.

Scroll to a child element in ExpandableListView

There may be times when you want to scroll to a specific child element in an ExpandableListView. This is easy to do in a normal ListView, but can be tricky to accomplish in an ExpandableListView. By default, when a group is expanded, Android will scroll to the last item in that list. In order to correct this to scroll to the item that you want, you need to implement an onGroupClickListener like so:

This click listener as it is will work just like the default behavior, expanding a group if it needs to, and collapsing it otherwise. Now, let’s say I want to scroll to the seventh item in the second group. I just need to check the groupPosition parameter, and use mListView.smoothScrollToPosition() to scroll to it. This method requires I calculate the correct position:

This will now scroll to the seventh item in the second group (even if there are more than seven) as shown by the gif below (which has 10 items for group two):

Scroll To Child Item In ExpandableListView

As always, code for this application can be found on my Github page.

Share this post...
Share on Reddit0Share on Google+0Tweet about this on TwitterShare on LinkedIn0Share on Facebook0

Leave a Reply