Android - nested layouts

Question

I have built the following XML layout:

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

    <LinearLayout
        android:id="@+id/ll1"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="0.2"
        android:orientation="horizontal" >

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="0.3"
            android:gravity="center"
            android:src="@drawable/logo" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="0.7"
            android:gravity="center"
            android:text="@string/my_profile"
            android:textColor="#A669DA"
            android:textSize="20sp" />

    </LinearLayout>

    <LinearLayout
        android:id="@+id/ll2"
        android:background="#A669DA"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="10dp"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="0.15"
        android:orientation="horizontal" >

        <TextView
            android:id="@+id/TextView"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_marginLeft="10dp"
            android:layout_marginTop="20dp"
            android:text="@string/payroll_header"
            android:textColor="#FFFFFF"
            android:textSize="20sp" />

    </LinearLayout>

    <ScrollView
        android:id="@+id/scrollView1"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="0.65" >

        <LinearLayout
            android:id="@+id/ll3"
            android:layout_width="fill_parent"
            android:layout_height="0dp"
            android:orientation="vertical"
            android:weightSum="2" >

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

            <HorizontalScrollView
                android:id="@+id/horizontalScrollView1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" >

                <ExpandableListView
                    android:id="@+id/expandableListView2"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content" >
                </ExpandableListView>

            </HorizontalScrollView>

            <ListView
                android:id="@+id/listView1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" >
            </ListView>

        </LinearLayout>

    </ScrollView>

</LinearLayout>

The root element of this XML layout is a linear layout. It contains 2 linear layouts and one scroll. Since scroll view can only have one child, it contains a linear layout which in turn contains an expandable listView, horizontal scrollview (which contains an expandable listview) and a listview. As you can see, this is a very complicated layout, and I think it should be possible to simplify. Basically, I want the top 2 linear layouts to always take 35% of the screen, and the scrollview to take the rest. That's why I gave a weight of 0.2 to the first linear layout, 0.15 to the second linear layout, and 0.65 to scrollView.

Within the scrollView, I would like each of the 3 elements to take as much space as they would need, so that user scrolls down if he/she doesn't see everything. I know that expandableListView and ListView are already scrollable, so I will disable scrolling in them, so that parent's scroll bar is used.

However, I am facing several problems with this design:

1) In the first screenshot, you can see an expandableListView, horizontalScrollBar (with an expandableListView), and a listView. Each of them has height set to "wrap content", so I would expect each of them to take as much space as they need. However, you can see in the second screenshot that when I open the second expandable listView (the one within a horizontal scrollBar), listview doesn't move down to make space for the expanded list view. How can I achieve it, so that each of them moves down when the expandable list above expands? Is the only way to do it is to combine them all in one expandableListView?

2) My second expandableListView is in the horizontalScrollBar, however, I can't scroll it horizontally. Can I even put horizontal scrollBar inside a vertical scrollBar?

enter image description here

score 1 · Answer 1 · edited May 23 '17 at 11:57

First off, a little simplification: Your second LinearLayout (the 0.15 one) can be left out since it only has a single child. Just be sure to adjust the layout parameters of that single child (the TextView).

For your problem #1, try calling invalidate() or requestLayout() on your root view.

Problem #2 is actually solved: Link

My general impression is that this nesting of ScrollViews and ListViews is pretty complex. Have you considered alternatives such as TabLayout or DrawerLayout?

Cheers

Android - nested layouts

1 Answers1