4

In my app i want to make a page that have ExpandableListView and below him CheckBox.

My problem is that my ExpandableListView is too big and make the CheckBox out of the page.

On smaller screens is not visible at all.

I tried to put ExpandableListView inside scrollview but its not working.

Is there a way to make my design?

Here is my code and a screenshot.

XML code:

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

    <ScrollView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:fillViewport="true" >

        <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" >

            <TextView
                android:id="@+id/textView1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentTop="true"
                android:layout_marginTop="15sp"
                android:text="In this page you can save a group of exercise under one routine."
                android:textColor="@color/Black"
                android:textSize="20sp" />

            <ExpandableListView
                android:id="@+id/instructionsExView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true"
                android:layout_below="@+id/textView1"
                android:layout_marginTop="15sp" >
            </ExpandableListView>

            <TextView
                android:id="@+id/textView2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@+id/instructionsExView"
                android:layout_marginTop="15sp"
                android:text="If you want to open the instruction again check &apos;need help?&apos;"
                android:textColor="@color/Black"
                android:textSize="20sp" />

            <CheckBox
                android:id="@+id/checkInstructions"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true"
                android:layout_below="@+id/textView2"
                android:layout_marginTop="16dp"
                android:checked="false"
                android:text="dont show again when opening the page"
                android:textColor="@color/Black" />

        </RelativeLayout>
    </ScrollView>

</RelativeLayout>

Screen shot:

enter image description here

EDIT:

enter image description here

1

5 Answers 5

19

in your "onCreate" method write: "setListViewHeight(expListView)" after "expListView.setAdapter(listAdapter)" then set OnGroupClickListener for your expandable list view as below:

expListView.setOnGroupClickListener(new OnGroupClickListener() {

        @Override
        public boolean onGroupClick(ExpandableListView parent, View v,
                int groupPosition, long id) {
            setListViewHeight(parent, groupPosition);
            return false;
        }
    });

used methods:

private void setListViewHeight(ListView listView) {
    ListAdapter listAdapter = listView.getAdapter();
    int totalHeight = 0;
    for (int i = 0; i < listAdapter.getCount(); i++) {
    View listItem = listAdapter.getView(i, null, listView);
    listItem.measure(0, 0);
    totalHeight += listItem.getMeasuredHeight();
    }

    ViewGroup.LayoutParams params = listView.getLayoutParams();
    params.height = totalHeight
    + (listView.getDividerHeight() * (listAdapter.getCount() - 1));
    listView.setLayoutParams(params);
    listView.requestLayout();
    }


    private void setListViewHeight(ExpandableListView listView,
    int group) {
    ExpandableListAdapter listAdapter = (ExpandableListAdapter) listView.getExpandableListAdapter();
    int totalHeight = 0;
    int desiredWidth = MeasureSpec.makeMeasureSpec(listView.getWidth(),
    MeasureSpec.EXACTLY);
    for (int i = 0; i < listAdapter.getGroupCount(); i++) {
    View groupItem = listAdapter.getGroupView(i, false, null, listView);
    groupItem.measure(desiredWidth, MeasureSpec.UNSPECIFIED);

    totalHeight += groupItem.getMeasuredHeight();

    if (((listView.isGroupExpanded(i)) && (i != group))
    || ((!listView.isGroupExpanded(i)) && (i == group))) {
    for (int j = 0; j < listAdapter.getChildrenCount(i); j++) {
    View listItem = listAdapter.getChildView(i, j, false, null,
    listView);
    listItem.measure(desiredWidth, MeasureSpec.UNSPECIFIED);

    totalHeight += listItem.getMeasuredHeight();

    }
    }
    }

    ViewGroup.LayoutParams params = listView.getLayoutParams();
    int height = totalHeight
    + (listView.getDividerHeight() * (listAdapter.getGroupCount() - 1));
    if (height < 10)
    height = 200;
    params.height = height;
    listView.setLayoutParams(params);
    listView.requestLayout();

    }

now u are good to go.

