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

274Like 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 M ainA ct iv it y. ja va

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 a ct iv it y_ma in .xml

and add Expan da bleL istVie w element.

3. Create another xml layout for list view group header. I created an xml file named l ist_grou p.xml

and pasted following code.

activity_main.xml



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

Expan da bleL istA da pt er.jav a and extend this from B aseExpan da bleL istA da pt er . This class

provides required methods to render listview.

get Grou pVie w( ) Returns view for the list group header

get Ch ildVie w( ) Returns view for list child item

list_group.xml

list_item.xml



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 _listDataHeader; // header titles // child data in format of header title, child title private HashMap _listDataChild; public ExpandableListAdapter(Context context, List listDataHeader, HashMap 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 M ainA ct iv it y. ja va 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

package info.androidhive.expandablelistview; import java.util.ArrayList;import java.util.HashMap;import java.util.List;import android.app.Activity;import android.os.Bundle;import android.view.View;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 listDataHeader;



HashMap 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(); listDataChild = new HashMap(); // Adding child data listDataHeader.add("Top 250"); listDataHeader.add("Now Showing"); listDataHeader.add("Coming Soon.."); // Adding child data List top250 = new ArrayList(); 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 nowShowing = new ArrayList(); 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 comingSoon = new ArrayList(); 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 On Ch ildC lick List en er 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 On Grou pExpan dListe ne r 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 listenerexpListView.setOnGroupExpandListener(new OnGroupExpandListener() { @Override public void onGroupExpand(int groupPosition) { Toast.makeText(getApplicationContext(), listDataHeader.get(groupPosition) + " Expanded", Toast.LENGTH_SHORT).show(); }});



Implementing set On Grou pC ol la pseL iste ne r will trigger an event when listview group is collapsed.

Complete Code

Here is the final code for M ainA ct iv it y. ja va

// Listview Group collasped listenerexpListView.setOnGroupCollapseListener(new OnGroupCollapseListener() { @Override public void onGroupCollapse(int groupPosition) { Toast.makeText(getApplicationContext(), listDataHeader.get(groupPosition) + " Collapsed", Toast.LENGTH_SHORT).show(); }});

MainActivity.java

package info.androidhive.expandablelistview; import java.util.ArrayList;import java.util.HashMap;import java.util.List;import android.app.Activity;import android.os.Bundle;import android.view.View;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 listDataHeader; HashMap 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) { Toast.makeText(getApplicationContext(), listDataHeader.get(groupPosition) + " Expanded", Toast.LENGTH_SHORT).show(); } }); // Listview Group collasped listener expListView.setOnGroupCollapseListener(new OnGroupCollapseListener() { @Override public void onGroupCollapse(int groupPosition) { Toast.makeText(getApplicationContext(), listDataHeader.get(groupPosition) + " Collapsed", Toast.LENGTH_SHORT).show(); } }); // 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(); listDataChild = new HashMap(); // Adding child data



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.."); // Adding child data List top250 = new ArrayList(); 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 nowShowing = new ArrayList(); 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 comingSoon = new ArrayList(); 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 follow ers

Advertise

Give brief description about the bug...

Report

13kLike



Act ion Bar Adapter Animation Apps

Async Beginner Camera Dashboard

Database facebook Fragments GCM

Gestures Google GPS Grid HTTP

Intermediate json List View Maps

MySQL Navigat ion Drawer PHP Pinch

Quick Tips sessions Spinner SQLite

Swipe Tab View Twitter UI Video

View Pager xml

advertise here

Tag Cloud

AndroidHive

13,755 people like AndroidHive.

Facebook social plugin

Like



Ravi Tamadagoogle.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

DESIGNd e s i g n . a n d r o i d h i v e . i n f o

TIPSt i p s . a n d r o i d h i v e . i n f o

ERRORSe r r o r s . a n d r o i d h i v e . i n f o

DOWNLOADd 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

127121subscribers

& 1035639downloads

REQUEST TUTORIAL

Email / Name *

Your email id or name

Description *

Brief description about your

thought. (Please don't spam)

SENDCreative Commons Attribution 3.0

Unported License

.

Android Expandable List View Tutorial

Documents

Transcript of Android Expandable List View Tutorial