Android Expandable List View Tutorial

1/9/14 Android Expandable List View Tutorial
www.androidhive.info/2013/07/android-expandable-list-view-tutorial/ 1/15
74 Comments Tweet 12
advertise here
July 27, 2013 08:32 PM
Android Expandable List View Tutorial
Expandable list view is used to group list data by
categories. It has the capability of expanding and
collapsing the groups when user touches header.
If you are not aware of list view before please refer to this
tutorial Android ListView Tutorial
274 Like 1
Lets start by creating a new project..
1. Create a new project in the Eclipse IDE from File Android Application Project and fill all required
details. I left my main activity name as Mai nAct ivit y. java
2. In order to create an expandable list view, we need three xml layout files. First one is for main listview,
2nd one for list view group item and 3rd one is for list view child item. Open your act ivit y_main.xml
and add Expandabl eListView element.
3. Create another xml layout for list view group header. I created an xml file named l ist_group. xml
and pasted following code.
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#f4f4f4" >

<ExpandableListView
android:id="@+id/lvExp"
android:layout_height="match_parent"
android:layout_width="match_parent"/>

</LinearLayout>
4.Create one more xml file named l ist_it em.xml for child list item. This will contain simple TextView
element.
5. I am using a custom adapter class to create list view. Create a new class file called
Expandabl eListAdapt er.j ava and extend this from BaseExpandabl eListAdapt er . This class
provides required methods to render listview.
get GroupView( ) Returns view for the list group header
get Chil dView( ) Returns view for list child item
list_group.xml
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="8dp"
android:background="#000000">

<TextView
android:id="@+id/lblListHeader"
android:paddingLeft="?android:attr/expandableListPreferredItemPaddingLeft"
android:textSize="17dp"
android:textColor="#f9f93d" />

</LinearLayout>
list_item.xml
android:layout_width="match_parent"
android:layout_height="55dip"
android:orientation="vertical" >

<TextView
android:id="@+id/lblListItem"
android:textSize="17dip"
android:paddingTop="5dp"
android:paddingBottom="5dp"
android:paddingLeft="?android:attr/expandableListPreferredChildPaddingLeft"

</LinearLayout>
ExpandableListAdapter.java
package info.androidhive.expandablelistview;

import java.util.HashMap;
import java.util.List;

Search .. ERRORS DOWNLOAD
import android.content.Context;
import android.graphics.Typeface;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseExpandableListAdapter;
import android.widget.TextView;

public class ExpandableListAdapter extends BaseExpandableListAdapter {

private Context _context;
private List<String> _listDataHeader; // header titles
// child data in format of header title, child title
private HashMap<String, List<String>> _listDataChild;

public ExpandableListAdapter(Context context, List<String> listDataHeader,
HashMap<String, List<String>> listChildData) {
this._context = context;
this._listDataHeader = listDataHeader;
this._listDataChild = listChildData;
}

@Override
public Object getChild(int groupPosition, int childPosititon) {
return this._listDataChild.get(this._listDataHeader.get(groupPosition))
.get(childPosititon);
}

@Override
public long getChildId(int groupPosition, int childPosition) {
return childPosition;
}

@Override
public View getChildView(int groupPosition, final int childPosition,
boolean isLastChild, View convertView, ViewGroup parent) {

final String childText = (String) getChild(groupPosition, childPosition);

if (convertView == null) {
LayoutInflater infalInflater = (LayoutInflater) this._context
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
convertView = infalInflater.inflate(R.layout.list_item, null);
}

TextView txtListChild = (TextView) convertView
.findViewById(R.id.lblListItem);

txtListChild.setText(childText);
return convertView;
}

@Override
public int getChildrenCount(int groupPosition) {
return this._listDataChild.get(this._listDataHeader.get(groupPosition))
.size();
}

@Override
public Object getGroup(int groupPosition) {
return this._listDataHeader.get(groupPosition);
}

@Override
public int getGroupCount() {
return this._listDataHeader.size();
6. Once you are done with customer adapter, open your Mai nAct ivit y. java and do the following
changes. In the following I created required data needed for list view and passed it to custom adapter.
}

@Override
public long getGroupId(int groupPosition) {
return groupPosition;
}

@Override
public View getGroupView(int groupPosition, boolean isExpanded,
View convertView, ViewGroup parent) {
String headerTitle = (String) getGroup(groupPosition);
if (convertView == null) {
LayoutInflater infalInflater = (LayoutInflater) this._context
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
convertView = infalInflater.inflate(R.layout.list_group, null);
}

TextView lblListHeader = (TextView) convertView
.findViewById(R.id.lblListHeader);
lblListHeader.setTypeface(null, Typeface.BOLD);
lblListHeader.setText(headerTitle);

return convertView;
}

@Override
public boolean hasStableIds() {
return false;
}

@Override
public boolean isChildSelectable(int groupPosition, int childPosition) {
return true;
}
}
MainActivity.java

