TableLayout issue - Android

Question

I have two TableLayout's in my Android app. I want one half of my app to be static and always shown, and the other to be scrollable. When I build and run my app on my Android phone, the bottom half (TableLayout 2) is not appearing at all. This is my xml file:

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

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

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/tableLayout1"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbarAlwaysDrawVerticalTrack="true"
android:scrollbars="vertical"
tools:context=".MainActivity" >

<TextView
    android:id="@+id/textView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:text="Module 1"
    android:textAppearance="?android:attr/textAppearanceLarge" />

<EditText
    android:id="@+id/editText1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:ems="10"
    android:gravity="center"
    android:inputType="number"
    android:maxLength="3" >

    <requestFocus />
</EditText>

<TextView
    android:id="@+id/textView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:text="Module 2"
    android:textAppearance="?android:attr/textAppearanceLarge" />

<EditText
    android:id="@+id/editText2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:ems="10"
    android:maxLength="3"
    android:inputType="number" />

<TextView
    android:id="@+id/textView3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:text="Module 3"
    android:textAppearance="?android:attr/textAppearanceLarge" />

<EditText
    android:id="@+id/editText3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:ems="10"
    android:maxLength="3"
    android:inputType="number" />

<TextView
    android:id="@+id/textView4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:text="Module 4"
    android:textAppearance="?android:attr/textAppearanceLarge" />

<EditText
    android:id="@+id/editText4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:ems="10"
    android:maxLength="3"
    android:inputType="number" />

<TextView
    android:id="@+id/textView5"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:text="Module 5"
    android:textAppearance="?android:attr/textAppearanceLarge" />

<EditText
    android:id="@+id/editText5"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:ems="10"
    android:maxLength="3"
    android:inputType="number" />

<TextView
    android:id="@+id/textView6"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:text="Module 6"
    android:textAppearance="?android:attr/textAppearanceLarge" />

<EditText
    android:id="@+id/editText6"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:ems="10"
    android:maxLength="3"
    android:inputType="number" />

<TextView
    android:id="@+id/textView7"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:text="Module 7"
    android:textAppearance="?android:attr/textAppearanceLarge" />

<EditText
    android:id="@+id/editText7"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:ems="10"
    android:maxLength="3"
    android:inputType="number" />

<TextView
    android:id="@+id/textView8"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:text="Module 8"
    android:textAppearance="?android:attr/textAppearanceLarge" />

<EditText
    android:id="@+id/editText8"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:ems="10"
    android:maxLength="3"
    android:inputType="number" />

</TableLayout>
</ScrollView>

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/tableLayout2"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity" >

<TextView
    android:id="@+id/textView9"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:text="Total"
    android:textAppearance="?android:attr/textAppearanceLarge" />

<EditText
    android:id="@+id/editText9"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:ems="10"
    android:enabled="false"
    android:inputType="number" />

<TextView
    android:id="@+id/textView10"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:text="Classification"
    android:textAppearance="?android:attr/textAppearanceLarge" />

<EditText
    android:id="@+id/editText10"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:ems="10"
    android:enabled="false"
    android:inputType="number" />

<EditText
    android:id="@+id/editText11"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:ems="10"
    android:enabled="false" />

</TableLayout>
</LinearLayout>

What am I doing wrong? Apologies if it's trivial, I have only started developing this today and I'm extremely new to all of this.

Answer 1

Your ScrollView has android:layout_height="fill_parent", meaning it will fill the entire LinearLayout, not leaving any space for your second Table Layout. What you want is for it to fill all of the space left over after the fixed Table Layout 2's space is taken up.

To do that, you'll want to you LinearLayout's layout_weight attribute:

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="0dp"
    android:layout_weight="1" >
    ...
</ScrollView>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tableLayout2"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" >
    ...
</TableLayout>

Any views without a weight will only take up their allotted height (in this case, we want it to wrap_content and only take up as much room as needed). While the views with weights will split the remaining height by ratio of weight (i.e., a 1 weight and a 2 weight would be 1/3 height and 2/3 height).

Answer 2

Your LinearLayout has android:orientation="vertical" but the first child of it, the ScrollView, has android:layout_height="fill_parent", which means it will take over the full height of its parent, so the second child (tableLayout2) will have no space left to display.

You might wanna have android:layout_height="wrap_content" for both the ScrollView and the tableLayout2.