Fixed header in a TableLayout

Fixed header in a TableLayout

As the previous post this will also cover TableLayout. As with borders, there are no attribute for defining a TableRow as a header row. With header row I mean a row that will not scroll with the rest of the data in the TableLayout (providing you have declared the table to be inside a ScrollView).

Well, there is actually a way to work around this using a separate TableLayout for the header row. If you know that the header columns will be wider than the rest of the data in the table it's pretty easy. Some key notes to make this work:

• Set all Views in the table to android:layout_weight="1"
• You must NOT set android:stretchColumns="*" as this will override the weight attribute.
• You must know which row is widest, and use a copy of this as a "dummy" row.

In the layout xml add the header row:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45

<TableLayout   android:id="@+id/header"   android:layout_width="fill_parent"   android:layout_marginRight="2dp"   android:layout_marginLeft="2dp"   android:layout_height="wrap_content"   android:background="@android:color/black">   <TableRow>    <TextView     android:textColor="@android:color/black"     android:layout_margin="1dp"     android:gravity="center_horizontal"     android:layout_weight="1"     android:background="#ffcccccc"     android:text="Col1" />    <TextView     android:textColor="@android:color/black"     android:gravity="center_horizontal"     android:layout_weight="1"     android:layout_margin="1dp"     android:background="@android:color/white"     android:text="Col2" />    <TextView     android:textColor="@android:color/black"     android:gravity="center_horizontal"     android:layout_weight="1"     android:layout_margin="1dp"     android:background="@android:color/white"     android:text="Col3" />    <TextView     android:textColor="@android:color/black"     android:gravity="center_horizontal"     android:layout_weight="1"     android:layout_margin="1dp"     android:background="@android:color/white"     android:text="Col4" />    <TextView     android:textColor="@android:color/black"     android:gravity="center_horizontal"     android:layout_weight="1"     android:layout_margin="1dp"     android:background="@android:color/white"     android:text="Col5" />   </TableRow>  </TableLayout>

Then add the main table inside a ScrollView containing a copy of the header row as a dummy row with a height set to "0dp" making it invisible:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45

<ScrollView   android:id="@+id/table_scroll"   android:layout_width="fill_parent"   android:layout_height="wrap_content"   android:layout_marginRight="2dp"   android:layout_marginLeft="2dp">   <TableLayout    android:id="@+id/maintable"    android:layout_width="fill_parent"    android:layout_height="wrap_content"    android:background="@android:color/black">    <TableRow>     <TextView      android:layout_height="0dp"      android:layout_weight="1"      android:layout_marginRight="1dp"      android:layout_marginLeft="1dp"      android:text="Col1" />     <TextView      android:layout_height="0dp"      android:layout_weight="1"      android:layout_marginLeft="1dp"      android:layout_marginRight="1dp"      android:text="Col2" />     <TextView      android:layout_height="0dp"      android:layout_weight="1"      android:layout_marginLeft="1dp"      android:layout_marginRight="1dp"      android:text="Col3" />     <TextView      android:layout_height="0dp"      android:layout_weight="1"      android:layout_marginLeft="1dp"      android:layout_marginRight="1dp"      android:text="Col4" />     <TextView      android:layout_height="0dp"      android:layout_weight="1"      android:layout_marginLeft="1dp"      android:layout_marginRight="1dp"      android:text="Col5" />    </TableRow>   </TableLayout>  </ScrollView>

This is how it is displayed:

Note that this will only work if you know that the header columns is wider than the rest of the data. If any of the rows in the "main" table is wider than the header row the columns will no longer be aligned. However, there is a way to solve this as well. If you can identify the widest row in the "main" table, then just do the same procedure as above, but this time add this as a dummy row to the header table.