Android Simple Expandable ListView

By | July 8, 2014

Android Expandable ListView is view which is used to group list of data into category , it is quite like listview but has two levels called group and children , groups are expanded and collapsed to show and hide it’s childrens respectively .

In this tutorial, we will see how to create a simple expandable list view using Android’s ExpandableListView widget and we also see how to set onclicklistener for children’s and also to determine state of groups on expand and collapse .

Below is the Screen Shot of the application


Project Detail

Project Name SimpleExpList
Package com.pavan.simpleexplist
Minimum SDK API 8
Target SDK API 17
Theme Holo Light with Dark Action Bar

XML Layout

Create XML Layouts inside the res/layout directory of your project

  1. activity_main.xml.
  2. group_item.xml.
  3. child_item.xml.

Create activity_main.xml file and Add ExpandableListView element

file : 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/exp_list”
        android:layout_width=”match_parent”
        android:layout_height=”match_parent” >
    </ExpandableListView>

</RelativeLayout>

Create group_item.xml file and this xml layout is for ExpandableListView Group’s

file : group_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=”match_parent”
    android:orientation=”vertical”
    android:padding=”10dp”
    android:background=”#B2FC9C”>

    <TextView
        android:id=”@+id/group_name”
        android:layout_width=”wrap_content”
        android:layout_height=”wrap_content”
        android:paddingLeft=”25dp”
        android:textSize=”25dp” />

</LinearLayout>

Create group_item.xml file and this xml layout is for ExpandableListView Children’s

file : child_item.xml

<?xml version=”1.0″ encoding=”utf-8″?>
<RelativeLayout
    xmlns:android=”http://schemas.android.com/apk/res/android”
    android:layout_width=”match_parent”
    android:layout_height=“match_parent”
    android:layout_marginLeft=”50dp”
    android:paddingBottom=”4dp”
    android:paddingTop=”4dp” >

    <TextView
        android:id=”@+id/country_name”
        android:layout_width=”wrap_content”
        android:layout_height=”wrap_content”
        android:layout_marginBottom=”14dp”
        android:layout_marginLeft=”29dp”
        android:textSize=”20sp” />

</RelativeLayout>

Model For Group And Child

Create a model class Group inside your application package , and add getter’s and setter’s method for the variable’s of this class to accessing the group data

file : Group.java

package com.pavan.simpleexplist;

import java.util.ArrayList;

public class Group {

    private String Name;
    private ArrayList<Child> Items;

    public String getName() {
        return Name;
    }

    public void setName(String name) {
        this.Name = name;
    }

    public ArrayList<Child> getItems() {
        return Items;
    }

    public void setItems(ArrayList<Child> Items) {
        this.Items = Items;
    }

}

Create a model class Child inside your application package , and add getters and setters method for the variable’s of this class to accessing the child data .

file : child.java

package com.pavan.simpleexplist;

public class Child {

    private String Name;

    public String getName() {
        return Name;
    }

    public void setName(String Name) {
        this.Name = Name;
    }

}

Adapter

Create a class ExpandableListAdapter which extends BaseExpandableListAdapter to populate items associated with this view. this class provides two important methods which returns view object used for rendering group and child items .

  1. getGroupView() – Returns view for the list group item .
  2. getChildView() – Returns view for list child item .

file :ExpandListAdapter.java

package com.pavan.simpleexplist;

import java.util.ArrayList;
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 ExpandListAdapter extends BaseExpandableListAdapter {

    private Context context;
    private ArrayList<Group> groups;

    public ExpandListAdapter(Context context, ArrayList<Group> groups) {
        this.context = context;
        this.groups = groups;
    }

    @Override
    public Object getChild(int groupPosition, int childPosition) {
        ArrayList<Child> chList = groups.get(groupPosition)
                .getItems();
        return chList.get(childPosition);
    }

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

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

        Child child = (Child) getChild(groupPosition,
                childPosition);
        if (convertView == null) {
            LayoutInflater infalInflater = (LayoutInflater) context
                    .getSystemService(context.LAYOUT_INFLATER_SERVICE);
            convertView = infalInflater.inflate(R.layout.child_item, null);
        }
        TextView tv = (TextView) convertView.findViewById(R.id.country_name);
        tv.setText(child.getName().toString());

        return convertView;

    }

    @Override
    public int getChildrenCount(int groupPosition) {
        ArrayList<Child> chList = groups.get(groupPosition)
                .getItems();

        return chList.size();
    }

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

    @Override
    public int getGroupCount() {
        return groups.size();
    }

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

    @Override
    public View getGroupView(int groupPosition, boolean isExpanded,
            View convertView, ViewGroup parent) {
        Group group = (Group) getGroup(groupPosition);
        if (convertView == null) {
            LayoutInflater inf = (LayoutInflater) context
                    .getSystemService(context.LAYOUT_INFLATER_SERVICE);
            convertView = inf.inflate(R.layout.group_item, null);
        }
        TextView tv = (TextView) convertView.findViewById(R.id.group_name);
        tv.setText(group.getName());
        return convertView;
    }

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

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

}

