ExpandableListView With Image And Text


Download ExpandableListView with Image and Text sample

ExpandableListView can be used to group data by categories. Android ListView is used to show 1 level listing while ExpandableListView is used to show 2 level listing.

Android ExpandableListView are expandable as well as collapsable. When user click on a colapsed Group, then it expand the group to show its childs, and when user click on a expanded group then it colapsed to hide it's child.

Android ExpandableListView is quite similar to Android ListView, if you are new to ListView then I recommend you to read our Custom ListView With Image and Text tutorial.

In ExpandableListView tutorial, we are going to demonstate an ExpandableListView with Image and Text. When user touch or click a group item then showing/hiding its child and giving message in Toast that which Group and child item was clicked.

Continent is my model class that represent a Group and Country is my model class that represent child of a continent. I am going to use Continent and Country for ExpandableListView demonstration.

Continent.java

Country.java

How to implement ExpandableListAdapter Interface?

In next step, I created a class MyExpandableAdapter.java that implements ExpandableListAdapter interface. Now, Source of MyExpandableAdapter class is as follows:

How to customize Group items of ExpandableListView?

To customize Group items of ExpandableListView we need to do 2 things:

  1. We must specify arow layout, how we want to display group rows in ListView
  2. We must override getGroupView method in our adapter class

I created a continent_row.xml under res ->layout, code of continent_row.xml is given below:

Here is screenshot, how above layout looks like:

Android group item customization in ExpandableListView

Our next step is to override getGroupView method in MyExpandableAdapter. This method is called for every group item one by one and this method defines how a group item will look like in ExpandableListView.

Here is getGroupView method of adapter:

How to customize Child items of ExpandableListView?

To customize Child items of ExpandableListView we need to do 2 things:

  1. We must specify arow layout, how we want to display child rows in ExpandableListView
  2. We must override getChildView method in our adapter class

I created a country_row.xml under res ->layout, code of country_row.xml is given below:

Here is screenshot, how above layout looks like:

Android child item customization in ExpandableListView

Our next step is to override getChildView method in MyExpandableAdapter. This method is called for every child item one by one and this method defines how a child item will look like in an ExpandableListView.

Here is getChildView method of adapter:

How to change group indicator?


Here are 2 step to change group indicator icons:

  1. Create a selector named group_indicator.xml under res ->drawable . source of group_indicator.xml is as follows:

  2. Next step is to set android:groupIndicator of ExpandableListView in main layout file as follows:

How to handle onGroupClick event of a ExpandableListView?


To handle onGroupClick of ExpandableListView, we need to do 2 things:

  1. Implement ExpandableListView.OnGroupClickListener Interface in your Activity class and provide the implementation of onGroupClick method as given below :

  2. Specify which class is going to handle onGroupClick event of expandableListView:

How to handle onChildClick event of a ExpandableListView?


To handle onChildClick of ExpandableListView, we need to do 2 things:

  1. Implement ExpandableListView.OnChildClickListener Interface in your Activity class and provide the implementation of onChildClick method as given below :

  2. Specify which class is going to handle onGroupClick event of expandableListView:

How to handle onGroupExpand event of a ExpandableListView?


To handle onGroupExpand of ExpandableListView, we need to do 2 things:

  1. Implement ExpandableListView.OnGroupExpandListener Interface in your Activity class and provide the implementation of onGroupExpand method as given below :

  2. Specify which class is going to handle onGroupExpand event of expandableListView :

How to handle onGroupCollapse event of a ExpandableListView?


To handle onGroupCollapse of ExpandableListView, we need to do 2 things:

  1. Implement ExpandableListView.OnGroupCollapseListener Interface in your Activity class and provide the implementation of onGroupCollapse method as given below :

  2. Specify which class is going to handle onGroupCollapse event of expandableListView:

ExpandableListView example


In this example, we are going to demonstrate ExpandableListView customization with Image and Text and its usage.

Result

Expandable ListView ExpandableListView

Step 1: Create a new project in Android Studio and name it Expandable ListView.

Step 2: Open res -> layout -> activity_main.xml and add following code

activity_main.xml

Step 3: Open res -> drawable and put all the images used in the project.

Step 4: Open res -> drawable and create a new file named groupindicator_selector.xml. Replace the code of groupindicator_selector.xml with below given code.

groupindicator_selector.xml

Step 5: Open res -> values -> strings.xml and replace it with below given code.

strings.xml

Step 6: Open your res ->values ->colors.xml and replace it's code with below given code of my colors.xml as follows:

colors.xml

Step 7: Create a new layout resource under res -> layout named continent_row.xml. Replace the code of continent_row.xml with below given code.

continent_row.xml

Step 8: Create a new layout resource under res -> layout named country_row.xml. Replace the code of country_row.xml with below given code.

country_row.xml

Step 9: Create a class Country.java and replace it's code with below given code of my Country.java as follows:

Country.java

Step 10: Create a class Continent.java and replace it's code with below given code of Continent.java as follows:

Continent.java

Step 11: Create a class MyExpandableAdapter that implements ExpandableListAdapter and replace it's code with below given code of MyExpandableAdapter.java as follows:

MyExpandableAdapter.java

Step 12: Open your MainActivity.java and replace it's code with below given code of my MainActivity.java as follows:

MainActivity.java

Step 13: Clean and run the project to see the result.


Share & Like

Tutorial topics

About ApnaTutorials.com

ApnaTutorials.com is for Java, J2ee, Html5 and android developers. All tutorials are well explained and are easy to understand. We have tested every tutorials on our developement environment before posting it in public domain.