ScrollView inside TableLayout in android

Question

I am developing an application in which I am using a Table Layout. The first row of my table layout is as Header. Now I want something that the Header or first row should not be scrollable and other should be scrollable. My code is :

<TableLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:shrinkColumns="*"  android:stretchColumns="*" android:background="#ffffff"> 

    <!-- Row 1 with single column -->
    <TableRow 
        android:layout_height="wrap_content" 
        android:layout_width="fill_parent" 
        android:gravity="center_horizontal">  
        <TextView 
            android:layout_width="match_parent" android:layout_height="wrap_content"
            android:textSize="18sp" android:text="@string/com"  android:layout_span="3"
            android:padding="18dip" android:gravity="center"
            android:textColor="#000"/>  
    </TableRow>   


    <!-- Row 2 with 3 columns -->
    <TableRow 
        android:id="@+id/tableRow1" 
        android:layout_height="wrap_content" 
        android:layout_width="match_parent"
        android:background="#b0b0b0"
        android:gravity="center_horizontal">  
      <TextView
        android:id="@+id/textView2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="12dp"
        android:text="@string/c"
        android:gravity="center"
        android:textSize="18sp"
        android:textAppearance="?android:attr/textAppearanceMedium" />
    </TableRow> 

    <TableRow 
        android:layout_height="wrap_content" 
        android:layout_width="fill_parent" 
        android:gravity="center_horizontal">  
        <TextView 
            android:id="@+id/TextView3" 
            android:text="@string/c1"
            android:layout_weight="1" 
            android:gravity="center"/>

        <TextView 
                android:id="@+id/TextView4" 
                android:text="@string/c2"
                android:layout_weight="1" 
                android:gravity="center"/>
    </TableRow>  

    <TableRow 
        android:id="@+id/tableRow2" 
        android:layout_height="wrap_content" 
        android:layout_width="match_parent"
        android:background="#b0b0b0"
        android:gravity="center_horizontal">  
      <TextView
        android:id="@+id/textView5"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="12dp"
        android:text="@string/d"
        android:gravity="center"
        android:textSize="18sp"
        android:textAppearance="?android:attr/textAppearanceMedium" />
    </TableRow> 

    <!-- Row 3 with 2 columns -->
    <TableRow 
        android:layout_height="wrap_content" 
        android:layout_width="fill_parent" 
        android:gravity="center_horizontal">  
        <TextView 
            android:id="@+id/TextView6" 
            android:text="@string/d1"
            android:layout_weight="1" 
            android:gravity="center"/>

        <TextView 
                android:id="@+id/TextView7" 
                android:text="@string/d2"
                android:layout_weight="1" 
                android:gravity="center"/>
    </TableRow>  

      <TableRow 
        android:id="@+id/tableRow2" 
        android:layout_height="wrap_content" 
        android:layout_width="match_parent"
        android:background="#b0b0b0"
        android:gravity="center_horizontal">  
      <TextView
        android:id="@+id/textView5"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="12dp"
        android:text="@string/e"
        android:gravity="center"
        android:textSize="18sp"
        android:textAppearance="?android:attr/textAppearanceMedium" />
    </TableRow> 

    <!-- Row 3 with 2 columns -->
    <TableRow 
        android:layout_height="wrap_content" 
        android:layout_width="fill_parent" 
        android:gravity="center_horizontal">  
        <TextView 
            android:id="@+id/TextView6" 
            android:text="@string/e1"
            android:layout_weight="1" 
            android:gravity="center"/>

        <TextView 
                android:id="@+id/TextView7" 
                android:text="@string/e2"
                android:layout_weight="1" 
                android:gravity="center"/>
    </TableRow>

      <TableRow 
        android:id="@+id/tableRow2" 
        android:layout_height="wrap_content" 
        android:layout_width="match_parent"
        android:background="#b0b0b0"
        android:gravity="center_horizontal">  
      <TextView
        android:id="@+id/textView5"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="12dp"
        android:text="@string/g"
        android:gravity="center"
        android:textSize="18sp"
        android:textAppearance="?android:attr/textAppearanceMedium" />
    </TableRow> 
</TableLayout>

Can anybody please help me how to make first TextView as header and non-scrollable and other complete table as scrollable ..??

Answer 1

simple use this code in xml file its work...

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFF"
android:orientation="vertical" >

