How to make a screen with listview and table scrollable?

Question

I am new to android.When i am trying to make a screen scrollable, the screen is becoming scrollable but the content is not shown.The screen contains a listview and another tableview.This is the code i am using.

     <?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:stretchColumns="1"
android:scrollbars="vertical"
android:isScrollContainer="true"
android:scrollbarAlwaysDrawVerticalTrack="true">




     <TableLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@+id/tableLayout1" android:layout_width="fill_parent" android:layout_height="70dp"  android:layout_marginRight="3dp" 
  >
   <TableRow android:layout_width="wrap_content"  android:layout_marginTop="5dp" > 
    <ImageView
    android:id="@+id/logo"
    android:layout_width="90dp"
    android:layout_height="90dp"
    android:src="@drawable/logo"
    android:layout_marginLeft="3dp"

    />
    <ImageView
    android:id="@+id/back"
    android:layout_width="30dp"
    android:layout_height="40dp"
    android:src="@drawable/back"
    android:layout_marginLeft="20dp"
    android:layout_marginTop="20dp"
    />

    <ImageView
        android:id="@+id/timesheet"
        android:layout_width="90dp"
        android:layout_height="70dp"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="1dp"
        android:src="@drawable/timesheet" />

     <ImageView
    android:id="@+id/home"
    android:layout_width="35dp"
    android:layout_height="50dp"
    android:src="@drawable/home"
     android:layout_marginTop="17dp"
     android:layout_marginLeft="25dp"
    android:layout_marginRight="20dp"

    />
    </TableRow>

  </TableLayout>


     <TableLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@+id/tableLayout1" android:layout_width="fill_parent" android:layout_height="40dp" android:layout_marginTop="70dp" android:layout_marginLeft="5dp" android:layout_marginRight="8dp" 
  >

    <TableRow android:layout_width="70dp" android:layout_height="100dp"  android:layout_marginTop="10dp" android:background="#000000" > 
         <TextView
        android:text="Timesheets for Approval"
        android:layout_width="wrap_content"
        android:layout_height="80dp"
        android:textSize="18dp"
        android:layout_marginTop="3dp"
        android:textColor="#ffff"
        android:layout_marginLeft="70dp"
       />      
    </TableRow>  
    </TableLayout>  


 <ListView android:layout_width="wrap_content" 
     android:id="@+id/listView1"
     android:layout_height="wrap_content"
     android:layout_marginTop="120dp"
     android:layout_marginLeft="5dp"
     android:layout_marginRight="8dp"
            />

 <TableLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@+id/tableLayout1"  android:layout_marginTop="415dp" android:layout_marginLeft="5dp" android:layout_marginRight="8dp"  android:layout_width="400dp" android:layout_height="170dp" 
  android:stretchColumns="*"
  android:background="@drawable/shape">

        <TableRow android:layout_width="fill_parent"   android:layout_marginTop="2dp" android:layout_marginLeft="5dp" android:layout_marginRight="8dp" >   
             <TextView
        android:text="Timesheet Details"
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        />      

         </TableRow>

    <TableRow android:layout_width="fill_parent"  android:layout_marginLeft="1dp">   
        <TextView
        android:text="Emp Name"
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="13dp"

        />        
        <EditText android:text="EditText" android:id="@+id/emp_name" android:enabled="false" android:layout_width="fill_parent" android:layout_height="wrap_content" android:textColor="#000000" android:textSize="13dp"
            ></EditText>
        <EditText android:text="EditText" android:id="@+id/emp_code" android:enabled="false" android:layout_width="fill_parent" android:layout_height="wrap_content" android:textColor="#000000" android:textSize="13dp"
            ></EditText>
    </TableRow>
    <TableRow android:layout_width="fill_parent" android:layout_marginLeft="1dp">

       <TextView
        android:text="From  Date"
        android:id="@id/textView1"  
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="13dp"

       />        
        <EditText android:text="EditText" android:id="@+id/from_date" android:enabled="false" android:layout_width="fill_parent" android:layout_height="wrap_content" android:textColor="#000000" android:textSize="13dp"
            ></EditText>
    </TableRow>
    <TableRow android:layout_width="fill_parent" android:layout_marginLeft="1dp">
        <TextView
          android:text="To Date"
          android:id="@id/textView1"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:textSize="13dp"

          />    
         <EditText android:text="EditText" android:id="@+id/to_date" android:enabled="false" android:layout_width="fill_parent" android:layout_height="wrap_content" android:textColor="#000000" android:textSize="13dp"
             ></EditText>
    </TableRow>
     <TableRow android:layout_width="fill_parent"  android:layout_marginLeft="1dp">
        <TextView
          android:text="Target Hrs"
          android:id="@id/textView1"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:textSize="13dp"

         />  
          <EditText android:text="EditText" android:id="@+id/target_hours" android:enabled="false" android:layout_width="fill_parent" android:layout_height="wrap_content" android:textColor="#000000" android:textSize="13dp"
              ></EditText>
        <TextView
          android:text="Actual Hrs"
          android:id="@id/textView1"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:textSize="13dp"

          />   
          <EditText android:text="EditText" android:id="@+id/actual_hours" android:enabled="false" android:layout_width="fill_parent" android:layout_height="wrap_content" android:textColor="#000000" android:textSize="13dp"
              ></EditText>
    </TableRow>

