Multi-layered ExpandableListView

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:

  • How to change Toolbar navigation icon and options menu margin
  • When is it necessary to use singleTop launchMode in an android widget or application?
  • Set OnClickListener for items in ListView with 2 Views
  • Layout orientation in code
  • Android Data Binding using include tag
  • Replace Fragment inside a ViewPager
    • 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.

    Related posts:

    How to do the new PlayStore parallax effect
    Get both sim numbers in a dual sim android phone
    How to get bitmap providing a URI, java.io.FileNotFoundException: No content provider: /sdcard/Hello...
    Textview: using the dialog title style: @android:style/TextAppearance.DialogWindowTitle
    Android - jmdns doesn't discover devices
    When does android first do layout?
  • Workaround for duplicate classes in Gradle flavors and main
  • How do I download a file via default Android Downloader?
  • How to add Android libraries with resources without using Eclipse
  • Animate object using android accelerometer data
  • Play m3u8 video in android
  • Check Android Assets Integrity
  • 3 Solutions collect form web for “Multi-layered ExpandableListView”

    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.

    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.

    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…

    Android Babe is a Google Android Fan, All about Android Phones, Android Wear, Android Dev and Android Games Apps and so on.