Expandable listview in android.

Published on Author bloggerten

Hi..

        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.

Let’s 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 MainActivity.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 activity_main.xmland add ExpandableListView element.
activity_main.xml:
<RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android”
    xmlns:tools=”http://schemas.android.com/tools”
    android:layout_width=”match_parent”
    android:layout_height=”match_parent”
    tools:context=”.MainActivity” >
    <ExpandableListView
        android:id=”@+id/ex_list”
        android:layout_width=”wrap_content”
        android:layout_height=”wrap_content” >
    </ExpandableListView>
</RelativeLayout>
Create another xml layout for list view group header. I created an xml file named list_group.xml and pasted following code.
list_group.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=”wrap_content”
    android:orientation=”vertical”
    android:padding=”8dp”
    android:background=”#000000″>
    <TextView
        android:id=”@+id/lblListHeader”
        android:layout_width=”fill_parent”
        android:layout_height=”wrap_content”
        android:paddingLeft=”?android:attr/expandableListPreferredItemPaddingLeft”
        android:textSize=”17dp”
        android:textColor=”#f9f93d” />
</LinearLayout>
Create one more xml file named list_item.xml for child list item. This will contain simple TextView element.
list_item.xml:
<?xml version=”1.0″ encoding=”utf-8″?>
<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”
    android:layout_width=”match_parent”
    android:layout_height=”55dip”
    android:orientation=”vertical” >
    <TextView
        android:id=”@+id/lblListItem”
        android:layout_width=”fill_parent”
        android:layout_height=”wrap_content”
        android:textSize=”17dip”
        android:paddingTop=”5dp”
        android:paddingBottom=”5dp”
        android:textColor=”#000000″
   android:paddingLeft=”?android:attr/expandableListPreferredChildPaddingLeft” />
