Android Expandable ListView simple Example in android ~ Tutorials, IT and Design

Android Expandable ListView simple Example in android. We are aware about android most powerful feature ListView. We can handle ListView click event e.g clicking on ListView row, we can start a new activity or what ever we want to do. But it some how strange to many developer, clicking on ListView row it should expand and show more details in spite of opening a new Activity and we can shrink row of ListView after reading details information. This is feature known as ExpandableListView in android. ExpandableListView is pre-define widget in android . and much similar to android ListView.
So here we go for ExpandableListView Simple Example with source code at the end of this article.
ExpandableListView include some steps to create one simple sample Create one fresh project and Extends ExpandableListActivity inspite of Activity public class MainActivity extends ExpandableListActivity

ExpandableListView include two kind of data one for Group Item and One for child of corresponding
Group item so lets have a look how prepare data for ExpandableListView

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

     ArrayList<String> groupItem = new ArrayList<String>();
     ArrayList<Object> childItem = new ArrayList<Object>();

     public void setChildGroupData() {
  /**
   * Add Data For TecthNology
   */
  ArrayList<String> child = new ArrayList<String>();
  child.add("Java");
  child.add("Drupal");
  child.add(".Net Framework");
  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);
  /**
   * Add Data For Extras
   */
  child = new ArrayList<String>();
  child.add("Contact Us");
  child.add("About Us");
  child.add("Location");
  child.add("Root Cause");
  childItem.add(child);
     }

Now Data is ready to showing inside ExpandableListView. Now just like a simple list view we need one adapter to bind data to ExpandableListView. But this time we will use BaseExpandableListAdapter in place of BaseAdapter as it provide a way to create child of a Group when we expand it Finally we need two Layout one to showing Group Row and One two showing Child Row inside ExpandableListView Main Hurdle How to perform Click on child of ExpandableListView? ExpandableListView provide OnChildClickListener but for unknown reason, I am not able to perform child click event using this.
So i created one another way.while creating Child View we will perform click Listener over there in getChildView method of Adapter So now times to introduce with Code step by Step

Step 1) Change your Main Activity code to as following


package com.multilayerexpandable;

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 {

 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  ExpandableListView expandbleLis = getExpandableListView();
  expandbleLis.setDividerHeight(2);
  expandbleLis.setGroupIndicator(null);
  expandbleLis.setClickable(true);

  setGroupData();
  setChildGroupData();

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

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

 ArrayList<String> groupItem = new ArrayList<String>();
 ArrayList<Object> childItem = new ArrayList<Object>();

 public void setChildGroupData() {
  /**
   * Add Data For TecthNology
   */
  ArrayList<String> child = new ArrayList<String>();
  child.add("Java");
  child.add("Drupal");
  child.add(".Net Framework");
  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);
  /**
   * Add Data For Extras
   */
  child = new ArrayList<String>();
  child.add("Contact Us");
  child.add("About Us");
  child.add("Location");
  child.add("Root Cause");
  childItem.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;
 }
}

Step2) Create two XML Layout one for Group row and one for Childe Row of ExpandableListView Group Row XML Layout

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

Child Row XML Layout

<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/black"
    android:clickable="true"
    android:orientation="vertical"
    android:paddingLeft="40dp"
    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 3) Finally Create one New class for binding data inside ExpandableListView


package com.multilayerexpandable;

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 NewAdapter extends BaseExpandableListAdapter {

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

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

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

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

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

 @Override
 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() {
   @Override
   public void onClick(View v) {
    Toast.makeText(activity, tempChild.get(childPosition),
      Toast.LENGTH_SHORT).show();
   }
  });
  return convertView;
 }

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

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

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

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

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

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

 @Override
 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;
 }

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

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

}

So Screen Shot of Complete Guide will be like