Android ExpandableListView is a view that is used to shows items as a vertically scrolling two-level list. The basic difference with ListView is it allows two levels of the display which are groups that can be easily expanded and collapsed by touching to view and their respective children’s items. In order to show the view, ExpandableListViewAdapter is used in android. In many apps, an ExpandableListView facility is required. For example:
- In a “city” app(for any city), if the user wants to see a list of engineering colleges/list of art colleges/list of medical colleges, etc.,
- List of vegetables/List of fruits/List of Nuts etc., for a “jiomart” kind of app
- List of Hatchback/List of crosscut/List of Sedan etc., for a “Uber” kind of app
Current state indicator for each item If the child is
the last child for a group, the state state_last will be set
To represent the state either expanded or collapsed.state_expanded is the
state if the group is expanded, state_collapsed if the state of the group
is collapsed, state_empty if there are no groups.
|getGroupView()||Used to get the view for the list group header|
|getChildView()||Used to get the view for list child item|
The Notable Interfaces
|ExpandableListView.OnChildClickListener||When a child in the expanded list is clicked, this is overridden|
|ExpandableListView.OnGroupClickListener||When a group header in the expanded list is clicked, this is overridden|
|ExpandableListView.OnGroupCollapseListener||When a group is collapsed, this method notifies|
|ExpandableListView.OnGroupExpandListener||When a group is expanded, this method notifies|
Let us see the ways to implement SimpleExpandableListAdapter in Android with a List of vegetables/List of fruits/List of Nuts in the ExpandableListAdapter. A sample GIF is given below to get an idea about what we are going to do in this article. Note that we are going to implement this project using the Java language.
Step 1: Create a New Project
To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Java as the programming language.
Step 2: Create the dimens.xml file
Go to app > res > values > right-click > New > Values Resource File and name the file as dimens. In this file dimension related information is given here. Below is the code for the dimens.xml file.
Step 3: Working with the XML files
- To design the UI, code is present under the res\layout folder in the form of XML. They are used in the Activity files and once the XML file is in scope inside the activity, one can access the components present in the XML. Below is the code for the activity_main.xml file. Comments are added inside the code to understand the code in more detail.
- Go to app > res > layout > New > Layout Resource File and name the file as list_group. Below is the code for the list_group.xml file.
- Next is for layout row for child items. This is done via a list_item.xml file. Go to app > res > layout > New > Layout Resource File and name the file as list_item. Below is the code for the list_item.xml file.
- With the above XML, UI design elements are complete. Next is, a java file to populate the contents of the list.
Step 4: Working with the Java files
- Go to app > java > your package name > Right-click > New > Java Class and name the file as ExpandableListDataItems. Below is the code for the ExpandableListDataItems.java file. Comments are added inside the code to understand the code in more detail.
- Go to app > java > your package name > Right-click > New > Java Class and name the file as CustomizedExpandableListAdapter. Below is the code for the CustomizedExpandableListAdapter.java file. This java class extends BaseExpandableListAdapter and it overrides the methods which are required for the ExpandableListView. Comments are added inside the code to understand the code in more detail.
- Below is the code for the MainActivity.java file. Comments are added inside the code to understand the code in more detail.
Output: Run On Emulator
ExpandableListView is a very useful mandatory feature used in many apps. In mobile app sizes and in the available space, in order to show multiple items, one should need features like ExpandableListView and ExpandableListAdapter the view can be fit perfectly. As the scrolling is available, we can keep information on many levels. The methods support expanding the header, collapsing the header, selecting the child items perfectly as seen in the emulator output. For simplicity, we have provided with Toast messages. Depends upon the requirements, we can able to add further coding to match with it.