</LinearLayout>
I am using a custom adapter class to create list view. Create a new class file calledExpandableListAdapter.java and extend this from BaseExpandableListAdapter. This class provides required methods to render listview.
getGroupView() – Returns view for the list group header
getChildView() – Returns view for list child item
ExpandableListAdapter.java:
package com.example.expandable_listview;
import java.util.HashMap;
import java.util.List;
import android.content.Context;
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;
private HashMap<String, List<String>> listdatachild;
public ExpandableListAdapter(Context context,List<String> listdataheader,HashMap<String, List<String>> listdatachild)
{
this.context=context;
this.listdataheader=listdataheader;
this.listdatachild=listdatachild;
}
@Override
public Object getChild(int groupPosition, int childPosition) {
// TODO Auto-generated method stub
return this.listdatachild.get(this.listdataheader.get(groupPosition)).get(childPosition);
}
@Override
public long getChildId(int groupPosition, int childPosition) {
// TODO Auto-generated method stub
return childPosition;
}
@Override
public View getChildView(int groupPosition, int childPosition,
boolean isLastChild, View convertView, ViewGroup parent) {
final String childText=(String)getChild(groupPosition, childPosition);
// TODO Auto-generated method stub
if(convertView==null)
{
LayoutInflater inflater=(LayoutInflater)this.context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
convertView=inflater.inflate(R.layout.list_item, null);
}
TextView tv=(TextView)convertView.findViewById(R.id.lblListItem);
tv.setText(childText);
return convertView;
}
@Override
public int getChildrenCount(int groupPosition) {
// TODO Auto-generated method stub
return this.listdatachild.get(this.listdataheader.get(groupPosition)).size();
}
@Override
public Object getGroup(int groupPosition) {
// TODO Auto-generated method stub
return this.listdataheader.get(groupPosition);
}
@Override
public int getGroupCount() {
// TODO Auto-generated method stub
return this.listdataheader.size();
}
@Override
public long getGroupId(int groupPosition) {
// TODO Auto-generated method stub
return groupPosition;
}
@Override
public View getGroupView(int groupPosition, boolean isExpanded,
View convertView, ViewGroup parent) {
// TODO Auto-generated method stub
String headertext=(String)getGroup(groupPosition);
if(convertView==null)
{
LayoutInflater inflater=(LayoutInflater)this.context.getSystemService(context.LAYOUT_INFLATER_SERVICE);
convertView=inflater.inflate(R.layout.list_group, null);
}
TextView txtGroup=(TextView)convertView.findViewById(R.id.lblListHeader);
txtGroup.setText(headertext);
return convertView;
}
@Override
public boolean hasStableIds() {
// TODO Auto-generated method stub
return false;
}
@Override
public boolean isChildSelectable(int groupPosition, int childPosition) {
// TODO Auto-generated method stub
return false;
}
}
Once you are done with customer adapter, open your MainActivity.java and do the following changes. In the following I created required data needed for list view and passed it to custom adapter.
MainActivity.java:
package com.example.expandable_listview;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import android.app.Activity;
import android.database.DataSetObserver;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ExpandableListAdapter;
import android.widget.ExpandableListView;
import android.widget.Toast;
import android.widget.ExpandableListView.OnChildClickListener;
import android.widget.ExpandableListView.OnGroupClickListener;
import android.widget.ExpandableListView.OnGroupCollapseListener;
import android.widget.ExpandableListView.OnGroupExpandListener;
public class MainActivity extends Activity {
ExpandableListView ex_listview;
ExpandableListAdapter listadapter;
List<String> listDataHeader;
HashMap<String, List<String>> listDataChild;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ex_listview=(ExpandableListView)findViewById(R.id.ex_list);
setdata();
listadapter=new com.example.expandable_listview.ExpandableListAdapter(this,listDataHeader,listDataChild) ;
ex_listview.setAdapter(listadapter);
ex_listview.setOnGroupClickListener(new OnGroupClickListener() {
@Override
public boolean onGroupClick(ExpandableListView parent, View v,
int groupPosition, long id) {
// TODO Auto-generated method stub
return false;
}
});
ex_listview.setOnGroupExpandListener(new OnGroupExpandListener()
{
@Override
public void onGroupExpand(int groupPosition) {
// TODO Auto-generated method stub
Toast.makeText(getApplicationContext(),
listDataHeader.get(groupPosition) + ” Expanded”,
Toast.LENGTH_SHORT).show();
}
});
ex_listview.setOnGroupCollapseListener(new OnGroupCollapseListener()
{
@Override
public void onGroupCollapse(int groupPosition) {
// TODO Auto-generated method stub
Toast.makeText(getApplicationContext(),
listDataHeader.get(groupPosition) + ” Collapsed”,
Toast.LENGTH_SHORT).show();
}
});
ex_listview.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;
}
});
}
private void setdata() {
// TODO Auto-generated method stub
listDataHeader=new ArrayList<String>();
listDataChild=new HashMap<String, List<String>>();
listDataHeader.add(“WORLD”);
listDataHeader.add(“INDIA”);
listDataHeader.add(“TAMILNADU”);
List<String> World=new ArrayList<String>();
World.add(“INDIA”);
World.add(“PAKISTAN”);
World.add(“SIRLANKA”);
World.add(“AUSTRALIA”);
World.add(“KANNADA”);
List<String> India=new ArrayList<String>();
India.add(“TAMILNADU”);
India.add(“KERALA”);
India.add(“ANDRA”);
India.add(“KARNADAKA”);
List<String> Tamilnadu=new ArrayList<String>();
Tamilnadu.add(“Chennai”);
Tamilnadu.add(“Madurai”);
listDataChild.put(listDataHeader.get(0),World);
listDataChild.put(listDataHeader.get(1),India);
listDataChild.put(listDataHeader.get(2), Tamilnadu);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
}
Run your project, you should see following output. (Note: The list view group indicators might change depending upon your android version)
Thanks..

 

Comments

comments