Android ExpandableListView Example

ExpandableListView

ExpandableListView is a view that shows items in a vertically scrolling two-level list. This differs from the ListView by allowing two levels: groups which can individually be expanded to show its children.

Level 1 contains Parent items and Level 2 contains Child items.  The items are filled/populated from the ExpandableListAdapter associated with the Parent and Child view.
In below snapshot Technology, Mobile and Manufacturer are Parent Items while all nested items are treated as child items.

Group View:

Expand View:


 ExpandableListView Example

     In this example we will learn how to use ExpandableListView  and how to populate it's item through ExpandableListAdapter

 Steps:
1: Create xml for Parent and Child Items
3: Create MainActivity and populate the data for Parent and Child Items
4: Create ParentLevelAdapter ChildLevelAdapter class and implement BaseExpandableListAdapterand override getChildView and getgroupView methods according to your need.

Step1:

grouprow.xml 


<CheckedTextView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/textView1"
    android:layout_width="wrap_content"
    android:layout_height="60dp"
    android:layout_marginLeft="5dp"
    android:drawableRight="@drawable/plusminus"
    android:gravity="center_vertical"
    android:text="@string/hello_world"
    android:textColor="#FFFFFF"
    android:padding="10dp"
    android:textSelectHandleLeft="@string/hello_world"
    android:textSize="14sp"
    android:textStyle="bold">
</CheckedTextView>

childrow.xml


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="40dp"
    android:background="@android:color/white"
    android:clickable="true"
    android:orientation="vertical"
    android:paddingLeft="30dp"
    tools:context=".MainActivity" >

    <LinearLayout
        android:layout_width="match_parent"
          android:layout_height="39dp"
        android:gravity="center_vertical" >

        <ImageView
            android:id="@+id/childImage"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:layout_margin="5dp"
            android:background="@drawable/ic_launcher"
            android:contentDescription="@string/hello_world" />

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="5dp"
            android:text="@string/hello_world"
            android:textColor="#FFFFFF"
            android:textSize="14sp"
            android:textStyle="bold" />
    </LinearLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@android:color/white" />

</LinearLayout>

Step 2:



MainActivity.java



import java.util.ArrayList;
import android.app.ExpandableListActivity;
import android.content.Context;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ExpandableListView;
import android.widget.ExpandableListView.OnChildClickListener;
import android.widget.Toast;

public class MainActivity extends ExpandableListActivity implements OnChildClickListener {

       ArrayList<String> groupItem = new ArrayList<String>();
       ArrayList<Object> childItem = new ArrayList<Object>();
       ArrayList<Object> grandChildItem = new ArrayList<Object>();
      
       @Override
       public void onCreate(Bundle savedInstanceState) {
              super.onCreate(savedInstanceState);
              ExpandableListView expandbleLis = getExpandableListView();
              expandbleLis.setDividerHeight(2);
              expandbleLis.setGroupIndicator(null);
              expandbleLis.setClickable(true);
             
              // 1st level data
              setGroupData();
             
              // 2nd level data
              setChildGroupData();
             
              // 3rd level data
              setGrandChildGroupData();

              ParentLevelAdapter parentAdapter = new ParentLevelAdapter(groupItem, childItem, grandChildItem);
              parentAdapter.setInflater((LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE), this);
              getExpandableListView().setAdapter(parentAdapter);
              expandbleLis.setOnChildClickListener(this);
       }

       public void setGroupData() {
              groupItem.add("TechNology");
              groupItem.add("Mobile");
              groupItem.add("Manufacturer");
       }
      

       public void setChildGroupData() {
              /**
               * Add Data For TecthNology
               */
              ArrayList<String> child = new ArrayList<String>();
              child.add("Java");
              child.add("C/C++");
              child.add("C#");
              child.add("PHP");
              childItem.add(child);

              /**
               * Add Data For Mobile
               */
              child = new ArrayList<String>();
              child.add("Android");
              child.add("Window Mobile");
              child.add("iPHone");
              child.add("Blackberry");
              childItem.add(child);
              /**
               * Add Data For Manufacture
               */
              child = new ArrayList<String>();
              child.add("HTC");
              child.add("Apple");
              child.add("Samsung");
              child.add("Nokia");
              childItem.add(child);

       }
      
