3 vertical listViews in one scrollview

Question

I need to implement such a screen :

So, I've created the adapter with ImageView, 2 TextViews and CheckBox.

I need to implement 3 listViews and make the screen scrollable.

I tried to implemen the solution, but that is not workable for me - so I made like this :

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_height="fill_parent"
        android:layout_width="fill_parent"
        android:orientation="vertical"
        android:weightSum="1.0"
        >
    <LinearLayout android:layout_weight="0.5"
                  android:orientation="vertical"
                  android:layout_height="fill_parent"
                  android:layout_width="fill_parent">
        <TextView
                android:text="@string/textview_settings_categories"
                style="@style/settings_label"/>
        <ListView   android:id="@+id/listView1"
                    android:layout_height="fill_parent"
                    android:layout_width="fill_parent">

        </ListView>
    </LinearLayout>

    <LinearLayout android:layout_weight="0.25"
                  android:orientation="vertical"
                  android:layout_height="fill_parent"
                  android:layout_width="fill_parent">
        <TextView
                android:text="@string/textview_settings_categories"
                style="@style/settings_label"/>
    <ListView   android:id="@+id/listView2"
                android:layout_height="fill_parent"
                android:layout_width="fill_parent">

    </ListView>
    </LinearLayout>
    <LinearLayout android:layout_weight="0.25"
                  android:orientation="vertical"
                  android:layout_height="fill_parent"
                  android:layout_width="fill_parent">
        <TextView
                android:text="@string/textview_settings_categories"
                style="@style/settings_label"/>
        <ListView   android:id="@+id/listView3"
                    android:layout_height="fill_parent"
                    android:layout_width="fill_parent">

        </ListView>
    </LinearLayout>
</LinearLayout>
</ScrollView>

I also tried this one solution, but both not workable for me - the ScrollView can't be scrollable.

I also tried to implement 3 vertical ListFragments one above another, listviews are scrollable inside, but the scrollview is not - so I can't see the bottom of the screen.

Answer 1

It's not the best practice, but if you really want that functionality, you can just disallow the touch event of the parent scrollview once you touch it and re allow it once you leave the child container.

This is how I have done it before, where "listScanners" is my listview:

listScanners.setOnTouchListener(new View.OnTouchListener()
{
        @Override
        public boolean onTouch(View v, MotionEvent event)
        {
          v.getParent().requestDisallowInterceptTouchEvent(true);
          return false;
        }
    });

And this is the part of my layout that is relevant to the question:

 /* Theres more before this ... */
 <ScrollView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:scrollbarSize="0dp" >

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

                <RelativeLayout
                        android:orientation="vertical"
                        android:layout_width="fill_parent"
                        android:layout_height="fill_parent"
                        android:layout_marginTop="5dp"
                        android:layout_gravity="center"
                        android:gravity="center"
                        android:background="@null"
                        >
                    <TextView
                            android:id="@+id/emptylist1"
                            android:layout_width="450dp"
                            android:layout_height="80dp"
                            android:textColor="#6f6f6f"
                            android:textSize="20sp"
                            android:padding="3dp"
                            android:layout_marginBottom="3dp"
                            android:layout_marginLeft="10dp"
                            android:layout_marginRight="10dp"
                            android:text="No Scanners have been added..."/>
                    <ListView
                            android:id="@+id/listview_scanners"
                            android:layout_width="450dp"
                            android:layout_height="80dp"
                            android:padding="3dp"
                            android:layout_marginBottom="10dp"
                            android:layout_marginLeft="10dp"
                            android:layout_marginRight="10dp"
                            android:cacheColorHint="#00000000"
                            android:divider="#DEDEDE"
                            android:dividerHeight="1px">
                    </ListView>
                </RelativeLayout>
    /* Theres more after this ... */

Correct Way:

Ideally you should rather have something like this, where your layout looks like this:

Where it is very important to have this in your linear layout:

android:isScrollContainer="true"

isScrollContainer means that the linearlayout contains a view that scrolls, meaning that it can be a certain size within the linear layout, however, it may contain much more when you scroll it. Here is the layout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
          android:orientation="vertical"
          android:layout_width="fill_parent"
          android:layout_height="fill_parent"
          android:background="#afafaf"
          android:isScrollContainer="true">
 <LinearLayout
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:background="#FF63FF9B"
        android:layout_height="50dp"
        >

    <TextView
            android:id="@+id/textview_heading"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="25sp"
            android:layout_marginTop="5dp"
            android:layout_marginLeft="10dp"
            android:textColor="#ffffff"
            android:text="View First List"/>
