ScrollView inside a TableLayout

Question

My whole activity is a TableLayout. I want the first couple of TableRow to be outside the ScrollView and always visible. I then want the ScrollView to start and have 10 TableRows inside of the ScrollView. I then want a couple of TableRows underneath the ScrollView that have buttons in them that are also always visible and do not scroll.

Below is a rough sketch of what my code looks like.

<TableLayout>    
    <TableRow></TableRow>                       
    <TableRow></TableRow>        
    <TableRow>
        <ScrollView
            <TableLayout
                <TableRow></TableRow>
                <TableRow></TableRow>
            </TableLayout>
    </ScrollView>
   </TableRow></TableRow>
   <TableRow>
       <Button></Button>    
       <Button></Button>
   </TableRow>
</TableLayout>

Below is my actual code. It is a lot of code to scroll through just in case you want to see it.

<TableLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/tableLayout"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:stretchColumns="1"
    android:shrinkColumns="0"
    android:orientation="vertical"
    android:paddingLeft="16dp"
    android:paddingRight="16dp"
    android:paddingTop="70dp"
    android:paddingBottom="50dp"
    android:background="@drawable/scroll" >    

    <TableRow
        android:id="@+id/header"
        android:layout_width="0dip"
        android:layout_height="wrap_content"
        android:layout_weight="1" >

        <TextView
            android:id="@+id/category"
            android:layout_height="wrap_content"
            android:layout_width="0px"
            android:layout_weight="1"
            android:textStyle="bold"
            android:textSize="15sp"
            android:paddingTop="10dp"
            android:gravity="center_horizontal" />

        <TableLayout
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_weight="1" >

            <TableRow
                android:layout_width="0dip"
                android:layout_height="wrap_content"
                android:layout_weight="1" >

                <TextView
                    android:id="@+id/points"
                    android:layout_width="0dip"
                    android:layout_height="wrap_content"
                    android:layout_weight=".25"
                    android:textSize="10sp"
                    android:gravity="left" 
                    android:textStyle="bold" />
            </TableRow>

            <TableRow
                android:layout_width="0dip"
                android:layout_height="wrap_content"
                android:layout_weight="1" >

                <TextView
                    android:id="@+id/percentage"
                    android:layout_width="0dip"
                    android:layout_height="wrap_content"
                    android:layout_weight=".3"
                    android:textSize="10sp"
                    android:gravity="left"
                    android:textStyle="bold" />
            </TableRow>

            <TableRow
                android:layout_width="0dip"
                android:layout_height="wrap_content"
                android:layout_weight="1" >

                <TextView
                    android:id="@+id/total_score"
                    android:layout_width="0dip"
                    android:layout_height="wrap_content"
                    android:layout_weight=".45"
                    android:textSize="10sp"
                    android:gravity="left"
                    android:textStyle="bold" />
            </TableRow>
        </TableLayout>
    </TableRow>

    <View 
        android:layout_width="fill_parent"
        android:layout_height="1dp"       
        android:background="#000001" />

    <TableRow
        android:id="@+id/row3"
        android:layout_width="0dip"
        android:layout_height="wrap_content"
        android:layout_weight="1" >

        <TextView
            android:id="@+id/imageColumn"
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_weight="0" />

        <TextView
            android:id="@+id/questionColumn"
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_weight=".45"
            android:textSize="12sp"
            android:textStyle="bold|italic"
            android:gravity="center_vertical" />

        <TextView
            android:id="@+id/answerColumn"
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_weight=".3"
            android:textSize="12sp"
            android:textStyle="bold|italic"
            android:gravity="center_vertical" />

        <TextView
            android:id="@+id/verseColumn"
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_weight=".25"
            android:textSize="12sp"
            android:textStyle="bold|italic"
            android:gravity="center_vertical" />
    </TableRow>

    <TableRow
        android:id="@+id/row3a"
        android:layout_width="0dip"
        android:layout_height="wrap_content"
        android:layout_weight="1" >

        <ScrollView 
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" >

            <TableLayout
                android:layout_width="0dip"
                android:layout_height="wrap_content"
                android:layout_weight="1" >

                <TableRow
                    android:layout_width="0dip"
                    android:layout_height="wrap_content"
                    android:stretchColumns="0,1,2,3"
                    android:layout_weight="1" >

                    <ImageView
                        android:id="@+id/q1Image"
                        android:layout_width="10dp"
                        android:layout_height="10dp"
                        android:layout_gravity="center_vertical" />

                    <TextView
                        android:id="@+id/q1Question"
                        android:layout_width="0dip"
                        android:layout_height="wrap_content"
                        android:layout_weight=".45"
                        android:textSize="10sp"
                        android:paddingLeft="2dp"
                        android:paddingRight="2dp"
                        android:layout_gravity="center_vertical" />

                    <TextView
                        android:id="@+id/q1Answer"
                        android:layout_width="0dip"
                        android:layout_height="wrap_content"
                        android:layout_weight=".3"
                        android:textSize="10sp"
                        android:layout_gravity="center_vertical" />

                    <TextView
                        android:id="@+id/q1Verse"
                        android:layout_width="0dip"
                        android:layout_height="wrap_content"
                        android:layout_weight=".25"
                        android:textSize="10sp"
                        android:layout_gravity="center_vertical" />
                </TableRow>

                <View 
                    android:layout_width="fill_parent"
                    android:layout_height="1dp"       
                    android:background="#C2BEBF" />

                <TableRow
                    android:id="@+id/row5"
                    android:layout_width="0dip"
                    android:layout_height="wrap_content"
                    android:stretchColumns="0,1,2,3"
                    android:layout_weight="1" >

                    <ImageView
                        android:id="@+id/q2Image"
                        android:layout_width="10dp"
                        android:layout_height="10dp"
                        android:layout_gravity="center_vertical" />

                    <TextView
                        android:id="@+id/q2Question"
                        android:layout_width="0dip"
                        android:layout_height="wrap_content"
                        android:layout_weight=".45"
                        android:textSize="10sp"
                        android:paddingLeft="2dp"
                        android:paddingRight="2dp"
                        android:layout_gravity="center_vertical" />

                    <TextView
                        android:id="@+id/q2Answer"
                        android:layout_width="0dip"
                        android:layout_height="wrap_content"
                        android:layout_weight=".3"
                        android:textSize="10sp"
                        android:layout_gravity="center_vertical" />

                    <TextView
                        android:id="@+id/q2Verse"
                        android:layout_width="0dip"
                        android:layout_height="wrap_content"
                        android:layout_weight=".25"
                        android:textSize="10sp"
                        android:layout_gravity="center_vertical" />
                </TableRow>

                <View 
                    android:layout_width="fill_parent"
                    android:layout_height="1dp"       
                    android:background="#C2BEBF" />

                <TableRow
                    android:id="@+id/row6"
                    android:layout_width="0dip"
                    android:layout_height="wrap_content"
                    android:stretchColumns="0,1,2,3"
                    android:layout_weight="1" >

                    <ImageView
                        android:id="@+id/q3Image"
                        android:layout_width="10dp"
                        android:layout_height="10dp"
                        android:layout_gravity="center_vertical" />

                    <TextView
                        android:id="@+id/q3Question"
                        android:layout_width="0dip"
                        android:layout_height="wrap_content"
                        android:layout_weight=".45"
                        android:textSize="10sp"
                        android:paddingLeft="2dp"
                        android:paddingRight="2dp"
                        android:layout_gravity="center_vertical" />

                    <TextView
                        android:id="@+id/q3Answer"
                        android:layout_width="0dip"
                        android:layout_height="wrap_content"
                        android:layout_weight=".3"
                        android:textSize="10sp"
                        android:layout_gravity="center_vertical" />

                    <TextView
                        android:id="@+id/q3Verse"
                        android:layout_width="0dip"
                        android:layout_height="wrap_content"
                        android:layout_weight=".25"
                        android:textSize="10sp"
                        android:layout_gravity="center_vertical" />
                </TableRow>

                <View 
                    android:layout_width="fill_parent"
                    android:layout_height="1dp"       
                    android:background="#C2BEBF" />

                <TableRow
                    android:id="@+id/row7"
                    android:layout_width="0dip"
                    android:layout_height="wrap_content"
                    android:stretchColumns="0,1,2,3"
                    android:layout_weight="1" >

                    <ImageView
                        android:id="@+id/q4Image"
                        android:layout_width="10dp"
                        android:layout_height="10dp"
                        android:layout_gravity="center_vertical" />

                    <TextView
                        android:id="@+id/q4Question"
                        android:layout_width="0dip"
                        android:layout_height="wrap_content"
                        android:layout_weight=".45"
                        android:textSize="10sp"
                        android:paddingLeft="2dp"
                        android:paddingRight="2dp"
                        android:layout_gravity="center_vertical" />

                    <TextView
                        android:id="@+id/q4Answer"
                        android:layout_width="0dip"
                        android:layout_height="wrap_content"
                        android:layout_weight=".3"
                        android:textSize="10sp"
                        android:layout_gravity="center_vertical" />

                    <TextView
                        android:id="@+id/q4Verse"
                        android:layout_width="0dip"
                        android:layout_height="wrap_content"
                        android:layout_weight=".25"
                        android:textSize="10sp"
                        android:layout_gravity="center_vertical" />
                </TableRow>

                <View 
                    android:layout_width="fill_parent"
                    android:layout_height="1dp"       
                    android:background="#C2BEBF" />

                <TableRow
                    android:id="@+id/row8"
                    android:layout_width="0dip"
                    android:layout_height="wrap_content"
                    android:stretchColumns="0,1,2,3"
                    android:layout_weight="1" >

                    <ImageView
                        android:id="@+id/q5Image"
                        android:layout_width="10dp"
                        android:layout_height="10dp"
                        android:layout_gravity="center_vertical" />

                    <TextView
                        android:id="@+id/q5Question"
                        android:layout_width="0dip"
                        android:layout_height="wrap_content"
                        android:layout_weight=".45"
                        android:textSize="10sp"
                        android:paddingLeft="2dp"
                        android:paddingRight="2dp"
                        android:layout_gravity="center_vertical" />

                    <TextView
                        android:id="@+id/q5Answer"
                        android:layout_width="0dip"
                        android:layout_height="wrap_content"
                        android:layout_weight=".3"
                        android:textSize="10sp"
                        android:layout_gravity="center_vertical" />

                    <TextView
                        android:id="@+id/q5Verse"
                        android:layout_width="0dip"
                        android:layout_height="wrap_content"
                        android:layout_weight=".25"
                        android:textSize="10sp"
                        android:layout_gravity="center_vertical" />
                </TableRow>

                <View 
                    android:layout_width="fill_parent"
                    android:layout_height="1dp"       
                    android:background="#C2BEBF" />

                <TableRow
                    android:id="@+id/row9"
                    android:layout_width="0dip"
                    android:layout_height="wrap_content"
                    android:stretchColumns="0,1,2,3"
                    android:layout_weight="1" >

                    <ImageView
                        android:id="@+id/q6Image"
                        android:layout_width="10dp"
                        android:layout_height="10dp"
                        android:layout_gravity="center_vertical" />

                    <TextView
                        android:id="@+id/q6Question"
                        android:layout_width="0dip"
                        android:layout_height="wrap_content"
                        android:layout_weight=".45"
                        android:textSize="10sp"
                        android:paddingLeft="2dp"
                        android:paddingRight="2dp"
                        android:layout_gravity="center_vertical" />

                    <TextView
                        android:id="@+id/q6Answer"
                        android:layout_width="0dip"
                        android:layout_height="wrap_content"
                        android:layout_weight=".3"
                        android:textSize="10sp"
                        android:layout_gravity="center_vertical" />

                    <TextView
                        android:id="@+id/q6Verse"
                        android:layout_width="0dip"
                        android:layout_height="wrap_content"
                        android:layout_weight=".25"
                        android:textSize="10sp"
                        android:layout_gravity="center_vertical" />
                </TableRow>

                <View 
                    android:layout_width="fill_parent"
                    android:layout_height="1dp"       
                    android:background="#C2BEBF" />

                <TableRow
                    android:id="@+id/row10"
                    android:layout_width="0dip"
                    android:layout_height="wrap_content"
                    android:stretchColumns="0,1,2,3"
                    android:layout_weight="1" >

                    <ImageView
                        android:id="@+id/q7Image"
                        android:layout_width="10dp"
                        android:layout_height="10dp"
                        android:layout_gravity="center_vertical" />

                    <TextView
                        android:id="@+id/q7Question"
                        android:layout_width="0dip"
                        android:layout_height="wrap_content"
                        android:layout_weight=".45"
                        android:textSize="10sp"
                        android:paddingLeft="2dp"
                        android:paddingRight="2dp"
                        android:layout_gravity="center_vertical" />

                    <TextView
                        android:id="@+id/q7Answer"
                        android:layout_width="0dip"
                        android:layout_height="wrap_content"
                        android:layout_weight=".3"
                        android:textSize="10sp"
                        android:layout_gravity="center_vertical" />

                    <TextView
                        android:id="@+id/q7Verse"
                        android:layout_width="0dip"
                        android:layout_height="wrap_content"
                        android:layout_weight=".25"
                        android:textSize="10sp"
                        android:layout_gravity="center_vertical" />
                </TableRow>

                <View 
                    android:layout_width="fill_parent"
                    android:layout_height="1dp"       
                    android:background="#C2BEBF" />

                <TableRow
                    android:id="@+id/row11"
                    android:layout_width="0dip"
                    android:layout_height="wrap_content"
                    android:stretchColumns="0,1,2,3"
                    android:layout_weight="1" >

                    <ImageView
                        android:id="@+id/q8Image"
                        android:layout_width="10dp"
                        android:layout_height="10dp"
                        android:layout_gravity="center_vertical" />

                    <TextView
                        android:id="@+id/q8Question"
                        android:layout_width="0dip"
                        android:layout_height="wrap_content"
                        android:layout_weight=".45"
                        android:textSize="10sp"
                        android:paddingLeft="2dp"
                        android:paddingRight="2dp"
                        android:layout_gravity="center_vertical" />

                    <TextView
                        android:id="@+id/q8Answer"
                        android:layout_width="0dip"
                        android:layout_height="wrap_content"
                        android:layout_weight=".3"
                        android:textSize="10sp"
                        android:layout_gravity="center_vertical" />

                    <TextView
                        android:id="@+id/q8Verse"
                        android:layout_width="0dip"
                        android:layout_height="wrap_content"
                        android:layout_weight=".25"
                        android:textSize="10sp"
                        android:layout_gravity="center_vertical" />
                </TableRow>

                <View 
                    android:layout_width="fill_parent"
                    android:layout_height="1dp"       
                    android:background="#C2BEBF" />

                <TableRow
                    android:id="@+id/row12"
                    android:layout_width="0dip"
                    android:layout_height="wrap_content"
                    android:stretchColumns="0,1,2,3"
                    android:layout_weight="1" >

                    <ImageView
                        android:id="@+id/q9Image"
                        android:layout_width="10dp"
                        android:layout_height="10dp"
                        android:layout_gravity="center_vertical" />

                    <TextView
                        android:id="@+id/q9Question"
                        android:layout_width="0dip"
                        android:layout_height="wrap_content"
                        android:layout_weight=".45"
                        android:textSize="10sp"
                        android:paddingLeft="2dp"
                        android:paddingRight="2dp"
                        android:layout_gravity="center_vertical" />

                    <TextView
                        android:id="@+id/q9Answer"
                        android:layout_width="0dip"
                        android:layout_height="wrap_content"
                        android:layout_weight=".3"
                        android:textSize="10sp"
                        android:layout_gravity="center_vertical" />

                    <TextView
                        android:id="@+id/q9Verse"
                        android:layout_width="0dip"
                        android:layout_height="wrap_content"
                        android:layout_weight=".25"
                        android:textSize="10sp"
                        android:layout_gravity="center_vertical" />
                </TableRow>

                <View 
                    android:layout_width="fill_parent"
                    android:layout_height="1dp"       
                    android:background="#C2BEBF" />

                <TableRow
                    android:id="@+id/row13"
                    android:layout_width="0dip"
                    android:layout_height="wrap_content"
                    android:stretchColumns="0,1,2,3"
                    android:layout_weight="1" >

                    <ImageView
                        android:id="@+id/q10Image"
                        android:layout_width="10dp"
                        android:layout_height="10dp"
                        android:layout_gravity="center_vertical" />

                    <TextView
                        android:id="@+id/q10Question"
                        android:layout_width="0dip"
                        android:layout_height="wrap_content"
                        android:layout_weight=".45"
                        android:textSize="10sp"
                        android:paddingLeft="2dp"
                        android:paddingRight="2dp"
                        android:layout_gravity="center_vertical" />

                    <TextView
                        android:id="@+id/q10Answer"
                        android:layout_width="0dip"
                        android:layout_height="wrap_content"
                        android:layout_weight=".3"
                        android:textSize="10sp"
                        android:layout_gravity="center_vertical" />

                    <TextView
                        android:id="@+id/q10Verse"
                        android:layout_width="0dip"
                        android:layout_height="wrap_content"
                        android:layout_weight=".25"
                        android:textSize="10sp"
                        android:layout_gravity="center_vertical" />
                </TableRow>
            </TableLayout>
        </ScrollView>
    </TableRow>

    <TableRow
        android:id="@+id/row14"
        android:layout_width="0dip"
        android:layout_height="wrap_content"
        android:stretchColumns="0,1"
        android:layout_weight="1" >

        <Button 
            android:id="@+id/mainmenuBtn"
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_weight=".33"
            android:textSize="10sp" />

        <Button 
            android:id="@+id/highscoresBtn"
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_weight=".33"
            android:textSize="10sp" />
        <Button 
            android:id="@+id/playBtn"
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_weight=".34"
            android:textSize="10sp" />
    </TableRow>
</TableLayout>

Below is the display it outputs. Before I tried to add the ScrollView, it was all displaying correctly. The reason I am trying to add the ScrollView is because it was too much text and I had to make the font size extremely small to fit everything but it was unreadable because it was so small. I then decided to make it a ScrollView and make the text size larger.

That was a lot of writing so hopefully it made sense!

Answer 1

• Take parent relative layout
• Have one linear layout on Top, which can encapsulate your couple of rows It depends on you whether to choose tablelayout or multiple linear can also do the work
• Then take another linear at Bottom which contains buttons you needed
• Then put listview in between these to lieanrs which can scroll.

I will prefere listview over scrollview since it can simplify code complexity.

Answer 2

It may be a better approach to wrap the whole activity inside a LinearLayout and then have three individual TableLayouts, using the scrollview on/around just the middle TableLayout.