import java.util.ArrayList;
import android.app.Activity;
import android.os.Bundle;
import android.widget.ExpandableListView;
import android.widget.ExpandableListView.OnChildClickListener;
import android.widget.ExpandableListView.OnGroupClickListener;
import android.widget.ExpandableListView.OnGroupCollapseListener;
import android.widget.ExpandableListView.OnGroupExpandListener;
import android.widget.Toast;

public class MainActivity extends Activity {

ExpandableListAdapter listAdapter;
ExpandableListView expListView;
List<String> listDataHeader;
HashMap<String, List<String>> listDataChild;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

// get the listview
expListView = (ExpandableListView) findViewById(R.id.lvExp);

// preparing list data
prepareListData();

listAdapter = new ExpandableListAdapter(this, listDataHeader, listDataChild);

// setting list adapter
expListView.setAdapter(listAdapter);
}

/*
* Preparing the list data
*/
private void prepareListData() {
listDataHeader = new ArrayList<String>();
listDataChild = new HashMap<String, List<String>>();

// Adding child data
listDataHeader.add("Top 250");
listDataHeader.add("Now Showing");
listDataHeader.add("Coming Soon..");

List<String> top250 = new ArrayList<String>();
top250.add("The Shawshank Redemption");
top250.add("The Godfather");
top250.add("The Godfather: Part II");
top250.add("Pulp Fiction");
top250.add("The Good, the Bad and the Ugly");
top250.add("The Dark Knight");
top250.add("12 Angry Men");

List<String> nowShowing = new ArrayList<String>();
nowShowing.add("The Conjuring");
nowShowing.add("Despicable Me 2");
nowShowing.add("Turbo");
nowShowing.add("Grown Ups 2");
nowShowing.add("Red 2");
nowShowing.add("The Wolverine");

List<String> comingSoon = new ArrayList<String>();
comingSoon.add("2 Guns");
comingSoon.add("The Smurfs 2");
comingSoon.add("The Spectacular Now");
comingSoon.add("The Canyons");
comingSoon.add("Europa Report");

listDataChild.put(listDataHeader.get(0), top250); // Header, Child data
listDataChild.put(listDataHeader.get(1), nowShowing);
listDataChild.put(listDataHeader.get(2), comingSoon);
}
}
Run your project, you should see following output. (Note: The list view group indicators might change
depending upon your android version)
ListView child item click listener
Detecting the child item click can be done by implementing set OnChil dCli ckLi st ener listener on
listview.
Listening when group is expanded
You may want to execute some lines of code when the listview group is expanded. For this you can use
set OnGroupExpandListener which triggers an event when listview group expanded.
Listening when group is collapsed
// Listview on child click listener
expListView.setOnChildClickListener(new OnChildClickListener() {

@Override
public boolean onChildClick(ExpandableListView parent, View v,
int groupPosition, int childPosition, long id) {
Toast.makeText(
getApplicationContext(),
listDataHeader.get(groupPosition)
+ " : "
+ listDataChild.get(
listDataHeader.get(groupPosition)).get(
childPosition), Toast.LENGTH_SHORT)
.show();
return false;
}
});
// Listview Group expanded listener
expListView.setOnGroupExpandListener(new OnGroupExpandListener() {

@Override
public void onGroupExpand(int groupPosition) {
Toast.makeText(getApplicationContext(),
listDataHeader.get(groupPosition) + " Expanded",
Toast.LENGTH_SHORT).show();
}
});
Implementing set OnGroupCol lapseListener will trigger an event when listview group is collapsed.
Complete Code
Here is the final code for Mai nAct ivit y. java
// Listview Group collasped listener
expListView.setOnGroupCollapseListener(new OnGroupCollapseListener() {

@Override
public void onGroupCollapse(int groupPosition) {
listDataHeader.get(groupPosition) + " Collapsed",

}
});
MainActivity.java

import java.util.ArrayList;
import android.app.Activity;
import android.os.Bundle;
import android.widget.ExpandableListView;
import android.widget.ExpandableListView.OnChildClickListener;
import android.widget.ExpandableListView.OnGroupClickListener;
import android.widget.ExpandableListView.OnGroupCollapseListener;
import android.widget.ExpandableListView.OnGroupExpandListener;
import android.widget.Toast;