Main Activity

  1. Create a class MainActivty which extends Activity and set the content of this activity with the above defined xml layout (activity_main.xml) file this is the activity which contains expandable list view .
  2. As you can see inside this class i have defined a method SetStandardGroup() , which is used for listing group and child data  and which returns ArrayList<Group> .
  3. Create a custom adapter by passing the ArrayList<Group> data to it and set it to expandable list view.
  4. Setting onClickListener for child items  and setting OnGroupExpandableListener is very explanatory which you can find in the below , where i have added comment line for it.

file :MainActivity.java

package com.pavan.simpleexplist;

import java.util.ArrayList;
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.OnGroupCollapseListener;
import android.widget.ExpandableListView.OnGroupExpandListener;
import android.widget.Toast;

public class MainActivity extends Activity {

    private ExpandListAdapter ExpAdapter;
    private ArrayList<Group> ExpListItems;
    private ExpandableListView ExpandList;

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

        ExpandList = (ExpandableListView) findViewById(R.id.exp_list);
        ExpListItems = SetStandardGroups();
        ExpAdapter = new ExpandListAdapter(MainActivity.this, ExpListItems);
        ExpandList.setAdapter(ExpAdapter);

        ExpandList.setOnChildClickListener(new OnChildClickListener() {

            @Override
            public boolean onChildClick(ExpandableListView parent, View v,
                    int groupPosition, int childPosition, long id) {

                String group_name = ExpListItems.get(groupPosition).getName();

                ArrayList<Child> ch_list = ExpListItems.get(
                        groupPosition).getItems();

                String child_name = ch_list.get(childPosition).getName();

                showToastMsg(group_name + “n” + child_name);

                return false;
            }
        });

        ExpandList.setOnGroupExpandListener(new OnGroupExpandListener() {

            @Override
            public void onGroupExpand(int groupPosition) {
                String group_name = ExpListItems.get(groupPosition).getName();
                showToastMsg(group_name + “n Expanded”);

            }
        });

        ExpandList.setOnGroupCollapseListener(new OnGroupCollapseListener() {

            @Override
            public
void onGroupCollapse(int groupPosition) {
                String group_name = ExpListItems.get(groupPosition).getName();
                showToastMsg(group_name + “n Expanded”);

            }
        });

    }

    public ArrayList<Group> SetStandardGroups() {

        ArrayList<Group> group_list = new ArrayList<Group>();
        ArrayList<Child> child_list;

        // Setting Group 1
        child_list = new ArrayList<Child>();
            Group gru1 = new Group();
            gru1.setName(“Apple”);
  
            Child ch1_1 = new Child();
            ch1_1.setName(“Iphone”);
            child_list.add(ch1_1);
   
            Child ch1_2 = new Child();
            ch1_2.setName(“ipad”);
            child_list.add(ch1_2);
   
            Child ch1_3 = new Child();
            ch1_3.setName(“ipod”);
            child_list.add(ch1_3);

        gru1.setItems(child_list);

        // Setting Group 2
        child_list = new ArrayList<Child>();
            Group gru2 = new Group();
            gru2.setName(“SAMSUNG”);
   
            Child ch2_1 = new Child();
            ch2_1.setName(“Galaxy Grand”);
            child_list.add(ch2_1);
   
            Child ch2_2 = new Child();
            ch2_2.setName(“Galaxy Note”);
            child_list.add(ch2_2);
   
            Child ch2_3 = new Child();
            ch2_3.setName(“Galaxy Mega”);
            child_list.add(ch2_3);
   
            Child ch2_4 = new Child();
            ch2_4.setName(“Galaxy Neo”);
            child_list.add(ch2_4);

        gru2.setItems(child_list);

        //listing all groups
        group_list.add(gru1);
        group_list.add(gru2);

        return group_list;
    }

    public void showToastMsg(String Msg) {
        Toast.makeText(getApplicationContext(), Msg, Toast.LENGTH_SHORT).show();
    }

}

  • Can't This Be Done Using One Class & One XML File .??