ScrollView only on part of the screen in Android

Question

I have a screen with two parts. I want the top one to be static and the lower one with a TableLayout to be scrollable. I have tried adding a ScrollView to the lower part of the screen, but when making the TableLayout scrollable the top part disappears.

How can I combine the top static part with a scrollable lower part?

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:id="@+id/LinearLayout01"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_weight="9" 
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/title_shape">  
    <Button 
        android:id="@+id/btnBack" 
        android:text="@string/titleCreateTest"
        style="@style/Bar_buttonBack">
    </Button>
    <TextView android:layout_weight="6" 
        android:id="@+id/titleFlashcard" 
        android:text="@string/titleStatistic" 
        style="@style/TitleStyle">
    </TextView> 
</LinearLayout>
 <ScrollView
  android:id="@+id/ScrollView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:id="@+id/LinearLayout2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
<TableLayout 
    android:id="@+id/table_layout"
    style="@style/TableLayoutStyle">
 <TableRow 
     android:id="@+id/table_row1">
    <TextView
            android:id="@+id/tv1"
            android:text="@string/tvRecord" 
            style="@style/TableRowStyle"/>
    <TextView
            android:id="@+id/tv1v"
            style="@style/TableRowStyleColumn2"/>
  </TableRow>
  <View
    style="@style/TableRowSeparator"/>
     <TableRow
     android:id="@+id/table_row2">
        <TextView
            android:id="@+id/tv2"
            android:text="@string/tvMedium" 
            style="@style/TableRowStyle"/>
        <TextView
            android:id="@+id/tv2v"
            style="@style/TableRowStyleColumn2"/>
    </TableRow>
      <View
    style="@style/TableRowSeparator"/>
    <TableRow
    android:id="@+id/table_row3">
        <TextView
            android:id="@+id/tv3"
            android:text="@string/tvWorst" 
            style="@style/TableRowStyle"/>
        <TextView
            android:id="@+id/tv3v"
            style="@style/TableRowStyleColumn2"/>
    </TableRow>
    </TableLayout> 
   <TableLayout 
    android:id="@+id/table_layout2"
    style="@style/TableLayoutStyle">
        <TableRow
          android:id="@+id/table_row4">
          <TextView
            android:id="@+id/tvDate"
            style="@style/TableRowStyle"/>
            <TextView
            android:id="@+id/tvResult"
            style="@style/TableRowStyleColumn2"/>
     </TableRow>
    <View
    android:id="@+id/rowseparator"
    style="@style/TableRowSeparator"/>
</TableLayout>
</LinearLayout>
</ScrollView>
</LinearLayout>

I tried to add my xml layout, but it doesn't show the whole thing. Should I use other that the code brackets {} for xml? — kakka47, Feb 22 '11 at 15:10
you need to select together all the lines of xml code and then press the `{}` button, it will add 4 spaces at the beginning of each line (that's what makes lines or blocks code formatted). — bigstones, Feb 22 '11 at 15:14

score 1 · Accepted Answer · answered Feb 22 '11 at 16:03

Using both fill_parent and android:weight can be tricky. There was a discussion about it but I can't find it.

Being your second linear layout (the one with button and textview) set to fill_parent, I would expect it to eat up all the space in the root layout, but with a weight set it seems to behave like an "inverse weight" and lets the ScrollView take all the space.

It would be better to give the top part a wrap_content in height, and a fill_parent to the ScrollView. If you prefer, you could set top part's height=wrap_content and weight=0, and the bottom part's height=0 and weight=1 so that it takes all the space left.

If you set a ScrollView to wrap_content, it will be wide (or tall) as much as its content. Is it scrolling or just ending up outside the screen?

The LinearLayout inside the ScrollView is useless, unless you're planning to add something else.

One last note: the xmlns:android="...." should stay only in the root element.

Android layout framework is know for being a challenge sometimes, I hope this helped.

Hi! I found one stackoverflow-q where they were discussing weight and scrollviews, but lost it again. You were right though, it seems the weight in my layout acted as an "inverse weight" and when I removed the weight the layout works as I wanted. Thanks! — kakka47, Feb 22 '11 at 16:27
In the [Training for Building your first app on the official developer site](http://developer.android.com/training/basics/firstapp/building-ui.html#Weight), there is a brief mention that we should use a `0dp` value for `android:layout_width`/`android:layout_height` if we are also using `android:layout_weight` because `android:layout_weight` already requires a width/height calculation to determine the _remaining space_; and the only reason mentioned is _to improve layout efficiency_. — Solace, Jun 29 '15 at 17:17

ScrollView only on part of the screen in Android

1 Answers1

Linked