</LinearLayout>

<RelativeLayout
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="150dp"
        android:layout_marginTop="5dp"
        android:background="@null"
        >
    <ListView
            android:id="@+id/listview1"
            android:layout_width="fill_parent"
            android:layout_height="130dp"
            android:cacheColorHint="#00000000"
            android:divider="#DEDEDE"
            android:dividerHeight="1px">
    </ListView>
</RelativeLayout>
<LinearLayout
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:background="#FF63FF9B"
        android:layout_height="50dp"
        >

    <TextView
            android:id="@+id/textview_heading"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="25sp"
            android:layout_marginTop="5dp"
            android:layout_marginLeft="10dp"
            android:textColor="#ffffff"
            android:text="View Second List"/>
</LinearLayout>

<RelativeLayout
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="150dp"
        android:layout_marginTop="5dp"
        android:background="@null"
        >
    <ListView
            android:id="@+id/listview2"
            android:layout_width="fill_parent"
            android:layout_height="130dp"
            android:cacheColorHint="#00000000"
            android:divider="#DEDEDE"
            android:dividerHeight="1px">
    </ListView>
</RelativeLayout>

<LinearLayout
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:background="#FF63FF9B"
        android:layout_height="50dp"
        >

    <TextView
            android:id="@+id/textview_heading"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="25sp"
            android:layout_marginTop="5dp"
            android:layout_marginLeft="10dp"
            android:textColor="#ffffff"
            android:text="View Third List"/>
</LinearLayout>

<RelativeLayout
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="150dp"
        android:layout_marginTop="5dp"
        android:background="@null"
        >
    <ListView
            android:id="@+id/listview3"
            android:layout_width="fill_parent"
            android:layout_height="130dp"
            android:cacheColorHint="#00000000"
            android:divider="#DEDEDE"
            android:dividerHeight="1px">
    </ListView>
</RelativeLayout>
</LinearLayout>

I just made this in 5 minutes and you get a layout looking like this: (this is just a draft, obviously just to give you an idea)

And last but not least, in your code where you display the lists, you will have something like this:

public class Screen_View_Lists extends Activity
{
    BaseAdapter                 listAdapter;
    ListView                    list1,list2,list3;

    @Override
    public void onCreate(Bundle icicle)
    {
        super.onCreate(icicle);
        setContentView(R.layout.screen_view_packages);

       list1 = (ListView) findViewById(R.id.listview1);
       list2 = (ListView) findViewById(R.id.listview2);
       list2 = (ListView) findViewById(R.id.listview3);

       listAdapter = new Adapter_List_Main(this, packages);//This is my own adapter, you probably use your own custom one as well.
       list1.setAdapter(listAdapter);

      //Setup list to support context menu
      registerForContextMenu(list1);

      //Setup list to support long click events.
      list1.setLongClickable(true);

      //Action Listener for long click on item in the list
      list1.setOnItemLongClickListener(new AdapterView.OnItemLongClickListener()
      {
        public boolean onItemLongClick(AdapterView<?> parent, View v, int position, long id)
        {
            //do things here       

        }
    });

    //Action Listener for short click on item in the list
    list1.setOnItemClickListener(new AdapterView.OnItemClickListener()
    {
        public void onItemClick(AdapterView<?> parent, View v, int position, long id)
        {
            //do things here
        }
    });

    //And so one . . . 
    }
}

Answer 2

I would suggest you to have a better look at the documentation of ListView or if you want to work a little bit more to RecyclerView. The latter one will allow you definitely more flexibility and maintainability.

Anyway, a base solution, that flattens a little bit your UI hierarchy is to use only one ListView/RecyclerView. Then in your adapter you can decide the type of view that your container is going to present. In your design I'd identify 2 types:

• TYPE_HEADER
• TYPE_CHECKBOX

Once you have this things in place in your getView(...) you can decide based on the position and type what view instantiate(have a look at how to reuse them efficiently) and bind.

If you can try to avoid complexities those will become impossible to maintain :)