Android display two full-size ListViews

Question

I am unable to display two sequential full-sized (in height) ListViews that would not be scrollable individually but only by scrolling the root element.

This thing is haunting me all day long since I had various outputs (two scrollable list views, half-cut scrollview, etc) but none succeeded. Read previous posts here, here and here.

Providing you the current layout xml, what could be the solution? Removal of ScrollView, changing LinearLayout to RelativeLayout, setting layout_weight?

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:fillViewport="true"
    >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        >

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            >

            <xxx.xxx.xxx.xxx.MultiSpinner
                android:id="@+id/ad_list_filter"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="0.5"
                />

            <xxx.xxx.xxx.xxx.MultiSpinner
                android:id="@+id/ad_list_sort"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="0.5"
                />

        </LinearLayout>

        <ListView
            android:id="@+id/adListInterests"
            android:layout_width="fill_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:layout_marginLeft="3dp"
            android:layout_marginRight="3dp"
            android:divider="@null"
            android:dividerHeight="5dp"
            >
        </ListView>

        <ImageView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:background="@drawable/ad_list_seperator"
            />

        <ListView
            android:id="@+id/adListNoninterests"
            android:layout_width="fill_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:layout_marginLeft="3dp"
            android:layout_marginRight="3dp"
            android:divider="@null"
            android:dividerHeight="5dp"
            >
        </ListView>
    </LinearLayout>
</ScrollView>

Thanks in advance!

Edit:

After removing the suggested ScrollView results in two scrollable lists. According to comments, I will try to achieve it by using the provided plugins, however I still hope for finding solution based on modifying layout code only. Thank you for your time!

Image:

Layout:

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        >

        <xxx.xxx.xxx.xxx.MultiSpinner
            android:id="@+id/ad_list_filter"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.5"
            />

        <xxx.xxx.xxx.xxx.MultiSpinner
            android:id="@+id/ad_list_sort"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.5"
            />

    </LinearLayout>
    <ListView
        android:id="@+id/adListInterests"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:layout_marginLeft="3dp"
        android:layout_marginRight="3dp"
        android:divider="@null"
        android:dividerHeight="5dp"
        >
    </ListView>

    <ImageView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:background="@drawable/ad_list_seperator"
        />

    <ListView
        android:id="@+id/adListNoninterests"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:layout_marginLeft="3dp"
        android:layout_marginRight="3dp"
        android:divider="@null"
        android:dividerHeight="5dp"
        >
    </ListView>
</LinearLayout>

Answer 1

Your hierarchy is right, just change your ListViews code like this:

android:layout_height="wrap_content" <!-- cahnge this line -->
android:layout_weight="xxx" <!-- remove this line -->

However this is a poor, inefficient and memory hogging solution. By doing this you are forcing all the views off screen to remain in memory. A better solution would be to use only one list with custom adapter handling multiple datasets/viewtypes and a header view containing the spinners.

The easiest and quickest and most correct solution for you right now would be using the cwac-merge library which allows you to load one ListView with data from mulitple ListAdapters. Once you understand how it works and use it, you can change layout like so:

list_header.xml

You'll have to set the header view programmatically before you assign the merge adapter to the list view. You can inflate this layout XML.

<?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="wrap_content">
  <xxx.xxx.xxx.xxx.MultiSpinner.../>
  <xxx.xxx.xxx.xxx.MultiSpinner.../>
</LinearLayout>

list_main.xml

This is the main layout of your activity or fragment. It will contain just the list, which can handle everything you need.

<?xml version="1.0" encoding="utf-8"?>
<ListView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/adListInterests"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="3dp"
    android:layout_marginRight="3dp"
    android:divider="@null"
    android:dividerHeight="5dp"/>

How to use cwac-merge

You'll need to import it in Gradle (for Android Studio)

repositories {
    maven {
        url "https://repo.commonsware.com.s3.amazonaws.com"
    }
}

dependencies {
    compile 'com.commonsware.cwac:merge:1.1.+'
}

or download a couple of .jars (for Eclipse)

• https://github.com/commonsguy/cwac-merge/releases
• https://github.com/commonsguy/cwac-sacklist/releases

This is how the code will look:

View header = LayoutInflater.from(context).inflate(R.layout.list_header, null, false);

// get references for your Spinners here...

myListView.addHeader(header, null, false);

// setup your two adapters as you are doing now

MergeAdapter adapter = new MergeAdapter();
adapter.addAdapter(firstAdapter); // the adapter that you previously used for the first list
adapter.addAdapter(secondAdapter); // the adapter that you previously used for the second list
myListView.setAdapter(adapter);

Answer 2

The whole idea about having two separate ListView was wrong - instead of that I built a single ListView and added a custom row as header for the following list after the first one has ended.

The concept I used is described here.