<!-- Header aligned to top -->

<LinearLayout
    android:id="@+id/headerView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" >

    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#ffffff"
        android:shrinkColumns="*"
        android:stretchColumns="*" >

        <!-- Row 1 with single column -->

        <TableRow
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal" >

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_span="3"
                android:gravity="center"
                android:padding="18dip"
                android:text="com"
                android:textColor="#000"
                android:textSize="18sp" />
        </TableRow>
    </TableLayout>
  </LinearLayout>

  <ScrollView
    android:id="@+id/scrollablContent"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1" >

    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#ffffff"
        android:shrinkColumns="*"
        android:stretchColumns="*" >

        <TableRow
            android:id="@+id/tableRow1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#b0b0b0"
            android:gravity="center_horizontal" >

            <TextView
                android:id="@+id/textView2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="12dp"
                android:gravity="center"
                android:text="c"
                android:textAppearance="?android:attr/textAppearanceMedium"
                android:textSize="18sp" />
        </TableRow>

        <TableRow
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal" >

            <TextView
                android:id="@+id/TextView3"
                android:layout_weight="1"
                android:gravity="center"
                android:text="c1" />

            <TextView
                android:id="@+id/TextView4"
                android:layout_weight="1"
                android:gravity="center"
                android:text="c2" />
        </TableRow>

        <TableRow
            android:id="@+id/tableRow2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#b0b0b0"
            android:gravity="center_horizontal" >

            <TextView
                android:id="@+id/textView5"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="12dp"
                android:gravity="center"
                android:text="d"
                android:textAppearance="?android:attr/textAppearanceMedium"
                android:textSize="18sp" />
        </TableRow>

        <!-- Row 3 with 2 columns -->

        <TableRow
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal" >

            <TextView
                android:id="@+id/TextView6"
                android:layout_weight="1"
                android:gravity="center"
                android:text="d1" />

            <TextView
                android:id="@+id/TextView7"
                android:layout_weight="1"
                android:gravity="center"
                android:text="d2" />
        </TableRow>

        <TableRow
            android:id="@+id/tableRow2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#b0b0b0"
            android:gravity="center_horizontal" >

            <TextView
                android:id="@+id/textView5"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="12dp"
                android:gravity="center"
                android:text="e"
                android:textAppearance="?android:attr/textAppearanceMedium"
                android:textSize="18sp" />
        </TableRow>

        <!-- Row 3 with 2 columns -->

        <TableRow
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal" >

            <TextView
                android:id="@+id/TextView6"
                android:layout_weight="1"
                android:gravity="center"
                android:text="e1" />

            <TextView
                android:id="@+id/TextView7"
                android:layout_weight="1"
                android:gravity="center"
                android:text="e2" />
        </TableRow>

        <TableRow
            android:id="@+id/tableRow2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#b0b0b0"
            android:gravity="center_horizontal" >

            <TextView
                android:id="@+id/textView5"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="12dp"
                android:gravity="center"
                android:text="g"
                android:textAppearance="?android:attr/textAppearanceMedium"
                android:textSize="18sp" />
        </TableRow>
    </TableLayout>
</ScrollView>

<RelativeLayout
    android:id="@+id/footerView"
    android:layout_width="wrap_content"
    android:layout_height="72dp" >

    <!-- Footer aligned to bottom -->

</RelativeLayout>

</LinearLayout>

Answer 2

Try some thing like this,

<TableLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:shrinkColumns="*"  android:stretchColumns="*" android:background="#ffffff"> 


    <TableRow 
        android:layout_height="wrap_content" 
        android:layout_width="fill_parent" 
        android:gravity="center_horizontal">  
        <TextView 
            android:layout_width="match_parent" android:layout_height="wrap_content"
            android:textSize="18sp" android:text="@string/com"  android:layout_span="3"
            android:padding="18dip" android:gravity="center"
            android:textColor="#000"/>

    </TableRow>   



      <ScrollView
          android:id="@+id/scrollView1"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content" >

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

              <TableRow
                  android:id="@+id/tableRow1"
                  android:layout_width="match_parent"
                  android:layout_height="wrap_content"
                  android:background="#b0b0b0"
                  android:gravity="center_horizontal" >

                  <TextView
                      android:id="@+id/textView2"
                      android:layout_width="match_parent"
                      android:layout_height="wrap_content"
                      android:layout_marginTop="12dp"
                      android:gravity="center"
                      android:text="@string/c"
                      android:textAppearance="?android:attr/textAppearanceMedium"
                      android:textSize="18sp" />
              </TableRow>

              <TableRow
                  android:layout_width="fill_parent"
                  android:layout_height="wrap_content"
                  android:gravity="center_horizontal" >

                  <TextView
                      android:id="@+id/TextView3"
                      android:layout_weight="1"
                      android:gravity="center"
                      android:text="@string/c1" />

                  <TextView
                      android:id="@+id/TextView4"
                      android:layout_weight="1"
                      android:gravity="center"
                      android:text="@string/c2" />
              </TableRow>

              <TableRow
                  android:id="@+id/tableRow2"
                  android:layout_width="match_parent"
                  android:layout_height="wrap_content"
                  android:background="#b0b0b0"
                  android:gravity="center_horizontal" >

                  <TextView
                      android:id="@+id/textView5"
                      android:layout_width="match_parent"
                      android:layout_height="wrap_content"
                      android:layout_marginTop="12dp"
                      android:gravity="center"
                      android:text="@string/d"
                      android:textAppearance="?android:attr/textAppearanceMedium"
                      android:textSize="18sp" />
              </TableRow>

              <TableRow
                  android:layout_width="fill_parent"
                  android:layout_height="wrap_content"
                  android:gravity="center_horizontal" >

                  <TextView
                      android:id="@+id/TextView6"
                      android:layout_weight="1"
                      android:gravity="center"
                      android:text="@string/d1" />

                  <TextView
                      android:id="@+id/TextView7"
                      android:layout_weight="1"
                      android:gravity="center"
                      android:text="@string/d2" />
              </TableRow>

              <TableRow
                  android:id="@+id/tableRow2"
                  android:layout_width="match_parent"
                  android:layout_height="wrap_content"
                  android:background="#b0b0b0"
                  android:gravity="center_horizontal" >

                  <TextView
                      android:id="@+id/textView5"
                      android:layout_width="match_parent"
                      android:layout_height="wrap_content"
                      android:layout_marginTop="12dp"
                      android:gravity="center"
                      android:text="@string/e"
                      android:textAppearance="?android:attr/textAppearanceMedium"
                      android:textSize="18sp" />
              </TableRow>

              <TableRow
                  android:layout_width="fill_parent"
                  android:layout_height="wrap_content"
                  android:gravity="center_horizontal" >

                  <TextView
                      android:id="@+id/TextView6"
                      android:layout_weight="1"
                      android:gravity="center"
                      android:text="@string/e1" />

                  <TextView
                      android:id="@+id/TextView7"
                      android:layout_weight="1"
                      android:gravity="center"
                      android:text="@string/e2" />
              </TableRow>

              <TableRow
                  android:id="@+id/tableRow2"
                  android:layout_width="match_parent"
                  android:layout_height="wrap_content"
                  android:background="#b0b0b0"
                  android:gravity="center_horizontal" >

                  <TextView
                      android:id="@+id/textView5"
                      android:layout_width="match_parent"
                      android:layout_height="wrap_content"
                      android:layout_marginTop="12dp"
                      android:gravity="center"
                      android:text="@string/g"
                      android:textAppearance="?android:attr/textAppearanceMedium"
                      android:textSize="18sp" />
              </TableRow>
          </LinearLayout>

      </ScrollView>

</TableLayout>

Answer 3

After your First row , describe the scrollview

like this...

<TableLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" >

    <TableRow
        android:id="@+id/tableRow1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >
    </TableRow>
     <ScrollView
            android:id="@+id/scrollView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >

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

    <TableRow
        android:id="@+id/tableRow2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >

    </TableRow>

    <TableRow
        android:id="@+id/tableRow3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >
    </TableRow>

    <TableRow
        android:id="@+id/tableRow4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >
    </TableRow>        

      </LinearLayout>
      </ScrollView>
</TableLayout>

Answer 4

You can create a LinearLayout for remaining table rows except header table row and add this LinearLayout to ScrollView, because ScrollView can have only one child.

Eg:

<ScrollView
        android:id="@+id/scrollviewID"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

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

            //your table rows

        </LinearLayout>
</ScrollView>