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