In the previous article we looked at LinearLayout but ran in to a problem when we tried to get the columns of nested LinearLayouts to align. In this article we’ll explore TableLayout and look at how it can solve that particular problem.
For those familiar with HTML, TableLayout is analogous with the HTML
. While tables have something of a bad reputation in HTML terms, this is largely because they were used as an overarching tool for managing layout in HTML. For web designers, many of whom came from a design rather than development background, the concept of a
and which represented a logical object rather than a physical one were somewhat abstract, whereas the concept of a table was much easier to understand and quickly became the building block for layouts. In recent years, the trend has been to completely avoid tables at all costs, and to always use
and instead. I personally feel that tables do have a valid function within HTML, but the key is knowing when and where they are appropriate.
In Android, it is a little more obvious when a table is required as we saw in the first article. Where we want our columns to align, then we need to use a table rather than nesting LinearLayouts. If you haven’t read the previous article, I would suggest that you do so now because the concept of nesting layouts is intrinsic to TableLayout and how it works.
In essence, a TableLayout is a nested layout where Android takes care of managing the column widths for us. Each row in the table is represented by a TableRow element. This TableRow can be thought of as having the same functionality as a horizontal LinearLayout (it actually extends LinearLayout), and we can simply add children as we would with a LinearLayout:
[xml]
[/xml]
This produces the following:
Basic Table
Looking at the 3rd column, we can see that our columns are being automatically sized to fit the widest text in each column. But what about if we want the table to fit the width of the display let’s try using a layout_weight to try and force one column to fill the parent:
[xml]
.
.
.
[/xml]
This doesn’t do quiet what we expected:
Table with layout_weight
While it has done what we want on the first row, the others have ignored the layout_weight of the second TextView in the first TableRow. This is because layout_weight require two measurement passes, and the column width is calculated after the first has been completed, so doesn’t account for the layout_weight. One solution would be to include the layout_weight in each of the TextView widgets in the second column, but TableLayout gives us an easier solution: It supports an attribute named android:stretchColumns which takes a zero-based, comma-delimited array of integers. Each of these integers identifies a column that will be expanded to fit the available space. You can specify multiple columns, and the available space will be divided equally between them.
Let’s modify our table to expand the second column. Remember that, because the column numbering is zero-based, we must use “1” to identify the second column.
[xml]
.
.
.
[/xml]
This gives us:
Expanded TableLayout
As well as android:stretchColumns, TableLayout also has a couple of other useful attributes:
android:shrinkColumns is the opposite of android:stretchColumns as it defines which columns can be made smaller than their content in order to fit the table within its parent
android:collapseColumns specifies columns which can be completely hidden, and their space distributed among the other columns. To be useful, it is necessary to toggle this state programatically at runtime but you can declare some columns as collapsed by default in XML using this attribute.
The final thing that we’ll look at is the ability to make a cell span multiple columns (the equivalent of the HTML colspan). This is achieved by adding android:layout_span to the TextView (or whatever the child view is):
[xml]
.
.
.
.
.
.
[/xml]
We apply a column span to the cell at 2,3 and remove the cell at 2,4 which gives us:
TableView with column span
In the next article we’ll have a look at RelativeLayout.
The source code for this article can be found here.
i want to create space between two raw. how can i achieve this?
Very Useful! thanks…