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 of list view. When u click on the header of list view it expands and when u again click on the same header it collapse. Like in below figures...

                         

                               Fig 1: Expanding Mode

Fig 2: Collapsing Mode

Some time we need to extend group header by default, for this we have following bits of code..
expandableList.expandGroup(0); //expand first position by default
expandableList.expandGroup(1); //expand second position by default

One more thing sometime we need to disable the collapsing feature in expandable list view for this we have ,

expandableList.setOnGroupClickListener(new OnGroupClickListener() {

@Override

public boolean onGroupClick(ExpandableListView parent, View v,

int groupPosition, long id) {

if(groupPosition==0)//disable collapsing feature of group header first position

                                   {

                                      return true;

}else{

return false;

}

}

});
In override the onGroupClick method. If true, the expandableListView thinks that the ability to expand and collapse has been handled. If false then it has not been handled, and will take care of the action. 

To generate expandable list view in project we need three layouts, one Adapter and one Main Activity.
The three layout goes like this....

1. main_activity.xml 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:orientation="vertical" >

    <ExpandableListView

        android:id="@+id/expandableList"

        android:layout_width="match_parent"

        android:layout_height="match_parent" />

</LinearLayout>

2. list_group.xml

<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="10dp" >

    <TextView

        android:id="@+id/listHeader"

        android:layout_width="fill_parent"

        android:layout_height="40dp"

        android:paddingLeft="?android:attr/expandableListPreferredItemPaddingLeft"

        android:textSize="16sp" />

</LinearLayout>

3. list_item.xml

<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/listItem"

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:textSize="17dip"

        android:paddingTop="5dp"

        android:paddingBottom="5dp"

        android:paddingLeft="?android:attr/expandableListPreferredChildPaddingLeft" />

</LinearLayout>

Now we have to create ExpandableListAdapter.java like this...

For import -> ctrl + alt +o  

public class ExpandableListAdapter extends BaseExpandableListAdapter {

   private Context context;

   private List<String> listDataHeader;   // header titles

   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.listItem);

       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();

   } 

   @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.listHeader);

       lblListHeader.setTypeface(null, Typeface.BOLD); //bold the header

       lblListHeader.setText(headerTitle);

 

       return convertView;

   }

 

   @Override

   public boolean hasStableIds() {

       return false;

   }

 

   @Override

   public boolean isChildSelectable(int groupPosition, int childPosition) {

       return true;

   }

}

Finally MainActivity.java goes like this...

For import ctrl + alt + o

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.expandableList);

getPrepareListData(); // preparing list data

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

expListView.setAdapter(listAdapter); //set the  list adapter

// Listview Group click listener

expListView.setOnGroupClickListener(new OnGroupClickListener() {

@Override

public boolean onGroupClick(ExpandableListView parent, View v,

int groupPosition, long id) {

//do ur task

return false;

}

});

// Listview Group expanded listener

expListView.setOnGroupExpandListener(new OnGroupExpandListener() {

@Override

public void onGroupExpand(int groupPosition) {

//do ur task

}

});

// Listview Group collasped listener

expListView.setOnGroupCollapseListener(new OnGroupCollapseListener() {

@Override

public void onGroupCollapse(int groupPosition) {

//do ur task

}

});

// 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

//do ur task

return false;

}

});

}

private void getPrepareListData() {

listDataHeader = new ArrayList<String>();

listDataChild = new HashMap<String, List<String>>();

// Adding header data

listDataHeader.add("For One Room");

listDataHeader.add("For Two Rooms");

listDataHeader.add("For Flat");

listDataHeader.add("For House");

listDataHeader.add("For Apartment");

// Adding child data

List<String> one_room = new ArrayList<String>();

one_room.add("1 room at baneshwor, kathmandu");

one_room.add("1 room at sundhara, kathmandu");

one_room.add("1 room at pulchowk, lalitpur");

one_room.add("1 room at gwarko, lalitpur");

one_room.add("1 room at sundhara, lalitpur");

one_room.add("1 room at balkumari, lalitpur");

one_room.add("1 room at lazimpat, kathmandu");

List<String> two_room = new ArrayList<String>();

two_room.add("2 rooms at baneshwor, kathmandu");

two_room.add("2 rooms at sundhara, kathmandu");

List<String> flat = new ArrayList<String>();

flat.add("1 flat at baneshwor, kathmandu");

flat.add("1 flat at sundhara, kathmandu");

listDataChild.put(listDataHeader.get(0), one_room); // Header, Child listDataChild.put(listDataHeader.get(1), two_room);

listDataChild.put(listDataHeader.get(2), flat); //you can add others here

}

}

Browse More Articles

Tweet

Written by Kishor Maharjan

We are passionate programmers. Enjoying the rich platforms of Semicolon Family of Programming languages we are proud to call ourselves Semicolon Developers.