Android: displaying widgets in a grid-like layout - Part 2, The TableLayout

Continuing the layout series, I'll talk about how to display content in a grid style using TableLayout.

To make use of the TableLayout we need 2 elements: TableLayout and TableRow. One TableLayout element can have multiple TableRows. Each TableRow represents a row (I'm so obvious) and everything we put inside a TableRow creates 1 column.

For example

<TableLayout android:layout_width="match_parent" android:layout_height="wrap_content">
  <TableRow android:layout_width="wrap_content" android:layout_height="wrap_content" >
    <TextView android:background="#555555" android:text="Cras in eros nunc" android:layout_width="wrap_content" android:layout_height="wrap_content"></TextView>
    <TextView android:background="#999999" android:text="non viverra justo" android:layout_width="wrap_content" android:layout_height="wrap_content"></TextView>
  </TableRow>
</TableLayout>

this layout snipped will produce this

Each text view is one column. I again changed the background colour just to make it easier to differentiate each column.

and when I add 2 more TextViews like this


<TableLayout android:layout_width="match_parent" android:layout_height="wrap_content">
  <TableRow android:layout_width="wrap_content" android:layout_height="wrap_content" >
    <TextView android:background="#555555" android:text="Cras in eros nunc" android:layout_width="wrap_content" android:layout_height="wrap_content"></TextView>
    <TextView android:background="#999999" android:text="non viverra justo" android:layout_width="wrap_content" android:layout_height="wrap_content"></TextView> 

    <TextView android:background="#555555" android:text="1" android:layout_width="wrap_content" android:layout_height="wrap_content"></TextView>
    <TextView android:background="#999999" android:text="01/01/2011" android:layout_width="wrap_content" android:layout_height="wrap_content"></TextView>
  </TableRow>
</TableLayout>

I get this

2 more columns, which is pretty cool, except for the fact they look like a single string of text.

To make the columns use all available width, we just need to the table which columns we want to "stretch" changing the attribute android:stretchColumns. This attribute takes a list of columns indices (zero-based), separated by commas if you want to stretch more than one.

For instance, I want to give more space for the last two columns (2 and 3)

<TableLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:stretchColumns="2,3">
  <TableRow android:layout_width="wrap_content" android:layout_height="wrap_content" >
    <TextView android:background="#555555" android:text="Cras in eros nunc" android:layout_width="wrap_content" android:layout_height="wrap_content"></TextView>
    <TextView android:background="#999999" android:text="non viverra justo" android:layout_width="wrap_content" android:layout_height="wrap_content"></TextView> 

    <TextView android:background="#555555" android:text="1" android:layout_width="wrap_content" android:layout_height="wrap_content"></TextView>
    <TextView android:background="#999999" android:text="01/01/2011" android:layout_width="wrap_content" android:layout_height="wrap_content"></TextView>
  </TableRow>
</TableLayout>

This makes my table look like this

Much better but still not very good. Let's tell the table to stretch all columns. Just put a * as the value for stretchColumns. 

<TableLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:stretchColumns="*">

and bang, there you have it

We can also do the opposite, instead of giving more space for columns, we can shrink them using android:shrinkColumns. Let's say that 3rd column ( index 2), the one with the number "1" is using too much space. Changing the TableLayout definition to 

<TableLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:stretchColumns="0,1,3" android:shrinkColumns="2">

produces

To hide (collapse) a column, use android:collapseColumns again passing the indices of the columns you want to get rid of.

And if you want more lines in your table, just keep adding TableRows. You can put virtually anything inside a TableRow just remember that the column with the largest width wins!

Naturally you'll have to find what fits your app best. Remember to test with different screen densities and orientations. Be aware of TABS!!

---
Programming tricks and tips for android developers