</TableLayout>
<TableLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@+id/tableLayout1"  android:layout_marginTop="600dp" android:layout_marginLeft="1dp"  android:layout_width="400dp" android:layout_height="wrap_content" 
  >

    <TableRow android:layout_width="fill_parent" android:layout_marginLeft="1dp">
 <Button android:id="@+id/approve" android:layout_width="wrap_content" android:layout_height="22dp" android:background = "@drawable/approve" android:textColor="#ffff" android:layout_marginLeft="30dp" ></Button>
 <Button  android:id="@+id/reject" android:layout_width="wrap_content" android:layout_height="22dp" android:background = "@drawable/reject" android:textColor="#ffff" android:layout_marginLeft="50dp" android:layout_marginRight="20dp" ></Button>
 <Button  android:id="@+id/detail" android:layout_width="wrap_content" android:layout_height="22dp" android:background = "@drawable/details" android:textColor="#ffff" android:layout_marginLeft="30dp" android:layout_marginRight="30dp"></Button>

</TableRow>

</TableLayout>

</LinearLayout>
</ScrollView>

Answer 1

set orientation of your linear layout to vertical.

android:orientation="vertical"

and remove

xmlns:android="http://schemas.android.com/apk/res/android"

from other layouts than main scrollview.

Wrap your listView into another linear layout and specify height for it. when you are using scrollView then why adding

android:stretchColumns="1"
android:scrollbars="vertical"
android:isScrollContainer="true"
android:scrollbarAlwaysDrawVerticalTrack="true"

to your linear layout. modify your linearlayout as:

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

Answer 2

According to the UI guide lines and best practices, it is advisable not to use Scrollable content inside Scrollview and doing that prevents the scrolling of the Scrollable content.

When you put two scrollview android just get confused which scroll view is touched. So sometimes it gets unable to deliver touch event.

But if still you want to achieve the scrolling functionality you can manage it by using the onTouch event of the particular view. And you need to design your layout accordingly.

But even if the requirement forces you to make such layouts. Try this…

Say case is somewhat like this….

  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
         xmlns:tools="http://schemas.android.com/tools"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
        tools:context=".MainActivity" >

