How to implement an Expandable ListView in Android

Expandable ListView is a type of view very much similar to a  List view.This view shows items in a vertically scrolling two-level list.This has two levels – group and children, which differs it from the List view.Group individually be expanded to show its children.Basically items are grouped inside the list much like giving a category heading to a bunch of similar items and then group them by the category headings.We can easily listen for OnClick events on the group or the individual children by attaching listener to the Expandable ListView. Below are the steps described to implement Expandable ListView:

Steps to implement Expandable ListView in Android:

1) Create  xml layout files

We need to create three xml layout files – one for main activity layout, second for header (group) and the third one for child layout.

main.xml for MainActivity:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns_android="http://schemas.android.com/apk/res/android"
    xmlns_app="http://schemas.android.com/apk/res-auto"
    android_layout_width="match_parent"
    android_background="@color/white"
    android_layout_height="match_parent"
    android_layout_marginTop="@dimen/tool_bar_height"
    android_orientation="vertical"
    >

    <ExpandableListView
        android_id="@+id/forumList"
        android_layout_width="match_parent"
        android_layout_height="wrap_content"
        >
    </ExpandableListView>

</LinearLayout>

header.xml for Header Layout

<LinearLayout xmlns_android="http://schemas.android.com/apk/res/android"
    android_layout_width="fill_parent"
    android_layout_height="wrap_content"
    android_orientation="horizontal"
    android_padding="5dp"
    android_background="@color/backGroundColor">

   <!-- <ImageView
        android_layout_width="20dp"
        android_layout_height="20dp"
        android_background="@drawable/icon_drop"
        android_layout_margin="10dp"/>-->


    <TextView
        android_id="@+id/lblListHeader"
        android_layout_width="fill_parent"
        android_layout_height="wrap_content"
        android_layout_marginTop="5dp"
        android_layout_marginLeft="30dp"
        android_textSize="21dp"
        android_textColor="@color/themeDarkColor"
        android_text="Header"/>

</LinearLayout>

child.xml for Child Layout:

<RelativeLayout xmlns_android="http://schemas.android.com/apk/res/android"
    xmlns_fresco="http://schemas.android.com/apk/res-auto"
    android_orientation="vertical"
    android_layout_width="match_parent"
    android_layout_height="wrap_content"
    style="@style/FrameStyle"
    android_layout_marginTop="0dp"
    android_layout_marginBottom="3dp"
    >
    <RelativeLayout
        android_layout_width="wrap_content"
        android_layout_height="wrap_content"
        android_layout_alignParentLeft="true"
        android_padding="10dp"
        android_id="@+id/count_layout">
        <TextView
            android_id="@+id/count"
            android_layout_width="wrap_content"
            android_layout_height="wrap_content"
            android_textSize="18dp"
            android_gravity="center_vertical"
            android_padding="5dp"
            android_text="2"

            />
        <TextView
            android_id="@+id/view"
            android_layout_width="wrap_content"
            android_layout_height="wrap_content"
            android_textSize="15dp"
            android_gravity="center_horizontal"
            android_layout_below="@+id/count"
            android_text="view"
            />
    </RelativeLayout>
    <TextView
        android_id="@+id/title"
        style="@style/CellHighlightTitleStyle"
        android_layout_width="match_parent"
        android_layout_height="wrap_content"
        android_layout_marginTop="10dp"
        android_padding="10dp"
        android_paddingLeft="20dp"
        android_layout_toRightOf="@+id/count_layout"
        android_text="Topic"
        />


</RelativeLayout>

2) Add  elements to the Group and Child

In Main Activity add elements of the group and child to be displayed in list.

private void setValue(List<Forum> forums) {
        listDataHeader = new ArrayList<String>();
        listDataChild= new HashMap<String, List<Forum>>();
        String previous_header=null;
        for(int i=0;i<forums.size();i++){
             header=forums.get(i).getCategory();
            if(!header.equals(previous_header)){
                listDataHeader.add(forums.get(i).getCategory());
            }
            if(header.equals("General")){
                 generalList.add(forums.get(i));
            }else
                 offTopicList.add(forums.get(i));
            previous_header= header;
        }

        listDataChild.put(listDataHeader.get(0), generalList);
        listDataChild.put(listDataHeader.get(1), offTopicList);

3) Implement Adapter for Exapandable ListView

In this we have to implement the adapter.We are using custom adapter which extends  BaseExpandableListAdapter. This class provides required methods to render listview.

getGroupView() – Returns view for the list group header
getChildView() – Returns view for list child item.

public class ForumAdapter extends BaseExpandableListAdapter {
      private Context _context;
      private List<String> _listDataHeader; // header titles
      private HashMap<String, List<Forum>> _listDataChild; // header child
    public ForumAdapter(Context context, List<String> listDataHeader, HashMap<String,      List<Forum>> listDataChild) {
        //initialize the parameters
    }
    @Override
    public Object getChild(int groupPosition, int childPosititon) {

        //to get children of the respective header(group).
        return  this._listDataChild.get(this._listDataHeader.get(groupPosition))
                .get(childPosititon);
    }
    @Override
    public long getChildId(int groupPosition, int childPosition) {
        return childPosition;
    }

    // set the child view with value
    @Override
    public View getChildView(int groupPosition, final int childPosition,
                             boolean isLastChild, View convertView, ViewGroup parent) {
        final Forum item = (Forum) getChild(groupPosition, childPosition);
        if (convertView == null) {
          convertView = LayoutInflater.from(parent.getContext())
                    .inflate(R.layout.child, parent, false);
        }
        TextView title = (TextView)convertView.findViewById(R.id.title);
        TextView post  = (TextView) convertView.findViewById(R.id.view);
        TextView count  = (TextView) convertView.findViewById(R.id.count);
         title.setText(item.getTitle());
         count.setText(item.getPostCount().toString());
         post.setText("Posts");
        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;
    }

    //set the header view with values
    @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.header, null);
        }
        TextView lblListHeader = (TextView)convertView.findViewById(R.id.lblListHeader);
        lblListHeader.setTypeface(null, Typeface.BOLD);
        lblListHeader.setText(headerTitle);
        return convertView;
    }
    @Override
    public boolean hasStableIds() {
        return false;
    }
    @Override
    public boolean isChildSelectable(int groupPosition, int childPosition) {
        return true;
    }
}

4) Modify the Main Activity

After that, set the Expandable ListView Adapter and  add listener to the child (If you want to do anything on child click).

  listAdapter = new ExpandableAdapter(getActivity(),listDataHeader, listDataChild);
        
        // setting list adapter
        expListView.setAdapter(listAdapter);
        expListView.setOnChildClickListener(new ExpandableListView.OnChildClickListener() {
            @Override
            public boolean onChildClick(ExpandableListView parent, View v, int groupPosition,int childPos               ition, long id) {
            }
        });

That’s All..:-)

In Conclusion:

If you have implemented listview before then you will find it more easy to implement. Implementation of the Expandable ListView has very easy steps as described above.It gives more flexibility to the android user and make the UI more friendly and attractive.You can edit the view of child as well as group in your own way to make it more attractive as per your requirements.

Refrences:

ListView

Expandable ListView

Leave a Comment

Scroll to Top