Android: Expandable List View Example

3 May 2013 By Nithya Vasudevan 268,324 views 51 Comments
0 Flares Twitter 0 Facebook 0 Google+ 0 0 Flares ×

Project Description

  • In this example, we will see how to create a simple expandable list view using Android’s ExpandableListView widget. Also we will see how to delete child items in listview
  • Expandable List allows two levels – groups which can individually be expanded to show its children.
  • This example uses custom adapter for ExpandableListView which extends BaseExpandableListAdapter to populate items associated with this view.
  • This expandable list view example explains the following;
    • Each child item has a TextView and ImageView with delete icon.
    • Toast is displayed when a child item is clicked. This is processed in setOnChildClickListener.
    • Child item can be deleted by clicking on delete icon.


Environment Used

Android Project

Create an Android project and name it as ExpandableListDemo.


Open res/values/strings.xml and replace it with following content.

<?xml version="1.0" encoding="utf-8"?>
    <string name="app_name">ExpandableListDemo</string>
    <string name="hello_world">Hello world!</string>
    <string name="menu_settings">Settings</string>
    <string name="title_activity_expandable_list">ExpandableList Demo</string>

XML layout files

This Android Expandable List View requires three layout files; one for displaying the main layout containing the ExpandableListView, one for group item layout and other for child item layout.


This XML layout file (activity_main.xml) is used for defining ExpandableListView.

Open activity_main.xml file in res/layout and copy the following content.

<RelativeLayout xmlns:android=""
    tools:context=".MainActivity" >

        android:layout_height="fill_parent" >


Create a new layout file group_item.xml in res/layout and copy the following content.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android=""
    android:padding="10dp" >


This group layout contains a TextView to display laptop brand.


Create a new layout file child_item.xml in res/layout and copy the following content.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android=""
    android:padding="10dp" >

        android:paddingLeft="25dp" />



Each child item contains one TextView to display laptop brand’s model and one ImageView with delete icon to delete a child item.

Create Android Custom Adapter class for ExpandableListView

Create a new Java class “” in package “com.theopentutorials.expandablelist.adapters” and copy the following code.

package com.theopentutorials.expandablelist.adapters;

import java.util.List;
import java.util.Map;

import com.theopentutorials.expandablelist.R;

import android.content.Context;
import android.content.DialogInterface;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.BaseExpandableListAdapter;
import android.widget.ImageView;
import android.widget.TextView;

public class ExpandableListAdapter extends BaseExpandableListAdapter {

	private Activity context;
	private Map<String, List<String>> laptopCollections;
	private List<String> laptops;

