Android Expandablelistview Tutorial With Example With Custom Adapter

Android expandablelistview tutorial with example will enhance your knowledge today.

We will create an app with expandablelistview which will use the custom adapter.

Expandable listview enables you to show the data in two level categories list. First level list is known as parent which includes children items as it’s sub items.

This differs from the Listview by allowing two levels :

  • groups which can individually be expanded to show its children.
  • The items come from the expandableListAdapter associated with this view.

Developers use expandable listview because using two level listview will give better user experience.

Users can also expand and collapse parent groups as per their requirements.

First of all learn about basic concepts about expandable listview. After that we will create a practical example.

XML Coding

Following code example shows how you can define expandable listview in xml layout file.

It has attributes like id, layout width and height, divider etc.

android:id

id will represent the expandable listview when you are inflating it in the java or kotlin class.

android:devider

The value of this attribute can be a drawable or color. This divider is used to separate two parent items from each other.

android:dividerHeight

This attribute represents the thickness of the divider.

Higher value will lead the divider to more thicker.

You can give divider height value in the form of dp, sp or px.

android:childDivider

It can be a drawable or a simple color which is used as a divider for children. (It will drawn below and above child items.) The height of this will be the same as the height of the normal list item divider.

color is in the form of #rgb, #argb, #rrggbb or #aarrggbb.

android:childIndicator

it shows the specified indicator besides the child view.

android:groupIndicator

Indicator shown beside the group View. This can be a stateful Drawable.

Methods Of Expandable Listview

Android provides many methods to control the expandable listview programmatically.

collapseGroup(int groupPos)

this method will collapse the group (parent) which is already open.

Above line will collapse the first group.

This method returns boolean value. If the group is collapsed then it will return true. If the group is already collapsed then it will return false.

expandGroup(int groupPos)

This method will expand the particular group which is already close.

Above line will expand the first group.

This method also returns boolean value. If the group is expanded then it will return true. If the group is already expanded then it will return false.

getSelectedId()

It returns the ID of the currently selected group or child.

getSelectedPosition()

It gives the position of the currently selected group or child (along with its type).

isGroupExpanded(int groupPosition)

It will return a boolean (true or false) value. If the given group is expanded then it will return a true otherwise false.

setAdapter(ExpandableListAdapter adapter)

It will set the adapter that provides data to this view.

setChildDivider(Drawable childDivider)

It will set the drawable between every two children. Set child divider programmatically using this method.

setChildIndicator(Drawable childIndicator)

Sets the indicator to be drawn next to a child. You can use specific drawable file for this.

setGroupIndicator(Drawable groupIndicator)

Sets the indicator to be drawn next to a group.

setSelectedChild(int groupPosition, int childPosition, boolean shouldExpandGroup)

Sets the selection to the specified child. Last parameter is boolean so it’s value is true then the group of the selected child is open otherwise not.

Making Android Studio Example

In this tutorial, we will show different movies according to the categories like Action Movies, Comedy Movies etc.

Now let us create this example by using base adapter.

Step 1. Category Layouts

I will create each layouts for parent and child rows.

Create one layout resource file named child_layout.xml and add below source code

Now create another file and give it a name parent_layout.xml 

Add following source code in it

Just one textview is present in each file which means that we will only show the names of the items.

Step 2. Expandable Adapter

Adapter will fetch the data and it will set this data to their appropriate place.

Write down the below source code in ExpandableAdapter.java class

Read the constructor of the adapter class.

It contains one arraylist and one string array. Arraylist is the data for the sub category or child items and string array is the data for the parent item or main category.

I will explain more about this adapter class later in the step 3.

Step 3. Final Coding

At last, you just need to change code for activity_main.xml and MainActivity.java

Replace the code of activity_main.xml with the following

Copy and paste the below source code into MainActivity.java file

In this class, we will set up data for child and parent items.

Following line will help us to show parent data in the main category of expandable listview.

Above string array is passed as a parameter in the adapter constructor. Adapter will use this string array to populate the parent list.

Look at the below code

Above method will create an Arraylist of String Artaylist.

Action_Movies, Romantic_Movies and Comedy_Movies are the string Arraylists.

All these three string arraylists are added into the another arraylist which is childList.

Explanation of Adapter

Consider following method from the adapter class.

Above method will display the parent list.

Compiler will inflate the parent_layout.xml as the primary layout for showing the parent list.

Each parent list item will have the layout of parent_layout.xml file.

After this the text of the parent is set by using the string array “parents.”

Similarly, child items are set by using the below method from the adapter class.

First of all, the compiler will inflate child_layout.xml file.

The text of the child item is set by using the getChild() method.

Here is the code for the getChild() method.

We will get parent and child position in this method’s parameter.

Then, simply we will use childList (Arraylist of string arrays) to get our desired child name.

Final Look

If you have followed all the steps properly then you should get following output from your example.

via GIPHY

So it was all the knowledge about android expandablelistview tutorial.

Comment out your queries and reviews. I will reply you soon.

If you want to use checkboxes in expandable listview then read using checkbox in expandable listview tutorial.

Download Source Code for Android Expandablelistview

Hardik Parsania

I am mobile app developer. I am always passionate about solving complex and real world problems.I have developed many apps with great interest and superior logical skills.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *