Welcome to Android ExpandableListView Example Tutorial. In this tutorial we’ll implement an ExpandableListView which is used to group list data by categories. It’s sort of menu and submenus in a Android ListView.

Android ExpandableListView

Android ExpandableListView is a view that shows items in a vertically scrolling two-level list. It differs from a ListView by allowing two levels which are groups that can be easily expanded and collapsed by touching to view and their respective children items.
ExpandableListViewAdapter in android loads the data into the items associated with this view.

Following are some important methods that are used by this class :

  • setChildIndicator(Drawable) : This is used to show an indicator besides each item representing the current state. If the child is the last child for a group, the state state_last will be set
  • setGroupIndicator(Drawable) : An indicator is drawn besides the group representing its state i.e. expanded or collapsed. If the group is empty, the state state_empty will be set. If the group is expanded, the state state_expanded will be set
  • getGroupView() : It returns view for the list group header
  • getChildView() : It returns view for list child item

The notable interfaces that are implemented by this class are given below :

  • ExpandableListView.OnChildClickListener : This is overridden to implement the callback method that’s invoked when a child in the expanded list is clicked
  • ExpandableListView.OnGroupClickListener : This is overridden to implement the callback method that’s invoked when a group header in the expanded list is clicked
  • ExpandableListView.OnGroupCollapseListener : It is used for notifying when a group is collapsed
  • ExpandableListView.OnGroupExpandListener : It is used to notify when a group is expanded

Android ExpandableListView Project Structure

android-autocomplete-project-structure-236x450

This project consists of three classes.

  • A MainActivity that shows the layout with the ExpandableListView
  • An ExpandableListDataPump which represents a random data in a List and maps the child item data to the respective group headers using a HashMap
  • A CustomExpandableListAdapter which provides the MainActivity with the data from the ExpandableListDataPump class/li>

Android ExpandableListView Code

The activity_main.xml layout consists of an ExpandableListView in a RelativeLayout as shown below :

activity_main.xml

The android:indicatorLeft is the left bound for an items indicator.

Note : We cannot use the value wrap_content for the android:layout_height attribute of the ExpandableListView in XML unless the parent’s size is strictly specified

The layout of the group header of each individual list is given below :

list_group.xml

The layout row of the child items is given below :

list_item.xml

The ExpandableListDataPump class is defined as below:

In the above code the expandableListDetail object is used to map the group header strings to their respective children using an ArrayList of Strings.

CustomExpandableListAdapter.java

This class extends BaseExpandableListAdapter and it overrides the methods in the base class to provide the view for the ExpandableListView. getView() fills in the data into the item’s view with the given index.

MainActivity.java

In the above code we’ve implemented all the interfaces that were discussed before. For the sake of simplicity, we’ll only display a Toast with the name of the item or the state of the group for every click. But these can be easily modified to perform any other operations.

Below is our app with android expandable list view in action.

ExpandableListView, android ExpandableListView, android ExpandableListView example

Note: ExpandableListViews are scrollable by default.

This brings an end to Android ExpandableListView tutorial. You can download the final Android ExpandableListView Project from the below link.

By admin

Leave a Reply