Multi-layered ExpandableListView

Question

I'm currently working on a project in which I need something like the following:

- MainGroup 1 (Expandable)
  - SubGroup 1 (Expandable)
    - SubSubGroup 1 (Expandable)
      - Child View
      - Child View
      - ...
    - SubSubGroup 2 (Expandable)
      - Child View
      - Child View
      - ...
  - SubGroup 2 (Expandable)
    - SubSubGroup 3 (Expandable)
      - Child View
      - ...
    - SubSubGroup 4 (Expandable)
      - Child View
      - ...
  - SubGroup 3 (Expandable)
    - Child View
    - ...
- MainGroup 2 (Expandable)
  - ...

At most it would be an ExpandableListView inside an ExpandableListView inside an ExpandableListView - so 3 layers of ExpandableListView:

• MainGroup would only hold other ExpandableListView.
• SubGroup would hold other ExpandableListView except for the last two, which will allways just be ChildViews. (I'm thinking those two could just be substituted with the one for SubSubGroup)
• SubSubGroup would allways hold ChildViews.

My problem is that I think I fail to understand the basic principles of how the ExpandableListView layouts it's children. I've looked at examples like this, but can't get my head around the functionality.

I've tried simply adding an ExpandableListView as a child in another - but something doesn't work as only the first item of the inner ExpandableListView is visible if you expand one of the outer groups. I can however by setting the height of the outer groups container manually make it big enough to show all items in the inner ExpandableListView. To be optimal, calculation of height should of course be done on the fly.

So, to get to some more solid questions:

• Can someone give me an explanation of the ExpandableListView "lifecycle" (by this I mean instantation, re-use of views, expand/collapse listeners) including:
  • How and when is an ExpandableListView notified that a child is expanded/collapsed?
  • How does the ExpandableListView know how much space to make for all children to fit into a group container?
• How much benefit is there in using the ExpandableListView to create the above, compared to just mixing together my own solution using some LinearLayouts and some OnClickListeners?

---

Edit

For my last question I might note that there can be anywhere from 1 to 20+ MainGroups.

Answer 1

First of all, let me recommend you GrepCode site. It has sources of Android SDK classes. Thanks for them, I've found out base principles of AdapterViews (I gave you a link to ExpandableListView, but it's better if you research not only it, but its class-parents as well).

Now, your questions and my answers:

How and when is an ExpandableListView notified that a child is expanded/collapsed?

See method handleItemClick(View v, int position, long id)

How does the ExpandableListView know how much space to make for all children to fit into a group container?

I didn't research this question well, but as far as I know, it's made by the method requestLayout(). Also we found out that one scrollable View cannot be embedded into another scrollable View. (It's wide-known mistake: to put ListView into ScrollView or ListView into ExpandableListView).

How much benefit is there in using the ExpandableListView to create the above, compared to just mixing together my own solution using some LinearLayouts and some OnClickListeners?

AdapterViews are faster. But your construction is too complex even for ExpandableListView. You may use 2 solutions.

1. Guru-solution: if you're professional of designing your own Views/ViewGroups from the scratch (I mean, you understand methods requestLayout(), dispatchDraw() and so on), then write your own GrandExpandableListAdapter with 3 levels.
2. Medium-solution: use ExpandableListAdapter for first 2 levels and use LinearLayouts for 3rd level.

Answer 2

You might want to check this project out. I haven't tried it, but I guess it's worth a try. The default ExpanadableListView is quite limited, designed originally to support only 2 levels. You can hack around with it to get it to support more levels than that, but it'll get messy.

Answer 3

Even though this is not the complete solution still its a 3 layered Expandable List. So its left to you how you style it.

here is the class

package com.custom.nagee;

import android.app.ExpandableListActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseExpandableListAdapter;
import android.widget.ExpandableListView;
import android.widget.LinearLayout;

public class CustomemExpandible extends ExpandableListActivity{
    LayoutInflater inflator;
    boolean flag = true;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        inflator = LayoutInflater.from(getApplicationContext());
        setListAdapter(new MyAdapter());
    }

    @Override
    public boolean onChildClick(ExpandableListView parent, View v,
            int groupPosition, int childPosition, long id) {
        if(flag){
            v.findViewById(childPosition).setVisibility(View.VISIBLE);
            flag = false;
            return true;
        }
        v.findViewById(childPosition).setVisibility(View.GONE);
        flag = true;
        return true;
    }
    class MyAdapter extends BaseExpandableListAdapter{

        @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, int childPosition,
                boolean isLastChild, View convertView, ViewGroup parent) {
            LinearLayout linearLayout = (LinearLayout)inflator.inflate(R.layout.group, null);
            linearLayout.getChildAt(1).setId(childPosition);
            return linearLayout;
        }

        @Override
        public int getChildrenCount(int groupPosition) {
            return 2;
        }

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

        @Override
        public int getGroupCount() {
            return 2;
        }

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

        @Override
        public View getGroupView(int groupPosition, boolean isExpanded,
                View convertView, ViewGroup parent) {
            return ((LinearLayout)inflator.inflate(R.layout.group, null));
        }

        @Override
        public boolean hasStableIds() {
            // TODO Auto-generated method stub
            return false;
        }

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

    }
}

and here goes the xml file

group.xml

<?xml version="1.0" encoding="utf-8"?>

<TextView
    android:id="@+id/editText1"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:textColor="@color/back"
    android:layout_marginLeft="30dip" 
    android:text="DONE" >
</TextView>

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:layout_marginLeft="30dip" 
    android:visibility="gone" >

    <TextView
        android:id="@+id/editText2"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" 
        android:text="DONE">
    </TextView>

    <TextView
        android:id="@+id/editText3"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="DONE" />

    <TextView
        android:id="@+id/editText4"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="DONE" />
</LinearLayout>

and this is under color folder for changing text color, its left you , you can even change the background for getting better looks.

back.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="false" android:color="#808080"/>
    <item android:state_window_focused="false" android:color="#808080"/>
    <item android:state_pressed="true" android:color="#808080"/>
    <item android:state_selected="true" android:color="#000000"/>
    <item android:color="#FF0000"/> <!-- not selected -->
</selector>

hope it works...