Wednesday 14 March 2012

Android Customized Expandable ListView Example


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. The items come from the ExpandableListAdapter associated with this view. 

Expandable lists are able to show an indicator beside each item to display the item's current state (the states are usually one of expanded group, collapsed group, child, or last child).
Use setChildIndicator(Drawable) or setGroupIndicator(Drawable) (or the corresponding XML attributes) to set these indicators (see the docs for each method to see additional state that each Drawable can have). The default style for an ExpandableListView provides indicators which will be shown next to Views given to the ExpandableListView. The layouts android.R.layout.simple_expandable_list_item_1 and android.R.layout.simple_expandable_list_item_2 (which should be used with SimpleCursorTreeAdapter) contain the preferred position information for indicators.

The context menu information set by an ExpandableListView will be a ExpandableListView.ExpandableListContextMenuInfo object with packedPosition being a packed position that can be used with getPackedPositionType(long) and the other similar methods.

The above source is from : Android Developers Site

Here the below example show List of States with Districts

Here States are act as Group Parent and Districts are act as Child

Output Screenshot:

















































Android UI Layout(main.xml)

This is main UI layout which is visible in main Activity

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Customized Expandable ListView with states and districts" />

    <ExpandableListView
        android:id="@+id/ExpandableListViewid"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" >
    </ExpandableListView>

</LinearLayout>

Android UI Layout(expandablelv_groupview.xml)

This UI layout to show list of Group parent(States in this example)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <TextView
        android:id="@+id/groupTXT"
        android:layout_width="wrap_content"
        android:layout_height="60px"
        android:layout_marginLeft="50px"
        android:gravity="center_vertical" >
    </TextView>

</LinearLayout>

Android UI Layout(expandablelv_childview.xml)

This UI layout to show list of childern(Distcts in this example)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@android:color/black" >

    <TextView
        android:id="@+id/childTXT"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="30px"
        android:textColor="@android:color/white" >
    </TextView>

</LinearLayout>

Java class(ReadData.java)

This class contains two methods one is for get group data and another one is for child data

package com.androidsurya.extendablelv;

import java.util.ArrayList;

public class ReadData {
private static ArrayList<String> groupsList;
private static ArrayList<ArrayList<ArrayList<String>>> childsList;

static ArrayList<String> getGroupData() {
groupsList = new ArrayList<String>();
groupsList.add("Andhra Pradesh");
groupsList.add("Tamil Nadu");
groupsList.add("Karnataka");
return groupsList;
}

static ArrayList<ArrayList<ArrayList<String>>> getChildData() {

childsList = new ArrayList<ArrayList<ArrayList<String>>>();
childsList.add(new ArrayList<ArrayList<String>>());
childsList.get(0).add(new ArrayList<String>());
childsList.get(0).get(0).add("Nellore District");
childsList.get(0).add(new ArrayList<String>());
childsList.get(0).get(1).add("Srikakulam District");
childsList.get(0).add(new ArrayList<String>());
childsList.get(0).get(2).add("Visakhapatnam District");
childsList.get(0).add(new ArrayList<String>());
childsList.get(0).get(3).add("East Godavari District");

childsList.add(new ArrayList<ArrayList<String>>());
childsList.get(1).add(new ArrayList<String>());
childsList.get(1).get(0).add("Ariyalur District");
childsList.get(1).add(new ArrayList<String>());
childsList.get(1).get(1).add("Chennai District");
childsList.get(1).add(new ArrayList<String>());
childsList.get(1).get(2).add("Salem District");
childsList.get(1).add(new ArrayList<String>());
childsList.get(1).get(3).add("Madurai District");

childsList.add(new ArrayList<ArrayList<String>>());
childsList.get(2).add(new ArrayList<String>());
childsList.get(2).get(0).add("Bagalkot District");
childsList.get(2).add(new ArrayList<String>());
childsList.get(2).get(1).add("Bangalore Rural District");
childsList.get(2).add(new ArrayList<String>());
childsList.get(2).get(2).add("Belgaum District");
childsList.get(2).add(new ArrayList<String>());
childsList.get(2).get(3).add("Mysore District");
return childsList;
}

}

Android Activity (Expandable_ListView.java)

This  is an main activity in this example here we are created myExpandableAdapter to
add data to listview this myExpandableAdapter takes parameters of group and child data
and added to listview. and when user click on child element this here we can see one Toast
message which one is clicked by user from child list.


package com.androidsurya.extendablelv;

import java.util.ArrayList;

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.BaseExpandableListAdapter;
import android.widget.ExpandableListView;
import android.widget.TextView;
import android.widget.Toast;

public class Expandable_ListView extends Activity {

ExpandableListView expLView;
TextView childtxt;

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
expLView = (ExpandableListView) findViewById(R.id.ExpandableListViewid);
myExpandableAdapter adapter = new myExpandableAdapter(this,
ReadData.getGroupData(), ReadData.getChildData());
expLView.setAdapter(adapter);
}

public class myExpandableAdapter extends BaseExpandableListAdapter {

private ArrayList<String> groups;

private ArrayList<ArrayList<ArrayList<String>>> children;

private Context context;

public myExpandableAdapter(Context context, ArrayList<String> groups,
ArrayList<ArrayList<ArrayList<String>>> children) {
this.context = context;
this.groups = groups;
this.children = children;
}

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

@Override
public ArrayList<String> getChild(int groupPosition, int childPosition) {
return children.get(groupPosition).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) {

final String child = (String) ((ArrayList<String>) getChild(
groupPosition, childPosition)).get(0);

if (convertView == null) {
LayoutInflater infalInflater = (LayoutInflater) context
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
convertView = infalInflater.inflate(
R.layout.expandablelv_childview, null);
}

childtxt = (TextView) convertView.findViewById(R.id.childTXT);

childtxt.setText(child);
childtxt.setOnClickListener(new OnClickListener() {

@Override
public void onClick(View v) {
// TODO Auto-generated method stub
Toast.makeText(getApplicationContext(),
"Your clicked->" + child, Toast.LENGTH_SHORT)
.show();
}
});

return convertView;
}

@Override
public int getChildrenCount(int groupPosition) {
return children.get(groupPosition).size();
}

@Override
public String 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) {

String group = (String) getGroup(groupPosition);

if (convertView == null) {
LayoutInflater infalInflater = (LayoutInflater) context
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
convertView = infalInflater.inflate(
R.layout.expandablelv_groupview, null);
}

TextView grouptxt = (TextView) convertView
.findViewById(R.id.groupTXT);

grouptxt.setText(group);

return convertView;
}

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

@Override
public boolean isChildSelectable(int arg0, int arg1) {
return true;
}

}

}

Register Android Activity in Android Manifest file

  <activity
            android:name="com.androidsurya.extendablelv.Expandable_ListView"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>




No comments:

Post a Comment

Android SQLite Database Viewer or Debuging with Stetho

Every Android Developer uses SQLite Database to store data into the Android Application data. But to view the data in SQLite have a lot of...