public class MainActivity extends Activity {

ExpandableListAdapter listAdapter;
ExpandableListView expListView;
List<String> listDataHeader;
HashMap<String, List<String>> listDataChild;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

// get the listview
expListView = (ExpandableListView) findViewById(R.id.lvExp);

// preparing list data
prepareListData();

listAdapter = new ExpandableListAdapter(this, listDataHeader, listDataChild);

// setting list adapter
expListView.setAdapter(listAdapter);

// Listview Group click listener
expListView.setOnGroupClickListener(new OnGroupClickListener() {

@Override
public boolean onGroupClick(ExpandableListView parent, View v,
int groupPosition, long id) {
// Toast.makeText(getApplicationContext(),
// "Group Clicked " + listDataHeader.get(groupPosition),
// Toast.LENGTH_SHORT).show();
return false;
}
});

// Listview Group expanded listener
expListView.setOnGroupExpandListener(new OnGroupExpandListener() {

@Override
public void onGroupExpand(int groupPosition) {
listDataHeader.get(groupPosition) + " Expanded",
}
});

// Listview Group collasped listener
expListView.setOnGroupCollapseListener(new OnGroupCollapseListener() {

@Override
public void onGroupCollapse(int groupPosition) {
listDataHeader.get(groupPosition) + " Collapsed",

}
});

// Listview on child click listener
expListView.setOnChildClickListener(new OnChildClickListener() {

@Override
public boolean onChildClick(ExpandableListView parent, View v,
int groupPosition, int childPosition, long id) {
// TODO Auto-generated method stub
Toast.makeText(
getApplicationContext(),
listDataHeader.get(groupPosition)
+ " : "
+ listDataChild.get(
listDataHeader.get(groupPosition)).get(
childPosition), Toast.LENGTH_SHORT)
.show();
return false;
}
});
}

/*
* Preparing the list data
*/
private void prepareListData() {
listDataHeader = new ArrayList<String>();
listDataChild = new HashMap<String, List<String>>();

Tweet
12
19
Share this article on
Report a Bug in this article
(If you find any error either in code or content please help me in improvising the content)
Email address / Full name
listDataHeader.add("Top 250");
listDataHeader.add("Now Showing");
listDataHeader.add("Coming Soon..");

List<String> top250 = new ArrayList<String>();
top250.add("The Shawshank Redemption");
top250.add("The Godfather");
top250.add("The Godfather: Part II");
top250.add("Pulp Fiction");
top250.add("The Good, the Bad and the Ugly");
top250.add("The Dark Knight");
top250.add("12 Angry Men");

List<String> nowShowing = new ArrayList<String>();
nowShowing.add("The Conjuring");
nowShowing.add("Despicable Me 2");
nowShowing.add("Turbo");
nowShowing.add("Grown Ups 2");
nowShowing.add("Red 2");
nowShowing.add("The Wolverine");

List<String> comingSoon = new ArrayList<String>();
comingSoon.add("2 Guns");
comingSoon.add("The Smurfs 2");
comingSoon.add("The Spectacular Now");
comingSoon.add("The Canyons");
comingSoon.add("Europa Report");

listDataChild.put(listDataHeader.get(0), top250); // Header, Child data
listDataChild.put(listDataHeader.get(1), nowShowing);
listDataChild.put(listDataHeader.get(2), comingSoon);
}
}
274
Like
1
Tweet 404 1k
Enter your email here SUBSCRIBE
Subscribe for latest updates 127121
Advertise Here Advertise Here
Follow @RaviTamada 2,190 f ollowers
Advertise
Give brief description about the bug...
Report
13k Like
Act ion Bar Adapt er Animat ion Apps
Async Beginner Camera Dashboard
Dat abase facebook Fragment s GCM
Gest ures Google GPS Grid HTTP
I nt ermediat e json List View Maps
MySQL Navigat ion Drawer PHP Pinch
Quick Tips sessions Spinner SQLit e
Swipe Tab View Twit t er UI Video
View Pager xml
advertise here
Tag Cloud
AndroidHive
13,755 people like AndroidHive.
Facebook social plugin
Like
Ravi Tamada
google.com/+RaviTamada
2,146 followers
Follow
MOST POPULAR
1 Android SQLite Database
Tutorial - 597,334 views
2 Android Custom ListView with
Image and Text - 485,578 views
3 Android JSON Parsing Tutorial -
472,880 views
4 How to connect Android with
PHP, MySQL - 449,953 views
5 Android Push Notifications
using Google Cloud Messaging
(GCM), PHP and MySQL -
362,573 views
NETWORK
DESIGN
d e s i g n . a n d r o i d h i v e . i n f o
TIPS
t i p s . a n d r o i d h i v e . i n f o
ERRORS
e r r o r s . a n d r o i d h i v e . i n f o
DOWNLOAD
d o w n l o a d . a n d r o i d h i v e . i n f o
Advertise | Privacy Policy | Terms & Conditions 2014 AndroidHive | All Rights Reserved
6 Android Login and Registration
with PHP, MySQL and SQLite -
327,255 views
7 Android Tab Layout Tutorial -
322,494 views
8 Android XML Parsing Tutorial -
251,797 views
9 Android Login and Registration
Screen Design - 242,197 views
10 Android ListView Tutorial -
223,407 views
127121
subscribers
&
1035639
downloads
REQUEST TUTORI AL
Email / Name *
Your email id or name
Description *
Brief description about your
thought. (Please don't spam)
SEND
Creative Commons Attribution 3.0
Unported License
.

Android Expandable List View Tutorial

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Android Expandable List View Tutorial

Uploaded by

Copyright:

Available Formats

1/9/14 Android Expandable List View Tutorial

You might also like