<ScrollView
    android:id="@+id/svssvMain"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_alignParentTop="true" >

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

        <TextView 
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:textColor="@android:color/black"
            android:textSize="20sp"
            android:layout_margin="10dp"
            android:text="@string/tv_content"/>
        <View 
            android:layout_width="fill_parent"
            android:layout_height="1dp"
            android:background="@android:color/black"/>
        <ListView 
            android:id="@+id/svslvMain"
            android:layout_width="fill_parent"
            android:layout_height="100dp"
            android:cacheColorHint="#00000000"/>
        <View 
            android:layout_width="fill_parent"
            android:layout_height="1dp"
            android:background="@android:color/black"/>
        <TextView 
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:textColor="@android:color/black"
            android:textSize="20sp"
            android:layout_margin="10dp"
            android:text="@string/tv_content"/>
        <View 
            android:layout_width="fill_parent"
            android:layout_height="1dp"
            android:background="@android:color/black"/>
        <ScrollView 
            android:id="@+id/svssvchild"
            android:layout_width="fill_parent"
            android:layout_height="100dp">

            <TextView 
                android:id="@+id/svstvContent"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:textSize="20sp"
                android:layout_margin="10dp"
                android:text="@string/lipsum"/>
        </ScrollView>
        <View 
            android:layout_width="fill_parent"
            android:layout_height="1dp"
            android:background="@android:color/black"/>
        <TextView 
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:textColor="@android:color/black"
            android:textSize="20sp"
            android:layout_margin="10dp"
            android:text="@string/tv_content"/>
        <View 
            android:layout_width="fill_parent"
            android:layout_height="1dp"
            android:background="@android:color/black"/>
        <ImageView 
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:src="@drawable/android"/>
    </LinearLayout>
</ScrollView>

Step 1 : Provide unique id to both the scrollview.

Step 2 : get reference of that two Scrollview & ListView in your activity.

     m_lvMain = (ListView) findViewById(R.id.svslvMain);
   m_svMain = (ScrollView) findViewById(R.id.svssvMain);
   m_svchild = (ScrollView) findViewById(R.id.svssvchild);

Step 3: Now set touch listeners for Listview and ScrollView.

    m_svMain.setOnTouchListener(new View.OnTouchListener(){
        public boolean onTouch(View p_v, MotionEvent p_event)
        {
            // Log.v(TAG, "PARENT TOUCH");
        findViewById(R.id.svslvMain).getParent().requestDisallowInterceptTouchEvent(false);
            findViewById(R.id.svssvchild).getParent().requestDisallowInterceptTouchEvent(false);
            return false;
        }
    });
    m_svchild.setOnTouchListener(new View.OnTouchListener(){
        public boolean onTouch(View p_v, MotionEvent p_event)
        {
            // Log.v(TAG, "CHILD TOUCH");
            // Disallow the touch request for parent scroll on touch of
            // child view
            p_v.getParent().requestDisallowInterceptTouchEvent(true);
            return false;
        }
    });
    m_lvMain.setOnTouchListener(new View.OnTouchListener(){
        public boolean onTouch(View p_v, MotionEvent p_event)
        {
            // Log.v(TAG, "CHILD TOUCH");
            // Disallow the touch request for parent scroll on touch of
            // child view
            p_v.getParent().requestDisallowInterceptTouchEvent(true);
            return false;
        }
    });

I hope it will help you.

Answer 3

You cant use a ListView inside of a ScrollView unless you implement your own Scrollview and handle the touch event.

I see that you want the entire page to be scrollable, this way when you scroll down the table will eventually go out of the screen. For you to achieve this you need to

1. Remove ScrollView.
2. Place your table in another xml file.

3. Use the addHeaderView(View v) method on your listview and add the table to the listview.

   listview.addeaderView(tableView);
   

Answer 4

You can add your two upper tablelayout of list view as a Header View of ListView and the two tablelayout below the list view as a footer view of the list view.

Something like this :

Header View :

ListView.addHeaderView(HeaderView);

Footer View :

ListView.addFooterView(FooterView);

Remove the scrollview. Now your layout will scroll with list without any scrollview.