       public void setGrandChildGroupData() {
              /**
               * Add Data For TecthNology
               */
              ArrayList<String> child = new ArrayList<String>();
              child.add("Java");
              child.add("Drupal");
              child.add(".Net Framework");
              child.add("PHP");
              grandChildItem.add(child);

              /**
               * Add Data For Mobile
               */
              child = new ArrayList<String>();
              child.add("Android");
              child.add("Window Mobile");
              child.add("iPHone");
              child.add("Blackberry");
              grandChildItem.add(child);
              /**
               * Add Data For Manufacture
               */
              child = new ArrayList<String>();
              child.add("HTC");
              child.add("Apple");
              child.add("Samsung");
              child.add("Nokia");
              grandChildItem.add(child);

       }

       @Override
       public boolean onChildClick(ExpandableListView parent, View v, int groupPosition, int childPosition, long id) {
              Toast.makeText(MainActivity.this, "Clicked On Child", Toast.LENGTH_SHORT).show();
              return true;
       }
}


 Step 3:


ParentLevelAdapter.java



import java.util.ArrayList;
import android.app.Activity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.BaseExpandableListAdapter;
import android.widget.CheckedTextView;
import android.widget.TextView;
import android.widget.Toast;

@SuppressWarnings("unchecked")
public class ParentLevelAdapter extends BaseExpandableListAdapter {

       public ArrayList<String> groupItem, tempChild;
       public ArrayList<Object> Childtem = new ArrayList<Object>();
       public ArrayList<Object> grandChildItem = new ArrayList<Object>();
      
       public LayoutInflater minflater;
       public Activity activity;

       public ParentLevelAdapter(ArrayList<String> grList, ArrayList<Object> childItem, ArrayList<Object> grandChildItem) {
              groupItem = grList;
              this.Childtem = childItem;
              this.grandChildItem = grandChildItem;
       }

       public void setInflater(LayoutInflater mInflater, Activity act) {
              this.minflater = mInflater;
              activity = act;
       }

       public Object getChild(int groupPosition, int childPosition) {
              return null;
       }

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

       public View getChildView(int groupPosition, final int childPosition, boolean isLastChild, View convertView, ViewGroup parent) {
              tempChild = (ArrayList<String>) Childtem.get(groupPosition);
              TextView text = null;
              if (convertView == null) {
                     convertView = minflater.inflate(R.layout.childrow, null);
              }
              text = (TextView) convertView.findViewById(R.id.textView1);
              text.setText(tempChild.get(childPosition));
              convertView.setOnClickListener(new OnClickListener() {
                     public void onClick(View v) {
                           Toast.makeText(activity, tempChild.get(childPosition), Toast.LENGTH_SHORT).show();
                     }
              });
              return convertView;
       }

       public int getChildrenCount(int groupPosition) {
              return ((ArrayList<String>) Childtem.get(groupPosition)).size();
       }

       public Object getGroup(int groupPosition) {
              return null;
       }

       public int getGroupCount() {
              return groupItem.size();
       }

       @Override
       public void onGroupCollapsed(int groupPosition) {
              super.onGroupCollapsed(groupPosition);
       }

       @Override
       public void onGroupExpanded(int groupPosition) {
              super.onGroupExpanded(groupPosition);
       }

       public long getGroupId(int groupPosition) {
              return 0;
       }

       public View getGroupView(int groupPosition, boolean isExpanded, View convertView, ViewGroup parent) {
              if (convertView == null) {
                     convertView = minflater.inflate(R.layout.grouprow, null);
              }
              ((CheckedTextView) convertView).setText(groupItem.get(groupPosition));
              ((CheckedTextView) convertView).setChecked(isExpanded);
              return convertView;
       }

       public boolean hasStableIds() {
              return false;
       }

       public boolean isChildSelectable(int groupPosition, int childPosition) {
              return false;
       }

}

Posted by at
Labels: ,

2 comments:

  1. Anonymous18 May 2014 at 22:20

    Hi, but what about the grandchildren ? they are not showing up

    ReplyDelete
  2. naeemgik19 May 2014 at 18:14

    Please take care of xml layouts and its Ids. Also the arrows are png images, you must have same name icons. Are you getting some sort of exception?

    ReplyDelete

Subscribe to: Post Comments (Atom)