	public ExpandableListAdapter(Activity context, List<String> laptops,
			Map<String, List<String>> laptopCollections) {
		this.context = context;
		this.laptopCollections = laptopCollections;
		this.laptops = laptops;

	public Object getChild(int groupPosition, int childPosition) {
		return laptopCollections.get(laptops.get(groupPosition)).get(childPosition);

	public long getChildId(int groupPosition, int childPosition) {
		return childPosition;
	public View getChildView(final int groupPosition, final int childPosition,
			boolean isLastChild, View convertView, ViewGroup parent) {
		final String laptop = (String) getChild(groupPosition, childPosition);
		LayoutInflater inflater = context.getLayoutInflater();
		if (convertView == null) {
			convertView = inflater.inflate(R.layout.child_item, null);
		TextView item = (TextView) convertView.findViewById(;
		ImageView delete = (ImageView) convertView.findViewById(;
		delete.setOnClickListener(new OnClickListener() {
			public void onClick(View v) {
				AlertDialog.Builder builder = new AlertDialog.Builder(context);
				builder.setMessage("Do you want to remove?");
						new DialogInterface.OnClickListener() {
							public void onClick(DialogInterface dialog, int id) {
								List<String> child = 
						new DialogInterface.OnClickListener() {
							public void onClick(DialogInterface dialog, int id) {
				AlertDialog alertDialog = builder.create();;
		return convertView;

	public int getChildrenCount(int groupPosition) {
		return laptopCollections.get(laptops.get(groupPosition)).size();

	public Object getGroup(int groupPosition) {
		return laptops.get(groupPosition);

	public int getGroupCount() {
		return laptops.size();

	public long getGroupId(int groupPosition) {
		return groupPosition;

	public View getGroupView(int groupPosition, boolean isExpanded,
			View convertView, ViewGroup parent) {
		String laptopName = (String) getGroup(groupPosition);
		if (convertView == null) {
			LayoutInflater infalInflater = (LayoutInflater) context
			convertView = infalInflater.inflate(R.layout.group_item,
		TextView item = (TextView) convertView.findViewById(;
		item.setTypeface(null, Typeface.BOLD);
		return convertView;

	public boolean hasStableIds() {
		return true;

	public boolean isChildSelectable(int groupPosition, int childPosition) {
		return true;

This class uses BaseExpandableListAdapter for creating custom adapter for ExpandableListView.


Open your activity class and copy the following code.

package com.theopentutorials.expandablelist;

import java.util.ArrayList;
import java.util.LinkedHashMap;
import java.util.List;
import java.util.Map;

import com.theopentutorials.expandablelist.adapters.ExpandableListAdapter;

import android.os.Bundle;
import android.util.DisplayMetrics;
import android.view.Menu;
import android.view.View;
import android.widget.ExpandableListView;
import android.widget.ExpandableListView.OnChildClickListener;
import android.widget.Toast;

public class MainActivity extends Activity {

	List<String> groupList;
	List<String> childList;
	Map<String, List<String>> laptopCollection;
	ExpandableListView expListView;

	protected void onCreate(Bundle savedInstanceState) {



		expListView = (ExpandableListView) findViewById(;
		final ExpandableListAdapter expListAdapter = new ExpandableListAdapter(
				this, groupList, laptopCollection);


		expListView.setOnChildClickListener(new OnChildClickListener() {

			public boolean onChildClick(ExpandableListView parent, View v,
					int groupPosition, int childPosition, long id) {
				final String selected = (String) expListAdapter.getChild(
						groupPosition, childPosition);
				Toast.makeText(getBaseContext(), selected, Toast.LENGTH_LONG)

				return true;

	private void createGroupList() {
		groupList = new ArrayList<String>();

	private void createCollection() {
		// preparing laptops collection(child)
		String[] hpModels = { "HP Pavilion G6-2014TX", "ProBook HP 4540",
				"HP Envy 4-1025TX" };
		String[] hclModels = { "HCL S2101", "HCL L2102", "HCL V2002" };
		String[] lenovoModels = { "IdeaPad Z Series", "Essential G Series",
				"ThinkPad X Series", "Ideapad Z Series" };
		String[] sonyModels = { "VAIO E Series", "VAIO Z Series",
				"VAIO S Series", "VAIO YB Series" };
		String[] dellModels = { "Inspiron", "Vostro", "XPS" };
		String[] samsungModels = { "NP Series", "Series 5", "SF Series" };

		laptopCollection = new LinkedHashMap<String, List<String>>();

		for (String laptop : groupList) {
			if (laptop.equals("HP")) {
			} else if (laptop.equals("Dell"))
			else if (laptop.equals("Sony"))
			else if (laptop.equals("HCL"))
			else if (laptop.equals("Samsung"))

			laptopCollection.put(laptop, childList);

	private void loadChild(String[] laptopModels) {
		childList = new ArrayList<String>();
		for (String model : laptopModels)

	private void setGroupIndicatorToRight() {
		/* Get the screen width */
		DisplayMetrics dm = new DisplayMetrics();
		int width = dm.widthPixels;

		expListView.setIndicatorBounds(width - getDipsFromPixel(35), width
				- getDipsFromPixel(5));

	// Convert pixel to dip
	public int getDipsFromPixel(float pixels) {
		// Get the screen's density scale
		final float scale = getResources().getDisplayMetrics().density;
		// Convert the dps to pixels, based on density scale
		return (int) (pixels * scale + 0.5f);

	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(, menu);
		return true;

  • Here, we create list of group items stored in ‘groupList’. We create list of child items for each group stored in ‘childList’.
  • We then create a Map where each key is a group name (in this example, it is a laptop brand name) and each value is a list of child (in this example, it is list of laptop models in particular brand).
  • We then create expandable list view adapter and set this adapter in ExpandableListView.
  • In setOnChildClickListener, we display a Toast.
  • By default the group indicator is displayed in left hand side. If you want to display it in right hand side then uncomment “//setGroupIndicatorToRight();” line inside onCreate().
    • We get the width of the screen and use setIndicatorBounds(int left, int right) method to set the indicator bounds for the group view of an expandable list view.


Define the activity in AndroidManifest.xml file.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android=""
    android:versionName="1.0" >

        android:targetSdkVersion="17" />

        android:theme="@style/AppTheme" >
            android:label="@string/app_name" >
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />



Run your application and you will get the output as shown in the beginning of this tutorial.

If you want to set the group indicator of expandable list to right side then uncomment the highlighted line in onCreate() method. You will get the output as shown below.

Project Folder Structure

The complete folder structure of this example is shown below.

Tags: , , , , , ,

  • titusfx

    You got a little error in your file child_item.xml. You need to change the property src for “@android:drawable/ic_delete”

    • Vishwas Shashidhar

      You need to add an icon for delete…

  • Rob

    Very nice example! Excellent job and very helpful!
    Thank you

  • Nicolas

    Very nice tutorial! I was exactly looking for something like this: an example using the 3 different layouts.

    Good job ;)

  • Peter

    I bow to you! I was struggling with deleting a group for days! Thank you!

  • neto

    Hi, Very nice example, but I have one question … in

    final ExpandableListAdapter expListAdapter ExpandableListAdapter = new (this, groupList, laptopCollection);

    My app say Can not instantiate the type ExpandableListAdapter.

    what can I do?

    • Neto

      everything is correct now was missing just a little detail.

      • hicham1991

        was is missing plzz i have the same problem

        • Sharjeel

          You need to
          setContentView(your xml) .
          It worked for me.

  • hicham1991

    hello thx for this example ,can you plz tell me how to put an expandablelistview in a drawerlayout so i can slide it ??

    thx again

  • Jimson

    Hi thx for the tutorial. I have the same problem as hicham1991. I would like to put and expandablelistview into a Fragment. I’ve tried everything whithout success.
    thank for your help

  • Bhavesh

    very helpful….
    thanks :)

  • Pingback: Android Expandable List Example | Android Notes

  • Pingback: Expandable List with image on child items | Learn Android Today

  • Mohammed


    Big thanks for this helpful tutorial. I have one proble, where only the parent are shown and when click on the icon to expand, it is not!

  • indrajeet kumar

    Very Helpful tutorial.Thanks a lot…

  • kaushal

    expandable listview layout how to set in tablet in better way? pls help me ASAP pls

  • saber


  • Alex Dodu

    Thank you Nithya, this page has helped me a lot with the Expandible List View. It has helped me also yet with another problem: I already extended ActionBarActivity, so I couldn’t extend ListView too. Your tutorial has solved also this problem. as you have an ExpandableListView attribute and then apply setAdapter(adapter) on it. Thank you!

  • ella


    from some reason the java files don’t identify laptop_list, laptop and delete:

    expListView = (ExpandableListView) findViewById( in MainActivity,

    if (convertView == null) {
    convertView = inflater.inflate(R.layout.child_item, null);

    TextView item = (TextView) convertView.findViewById(;

    ImageView delete = (ImageView) convertView.findViewById(;
    in the second file.

    pluss there is an error in the next places (second java file):
    convertView = infalInflater.inflate(R.layout.group_item,
    TextView item = (TextView) convertView.findViewById(;

    does anyone know what can it be? it would help me alot

    • Alex Dodu

      Hi ella, I had a similar problem inilially.
      You must have an import of:
      import com.theopentutorials.expandablelist.R; – in the second file, if the two files are in different packages.
      And then make right-click on the project and Refresh to be sure.
      Otherwise it does not see R file.

  • Vinod Rajan

    I would like to pass image url for each sub category thru group children, image url will be different for each how can we do this.

    I passed subcatname like this.

    String subcatname = jsonSubCatNode.optString(“ChildName”).toString();

    for passing both image url and subcatname how?

  • beni

    how to populate expandable list view using can u help my please

  • yosef birhane

    tnxs for all but i have one question , how can we change the list from database not from java file?

  • sandy

    thankyou for your tutorial really helpful

  • Sahbi

    could you please do a tutorial on how to get data from database using Json and then adding that data to this expandable list view ?

  • Pingback: Android: RuntimeException: Unable to start activity ComponentInfoCopyQuery CopyQuery | Question & Answer Tool for your Technical Queries,CopyQuery, ejjuit, query, copyquery,, android doubt, ios question, sql query, sqlite query, nodejsqu

  • Yim

    Could you give me some example of Expandable working with json?

  • Aavishkar

    I am not getting that up and down arrow in expandable list.. how did you do it?

  • adam

    help me please : I have same problem in class ExpandableListAdapter, if I try write this lines

    if (convertView == null) {

    convertView = inflater.inflate(R.layout.child_item, null);

    TextView item = (TextView) convertView.findViewById(;


    if (convertView == null) {
    LayoutInflater infalInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

    convertView = infalInflater.inflate(R.layout.group_item, null);

    TextView item = (TextView) convertView.findViewById(;

    I have error ( (R.layout.child_item,) not find child_item

    error in ( -> change…..

    And same with

    I have error ( (R.layout.group_item, null) not find group_item

    error in ( -> change …

  • Charlie

    Great tutorials, this is the second one i finish from your page.. but i think you should put the code for everyone to download.
    Thnks for taking the time to do and post this. :)

  • Pingback: [android] Expandable Listview | PipisCrew Official Homepage

  • Pingback: 2 level Expandable List View in Android [closed] | Zielinski Answers

  • Eff

    Great job :)

  • ainos

    Thank you :)

  • Monika

    What should I do if I don’t want all groups to have child list (just the specified ones)?

  • volety kiran

    Thnks for the tutorial and can I know how do I delete the group if there are no childs available

  • Pi-Nerd

    Nice tutorial, but the code in on line 036 should be:

    “final ExpandableListAdapter expListAdapter = new ExpandableListAdapter(); ”

    and then on a new line:

    ” expListAdapter.ExpandableListAdapter(context, childList,laptopCollection);”

    because else Android studio won’t compile.

  • joehamir balabadan

    i get error when i remove child..

  • ahmad

    please can any one give me the full project of this tutorial

  • harsha

    if group is not having child items how can i start another activity with that group item

  • Pingback: Expandable views | D20 Capstone

  • Roman K

    Android Studio doesn’t like when you pass ‘null’ as the second parameter here:

    inflater.inflate(R.layout.child_item, null);

    So I figure the right way to do it is this:

    inflater.inflate(R.layout.child_item, parent, false);

    (Basically, this way it does use parent view, but does not attach the new view to it – as far as I understand)

  • Jorge Américo Vargas Freitas

    I’m currently trying to figure out how to connect a prepopulated SQLite database to a ExpandableListView. If anyone knows how to do that, please, jump in:

  • Pingback: java - Vue par défaut du tiroir de navigation vers ExpandableListView

  • Pingback: java - De Navegación por defecto Cajón de Ver a ExpandableListView

  • Pingback: android - Navigazione predefinita Cassetto Vista ExpandableListView

  • Afaq Shahid

    I am really impressed your writing talent as well as with the format in your blog.
    Free android apps for photo editing.

  • Sargodha Dot Net

    helpful post.

  • gouri deb

    This is a good time to make long term plans and it’s timely.
    Have fun. I have read this post, and if you will excuse me, I would like to advise you on interesting topics or tips.
    You can write the following articles on this topic.
    I want to read more topics on this topic!
    english stories english short stories with moral value What is the factorial of 100

  • Pingback: Default Navigation Drawer View to ExpandableListView