Layouts / TableLayout

Layout Types Part 2: TableLayout

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:

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<TableLayout android:layout_height="wrap_content"
android:layout_width="match_parent">
<TableRow android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView android:text="1,1"
android:layout_height="wrap_content"
android:layout_width="wrap_content" />
<TextView android:text="1,2"
android:layout_height="wrap_content"
android:layout_width="wrap_content" />
<TextView android:text="1,3"
android:layout_height="wrap_content"
android:layout_width="wrap_content" />
<TextView android:text="1,4"
android:layout_height="wrap_content"
android:layout_width="wrap_content" />
</TableRow>
<TableRow android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView android:text="2,1"
android:layout_height="wrap_content"
android:layout_width="wrap_content" />
<TextView android:text="2,2"
android:layout_height="wrap_content"
android:layout_width="wrap_content" />
<TextView android:text="2,3"
android:layout_height="wrap_content"
android:layout_width="wrap_content" />
<TextView android:text="2,4"
android:layout_height="wrap_content"
android:layout_width="wrap_content" />
</TableRow>
<TableRow android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView android:text="3,1"
android:layout_height="wrap_content"
android:layout_width="wrap_content" />
<TextView android:text="3,2"
android:layout_height="wrap_content"
android:layout_width="wrap_content" />
<TextView android:text="3,3 longer"
android:layout_height="wrap_content"
android:layout_width="wrap_content" />
<TextView android:text="3,4"
android:layout_height="wrap_content"
android:layout_width="wrap_content" />
</TableRow>
<TableRow android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView android:text="4,1"
android:layout_height="wrap_content"
android:layout_width="wrap_content" />
<TextView android:text="4,2"
android:layout_height="wrap_content"
android:layout_width="wrap_content" />
<TextView android:text="4,3"
android:layout_height="wrap_content"
android:layout_width="wrap_content" />
<TextView android:text="4,4"
android:layout_height="wrap_content"
android:layout_width="wrap_content" />
</TableRow>
</TableLayout>