Wednesday, September 24, 2014

Android Expandable List View Tutorial

4:57 AM

Expandable list view is used to group list data by categories. It has the capability of expanding and collapsing the groups when user touches header of list view. When u click on the header of list view it expands and when u again click on the same header it collapse. Like in below figures...

                         
                               Fig 1: Expanding Mode
Fig 2: Collapsing Mode

Some time we need to extend group header by default, for this
 we have following bits of code..
expandableList.expandGroup(0); //expand first position by default
expandableList.expandGroup(1); //expand second position by default

One more thing sometime we need to disable the collapsing feature in expandable list view for this we have ,
expandableList.setOnGroupClickListener(new OnGroupClickListener() {

@Override
public boolean onGroupClick(ExpandableListView parent, View v,
int groupPosition, long id) {
if(groupPosition==0)//disable collapsing feature of group header first position
                                   {
                                      return true;
}else{
return false;
}
}

});
In override the onGroupClick method. If true, the expandableListView thinks that the ability to expand and collapse has been handled. If false then it has not been handled, and will take care of the action. 

To generate expandable list view in project we need three layouts, one Adapter and one Main Activity.
The three layout goes like this....
1. main_activity.xml 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
    <ExpandableListView
        android:id="@+id/expandableList"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

2. list_group.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="10dp" >
    <TextView
        android:id="@+id/listHeader"
        android:layout_width="fill_parent"
        android:layout_height="40dp"
        android:paddingLeft="?android:attr/expandableListPreferredItemPaddingLeft"
        android:textSize="16sp" />
</LinearLayout>

3. list_item.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="55dip"
    android:orientation="vertical" >
    <TextView
        android:id="@+id/listItem"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:textSize="17dip"
        android:paddingTop="5dp"
        android:paddingBottom="5dp"
        android:paddingLeft="?android:attr/expandableListPreferredChildPaddingLeft" />
</LinearLayout>

Now we have to create ExpandableListAdapter.java like this...
For import -> ctrl + alt +o  
public class ExpandableListAdapter extends BaseExpandableListAdapter {
   private Context context;
   private List<String> listDataHeader;   // header titles
   private HashMap<String, List<String>> listDataChild;

   public ExpandableListAdapter(Context context, List<String> listDataHeader,
           HashMap<String, List<String>> listChildData) {
       this.context = context;
       this.listDataHeader = listDataHeader;
       this.listDataChild = listChildData;
   }
   @Override
   public Object getChild(int groupPosition, int childPosititon) {
       return this.listDataChild.get(this.listDataHeader.get(groupPosition))
               .get(childPosititon);
   }
   @Override
   public long getChildId(int groupPosition, int childPosition) {
       return childPosition;
   }  
   @Override
   public View getChildView(int groupPosition, final int childPosition,
           boolean isLastChild, View convertView, ViewGroup parent) {
       final String childText = (String) getChild(groupPosition, childPosition);
       if (convertView == null) {
           LayoutInflater infalInflater = (LayoutInflater) this._context
                   .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
           convertView = infalInflater.inflate(R.layout.list_item, null);
       }
       TextView txtListChild = (TextView) convertView
               .findViewById(R.id.listItem);
       txtListChild.setText(childText);
       return convertView;
   }
   @Override
   public int getChildrenCount(int groupPosition) {
       return this.listDataChild.get(this.listDataHeader.get(groupPosition))
               .size();
   }  
   @Override
   public Object getGroup(int groupPosition) {
       return this.listDataHeader.get(groupPosition);
   } 
   @Override
   public int getGroupCount() {
       return this.listDataHeader.size();
   } 
   @Override
   public long getGroupId(int groupPosition) {
       return groupPosition;
   } 
   @Override
   public View getGroupView(int groupPosition, boolean isExpanded,
           View convertView, ViewGroup parent) {
       String headerTitle = (String) getGroup(groupPosition);
       if (convertView == null) {
           LayoutInflater infalInflater = (LayoutInflater) this._context
                   .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
           convertView = infalInflater.inflate(R.layout.list_group, null);
       }
 
       TextView lblListHeader = (TextView) convertView
               .findViewById(R.id.listHeader);
       lblListHeader.setTypeface(null, Typeface.BOLD); //bold the header
       lblListHeader.setText(headerTitle);
 
       return convertView;
   }
 
   @Override
   public boolean hasStableIds() {
       return false;
   }
 
   @Override
   public boolean isChildSelectable(int groupPosition, int childPosition) {
       return true;
   }
}

Finally MainActivity.java goes like this...
For import ctrl + alt + o
public class MainActivity extends Activity {

ExpandableListAdapter listAdapter;
ExpandableListView expListView;
List<String> listDataHeader;
HashMap<String, List<String>> listDataChild;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// get the listview
expListView = (ExpandableListView) findViewById(R.id.expandableList);
getPrepareListData(); // preparing list data
listAdapter = new ExpandableListAdapter(this, listDataHeader, listDataChild);
expListView.setAdapter(listAdapter); //set the  list adapter

// Listview Group click listener
expListView.setOnGroupClickListener(new OnGroupClickListener() {
@Override
public boolean onGroupClick(ExpandableListView parent, View v,
int groupPosition, long id) {
//do ur task
return false;
}
});

// Listview Group expanded listener
expListView.setOnGroupExpandListener(new OnGroupExpandListener() {

@Override
public void onGroupExpand(int groupPosition) {
//do ur task
}
});

// Listview Group collasped listener
expListView.setOnGroupCollapseListener(new OnGroupCollapseListener() {

@Override
public void onGroupCollapse(int groupPosition) {
//do ur task
}
});

// Listview on child click listener
expListView.setOnChildClickListener(new OnChildClickListener() {
@Override
public boolean onChildClick(ExpandableListView parent, View v,
int groupPosition, int childPosition, long id) {
// TODO Auto-generated method stub
//do ur task
return false;
}
});
}
private void getPrepareListData() {
listDataHeader = new ArrayList<String>();
listDataChild = new HashMap<String, List<String>>();
// Adding header data
listDataHeader.add("For One Room");
listDataHeader.add("For Two Rooms");
listDataHeader.add("For Flat");
listDataHeader.add("For House");
listDataHeader.add("For Apartment");
// Adding child data
List<String> one_room = new ArrayList<String>();
one_room.add("1 room at baneshwor, kathmandu");
one_room.add("1 room at sundhara, kathmandu");
one_room.add("1 room at pulchowk, lalitpur");
one_room.add("1 room at gwarko, lalitpur");
one_room.add("1 room at sundhara, lalitpur");
one_room.add("1 room at balkumari, lalitpur");
one_room.add("1 room at lazimpat, kathmandu");

List<String> two_room = new ArrayList<String>();
two_room.add("2 rooms at baneshwor, kathmandu");
two_room.add("2 rooms at sundhara, kathmandu");

List<String> flat = new ArrayList<String>();
flat.add("1 flat at baneshwor, kathmandu");
flat.add("1 flat at sundhara, kathmandu");

listDataChild.put(listDataHeader.get(0), one_room); // Header, Child listDataChild.put(listDataHeader.get(1), two_room);
listDataChild.put(listDataHeader.get(2), flat); //you can add others here
}
}

Written by

We are passionate programmers. Enjoying the rich platforms of Semicolon Family of Programming languages we are proud to call ourselves Semicolon Developers.

1 comments:

Post a Comment

 

© 2013 Echo "Semicolon Developers"; Kathmandu. All rights resevered @ Semicolon Developers Network Pvt. Ltd.. Designed by Templateism

Back To Top