9
  • this worked very well for me... However, when the ExpandableListView scrolls up and goes out of the viewing zone, the list collapses back automatically. What could be the solution to this? I am using setListViewHeight(ExpandableListView ... method Mar 5, 2015 at 18:03
  • this code is useful when ExpandableListView need to have attribute layout_height="wrap_content". With the code your view will wrap content aways correct. Jun 14, 2015 at 19:20
  • The second function works fine, but the first one is not working for me i.e. before any group is clicked, the height of the expandablelistview is not correct. Has anyone been able to solve this?
    – Deepti
    Jul 14, 2015 at 9:21
  • @dvc did you use "setListViewHeight(expListView)" after "expListView.setAdapter(listAdapter)" in your onCreate method? by the way i think its better to not use expandablelistview and scrollview together, try to use expandablelistviews and customize its first and last item.
    – Dmila Ram
    Jul 14, 2015 at 12:30
  • 1
    This solution works really well in terms of scrolling, but it doesn't calculate properly the height of the ExpandableListView when loaded for first time. Clicking on a group does that, so it needs a little touch to get there.
    – Apostrofix
    Jan 2, 2016 at 21:34
8

Based on @Dmila Ram`s answer, I was able to do it.

In my case, I initialize and populate the ExpandableListView in the onCreate method like so:

expandableListView = (ExpandableListView) findViewById(R.id.appsMenu);
listAdapter = new ExpandableListAdapter(this, listDataHeader, listDataChild);
expandableListView.setAdapter(listAdapter);
for (int i = 0; i < listAdapter.getGroupCount(); i++)
     expandableListView.expandGroup(i);
setListViewHeight(expandableListView);
expandableListView.setOnGroupClickListener(new ExpandableListView.OnGroupClickListener() {
     @Override
     public boolean onGroupClick(ExpandableListView parent, View v, int groupPosition, long id) {
          setListViewHeight(parent, groupPosition);
          return false;
        }
     });

Notice that I expand each group. After that I call setListViewHeight(expandableListView);

This method is responsible for calculating the height of the ExpandableListView when it is created for first time.

Here is the code:

private void setListViewHeight(ExpandableListView listView) {
        ExpandableListAdapter listAdapter = (ExpandableListAdapter) listView.getExpandableListAdapter();
        int totalHeight = 0;
        for (int i = 0; i < listAdapter.getGroupCount(); i++) {
            View groupView = listAdapter.getGroupView(i, true, null, listView);
            groupView.measure(0, View.MeasureSpec.UNSPECIFIED);
            totalHeight += groupView.getMeasuredHeight();

        if (listView.isGroupExpanded(i)){
            for(int j = 0; j < listAdapter.getChildrenCount(i); j++){
                View listItem = listAdapter.getChildView(i, j, false, null, listView);
                listItem.measure(0, View.MeasureSpec.UNSPECIFIED);
                totalHeight += listItem.getMeasuredHeight();
            }
        }
    }

    ViewGroup.LayoutParams params = listView.getLayoutParams();
    params.height = totalHeight
            + (listView.getDividerHeight() * (listAdapter.getGroupCount() - 1));
    listView.setLayoutParams(params);
    listView.requestLayout();
}

It's really not necessary to have the groups expanded, instead we can just loop through the child items and add them to the calculation of the total height.

This will make all widgets in the ScrollView scrollable and it will also show the ExpandableListView properly.

Then we also need this method, to make sure that clicking on the groups will calculate the height as well:

private void setListViewHeight(ExpandableListView listView,
                                   int group) {
        ExpandableListAdapter listAdapter = (ExpandableListAdapter) listView.getExpandableListAdapter();
        int totalHeight = 0;
        int desiredWidth = View.MeasureSpec.makeMeasureSpec(listView.getWidth(),
                View.MeasureSpec.EXACTLY);
        for (int i = 0; i < listAdapter.getGroupCount(); i++) {
            View groupItem = listAdapter.getGroupView(i, false, null, listView);
        groupItem.measure(desiredWidth, View.MeasureSpec.UNSPECIFIED);
        totalHeight += groupItem.getMeasuredHeight();

        if (((listView.isGroupExpanded(i)) && (i != group))
                || ((!listView.isGroupExpanded(i)) && (i == group))) {
            for (int j = 0; j < listAdapter.getChildrenCount(i); j++) {
                View listItem = listAdapter.getChildView(i, j, false, null,
                        listView);
                listItem.measure(desiredWidth, View.MeasureSpec.UNSPECIFIED);
                totalHeight += listItem.getMeasuredHeight();
            }
        }
    }

    ViewGroup.LayoutParams params = listView.getLayoutParams();
    int height = totalHeight
            + (listView.getDividerHeight() * (listAdapter.getGroupCount() - 1));
    if (height < 10)
        height = 200;
    params.height = height;
    listView.setLayoutParams(params);
    listView.requestLayout();
}

That's pretty much it, then it works fine, but this solution can be optimized even further.

2
  • Nice.It is very helpful & accurate. Aug 22, 2017 at 6:50
  • Perfect!! Answer to solve all expandable view problems inside ScrollView, Come to this solution After 3 hours of search and implementaions. Thank you @Apostrofix Feb 26, 2022 at 8:50
1

you cant use listview inside scroll view ,so you should use scroll view and add the rows as views dynamically.

1

You do not need more than one RelativeLayout, because expandablelistview should be between two items (in your case), these two items are going to be the first ones with parentTop and parentBottom, the rest will be positioned playing with above/below.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/White"
android:orientation="vertical" >

<TextView
    android:id="@+id/textView1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:layout_marginTop="15sp"
    android:text="In this page you can save a group of exercise under one routine."
    android:textColor="@color/Black"
    android:textSize="20sp" />

<CheckBox
    android:id="@+id/checkInstructions"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_marginTop="16dp"
    android:checked="false"
    android:text="dont show again when opening the page"
    android:textColor="@color/Black" />

<TextView
    android:id="@+id/textView2"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_above="@+id/checkInstructions"
    android:layout_marginTop="15sp"
    android:text="If you want to open the instruction again check &apos;need help?&apos;"
    android:textColor="@color/Black"
    android:textSize="20sp" />

<ExpandableListView
    android:id="@+id/instructionsExView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_above="@+id/textView2"
    android:layout_below="@id/textView1"
    android:layout_marginTop="15sp" >
</ExpandableListView>

</RelativeLayout>
5
  • but i want my checkbox to be below ExpandableListView
    – dasdasd
    Jul 17, 2013 at 9:43
  • And it is, look the parentBottom inside the checkbox. The next items will be painted respect the checkbox,look the attributes of the next items. Because you see ExpandableListView last it does not mean it is the last one to show on screen.
    – AlexBcn
    Jul 17, 2013 at 9:45
  • Its some kind of working. Because ExpandableListView now expand only in is small area. I want that it will expand to screen size. See my edit and the screen shot.
    – dasdasd
    Jul 17, 2013 at 9:53
  • I do not understand you, your first problem was "My problem is that my ExpandableListView is too big and make the CheckBox out of the page" but now you expandableListView occupies less space (because now the checkbox is on the page). Looking your last screenshoot maybe you want to show the checkbox and text only after pressing the ok button? Specify more please.
    – AlexBcn
    Jul 17, 2013 at 10:11
  • I want the ExpandableListView to get space as needed, if the text is long it will fill the page. And i want that i can scroll down over the ExpandableListView and get to my checkbox.
    – dasdasd
    Jul 17, 2013 at 10:21
0

You can use below code to achieve this thing. I used ListViewyou can replace with ExpandableListView

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

<TextView
    android:id="@+id/textView1"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:layout_marginTop="15sp"
    android:text="In this page you can save a group of exercise under one routine."
    android:textColor="@color/WHITE"
    android:textSize="20sp" />

<ListView
    android:id="@+id/listView1"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_weight="2" >

</ListView>

<TextView
    android:id="@+id/textView2"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="15sp"
    android:text="If you want to open the instruction again check &apos;need help?&apos;"
    android:textColor="@color/WHITE"
    android:textSize="20sp" />

<CheckBox
    android:id="@+id/checkInstructions"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_below="@+id/textView2"
    android:layout_marginBottom="20dp"
    android:layout_marginTop="16dp"
    android:checked="false"
    android:text="dont show again when opening the page"
    android:textColor="@color/WHITE" />

I checked the above code with around 50 listitem value and tested on a very small display device and it works fine.

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

<TextView
    android:id="@+id/textView1"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:layout_marginTop="15sp"
    android:text="In this page you can save a group of exercise under one routine."
    android:textColor="@color/WHITE"
    android:textSize="20sp" />

<ExpandableListView
    android:id="@+id/expandableListView1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_weight="2" >

</ExpandableListView>

<TextView
    android:id="@+id/textView2"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="15sp"
    android:text="If you want to open the instruction again check &apos;need help?&apos;"
    android:textColor="@color/WHITE"
    android:textSize="20sp" />

<CheckBox
    android:id="@+id/checkInstructions"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_below="@+id/textView2"
    android:layout_marginBottom="20dp"
    android:layout_marginTop="16dp"
    android:checked="false"
    android:text="dont show again when opening the page"
    android:textColor="@color/WHITE" />

I checked with ExpandableListView and it working fine for me.

1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.