Android User Interface Design: Table Layouts

Table layouts can be used for displaying tabular data or neatly aligning screen contents in a way similar to an HTML table on a web page. Learn how to create them with layout XML files and through code.

Understanding layouts is important for good Android application design. In this tutorial, you learn all about table layouts, which organize user interface controls, or widgets, on the screen in neatly defined rows and columns. When used correctly, table layouts can be the powerful layout paradigm upon which Android applications can design their screens or display tabular data.

What Is A Table Layout?

A table layout is exactly what you might expect: a grid of made up of rows and columns, where a cell can display a view control. From a user interface design perspective, a TableLayout is comprised of TableRow controls—one for each row in your table. The contents of a TableRow are simply the view controls that will go in each “cell” of the table grid.
The appearance of a TableLayout is governed by several additional rules. First, the number of columns of the entire table matches the number of columns in the row with the most columns. Second, the width of each column is defined as the width of the widest content in the column. The TableLayout’s child rows and cells layout_width attributes are always MATCH_PARENT — although they can be put in an XML file, the actual value can’t be overridden. The TableLayout’s layout_height of a cell can be defined, but a TableRow attribute for layout_height is always WRAP_CONTENT. Cells can span columns, but not rows. This is done through the layout_span attribute of the child view of a TableRow. A cell is a single child view within a TableRow. If you want a more complex cell with multiple views, use a layout view to encapsulate the other views.
That said, some rules can be modified. Columns can be marked as stretchable, which means that the width can expand to the size of the parent container. Columns can also be marked as shrinkable, which means that they can be reduced in width so the whole row will fit in the space provided by the parent container. You can also collapse an entire column.
For the complete documention for table layouts, see the Android SDK documentation for the TableLayout class. The associated XML attributes for use in XML resources are also defined in the documentation.

Designing a Simple Table Layout

Layouts are best explained by example, and table layouts are no different. Let’s say we want to design a screen that shows the extended weather forecast. A table layout might be a good choice for organizing this information:

• In the first TableRow, we can display a title for the screen.
• In the second TableRow, we can display the dates in a familiar calendar-like format.
• In the third TableRow, we can display a Daily High temperature information.
• In the fourth TableRow, we can display a Daily Low temperature information.
• In the fifth TableRow, we can display graphics to identify the weather conditions, such as rain, snow, sun, or cloudy with a chance of meatballs.

This first figure shows an early look at the table inside the layout editor:

Defining an XML Layout Resource with a Table Layout

The most convenient and maintainable way to design application user interfaces is by creating XML layout resources. This method greatly simplifies the UI design process, moving much of the static creation and layout of user interface controls and definition of control attributes, to the XML, instead of littering the code.
XML layout resources must be stored in the /res/layout project directory hierarchy. Let’s take a look at the table layout introduced in the previous section. This layout resource file, aptly named /res/layout/table.xml, is defined in XML as follows:

view plaincopy to clipboardprint?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <TableLayout  
3.     xmlns:android="http://schemas.android.com/apk/res/android"  
4.     android:id="@+id/tableLayout1"  
5.     android:layout_width="match_parent"  
6.     android:layout_height="match_parent"  
7.     android:shrinkColumns="*"  
8.     android:stretchColumns="*">  
9.     <TableRow  
10.         android:id="@+id/tableRow4"  
11.         android:layout_height="wrap_content"  
12.         android:layout_width="match_parent"  
13.         android:gravity="center_horizontal">  
14.         <TextView  
15.             android:id="@+id/textView9"  
16.             android:layout_width="match_parent"  
17.             android:layout_height="wrap_content"  
18.             android:textStyle="bold"  
19.             android:typeface="serif"  
20.             android:textSize="18dp"  
21.             android:text="Weather Table"  
22.             android:gravity="center"  
23.             android:layout_span="6"></TextView>  
24.     </TableRow>  
25.     <TableRow  
26.         android:id="@+id/tableRow1"  
27.         android:layout_height="wrap_content"  
28.         android:layout_width="match_parent">  
29.         <TextView  
30.             android:id="@+id/TextView04"  
31.             android:text=""></TextView>  
32.         <TextView  
33.             android:id="@+id/TextView04"  
34.             android:text="Feb 7"  
35.             android:textStyle="bold"  
36.             android:typeface="serif"></TextView>  
37.         <TextView  
38.             android:id="@+id/TextView03"  
39.             android:text="Feb 8"  
40.             android:textStyle="bold"  
41.             android:typeface="serif"></TextView>  
42.         <TextView  
43.             android:id="@+id/TextView02"  
44.             android:text="Feb 9"  
45.             android:textStyle="bold"  
46.             android:typeface="serif"></TextView>  
47.         <TextView  
48.             android:id="@+id/TextView01"  
49.             android:text="Feb 10"  
50.             android:textStyle="bold"  
51.             android:typeface="serif"></TextView>  
52.         <TextView  
53.             android:text="Feb 11"  
54.             android:id="@+id/textView1"  
55.             android:textStyle="bold"  
56.             android:typeface="serif"></TextView>  
57.     </TableRow>  
58.     <TableRow  
59.         android:layout_height="wrap_content"  
60.         android:id="@+id/tableRow2"  
61.         android:layout_width="match_parent">  
62.         <TextView  
63.             android:text="Day High"  
64.             android:id="@+id/textView2"  
65.             android:textStyle="bold"></TextView>  
66.         <TextView  
67.             android:id="@+id/textView3"  
68.             android:text="28°F"  
69.             android:gravity="center_horizontal"></TextView>  
70.         <TextView  
71.             android:text="26°F"  
72.             android:id="@+id/textView4"  
73.             android:gravity="center_horizontal"></TextView>  
74.         <TextView  
75.             android:text="23°F"  
76.             android:id="@+id/textView5"  
77.             android:gravity="center_horizontal"></TextView>  
78.         <TextView  
79.             android:text="17°F"  
80.             android:id="@+id/textView6"  
81.             android:gravity="center_horizontal"></TextView>  
82.         <TextView  
83.             android:text="19°F"  
84.             android:id="@+id/textView7"  
85.             android:gravity="center_horizontal"></TextView>  
86.     </TableRow>  
87.     <TableRow  
88.         android:layout_height="wrap_content"  
89.         android:id="@+id/tableRow2"  
90.         android:layout_width="match_parent">  
91.         <TextView  
92.             android:text="Day Low"  
93.             android:id="@+id/textView2"  
94.             android:textStyle="bold"></TextView>  
95.         <TextView  
96.             android:text="15°F"  
97.             android:id="@+id/textView3"  
98.             android:gravity="center_horizontal"></TextView>  
99.         <TextView  
100.             android:text="14°F"  
101.             android:id="@+id/textView4"  
102.             android:gravity="center_horizontal"></TextView>  
103.         <TextView  
104.             android:text="3°F"  
105.             android:id="@+id/textView5"  
106.             android:gravity="center_horizontal"></TextView>  
107.         <TextView  
108.             android:text="5°F"  
109.             android:id="@+id/textView6"  
110.             android:gravity="center_horizontal"></TextView>  
111.         <TextView  
112.             android:text="6°F"  
113.             android:id="@+id/textView7"  
114.             android:gravity="center_horizontal"></TextView>  
115.     </TableRow>  
116.     <TableRow  
117.         android:id="@+id/tableRow3"  
118.         android:layout_height="wrap_content"  
119.         android:layout_width="match_parent"  
120.         android:gravity="center">  
121.         <TextView  
122.             android:id="@+id/textView8"  
123.             android:text="Conditions"  
124.             android:textStyle="bold"></TextView>  
125.         <ImageView  
126.             android:id="@+id/imageView1"  
127.             android:src="@drawable/hot"></ImageView>  
128.         <ImageView  
129.             android:id="@+id/imageView2"  
130.             android:src="@drawable/pt_cloud"></ImageView>  
131.         <ImageView  
132.             android:id="@+id/imageView3"  
133.             android:src="@drawable/snow"></ImageView>  
134.         <ImageView  
135.             android:id="@+id/imageView4"  
136.             android:src="@drawable/lt_snow"></ImageView>  
137.         <ImageView  
138.             android:id="@+id/imageView5"  
139.             android:src="@drawable/pt_sun"></ImageView>  
140.     </TableRow>  
141. </TableLayout>  

Recall that, from within the Activity, only a single line of code within the onCreate() method is necessary to load and display a layout resource on the screen. If the layout resource was stored in the /res/layout/table.xml file, that line of code would be:

1. setContentView(R.layout.table);  

This table layout has all its columns set to both shrink and stretch by using a “*” in the value. If just certain columns should shrink or stretch, the values would be a comma seperated list (using 0-based indexes for columns).
The table now looks like the following to screenshots when in portrait and landscape mode.

Defining a Table Layout Programmatically

You can also programmatically create and configure table layouts in Java. This is done using the TableLayout and TableRow classes (android.widget.TableLayout and android.widget.TableRow). You’ll find the unique display parameters for each control in the TableLayout.LayoutParams and TableRow.LayoutParams classes. Also, the typical layout parameters (android.view.ViewGroup.LayoutParams), such as layout_height and layout_width, as well as margin parameters (ViewGroup.MarginLayoutParams), still apply to TableLayout and TableRow objects, but not necessarily table cells. For table cells (any View inside the TableRow), the width is always MATCH_PARENT. The height can be defined, but defaults to WRAP_CONTENT and need not be specified.
Instead of loading a layout resource directly using the setContentView() method as shown earlier, if you create a layout programmatically, you must instead build up the screen contents in Java and then supply a parent layout object which contains all the control contents to display as child views to the setContentView() method. In this case, your parent layout used would be the table layout created.
For example, the following code illustrates how to programmatically have an Activity instantiate a TableLayout layout parameters and reproduce the example shown earlier in XML:

view plaincopy to clipboardprint?

1. @Override  
2. public void onCreate(Bundle savedInstanceState) {  
3.     super.onCreate(savedInstanceState);  
4.     TableLayout table = new TableLayout(this);  
5.     table.setStretchAllColumns(true);  
6.     table.setShrinkAllColumns(true);  
7.     TableRow rowTitle = new TableRow(this);  
8.     rowTitle.setGravity(Gravity.CENTER_HORIZONTAL);  
9.     TableRow rowDayLabels = new TableRow(this);  
10.     TableRow rowHighs = new TableRow(this);  
11.     TableRow rowLows = new TableRow(this);  
12.     TableRow rowConditions = new TableRow(this);  
13.     rowConditions.setGravity(Gravity.CENTER);  
14.     TextView empty = new TextView(this);  
15.     // title column/row  
16.     TextView title = new TextView(this);  
17.     title.setText("Java Weather Table");  
18.     title.setTextSize(TypedValue.COMPLEX_UNIT_DIP, 18);  
19.     title.setGravity(Gravity.CENTER);  
20.     title.setTypeface(Typeface.SERIF, Typeface.BOLD);  
21.     TableRow.LayoutParams params = new TableRow.LayoutParams();  
22.     params.span = 6;  
23.     rowTitle.addView(title, params);  
24.     // labels column  
25.     TextView highsLabel = new TextView(this);  
26.     highsLabel.setText("Day High");  
27.     highsLabel.setTypeface(Typeface.DEFAULT_BOLD);  
28.     TextView lowsLabel = new TextView(this);  
29.     lowsLabel.setText("Day Low");  
30.     lowsLabel.setTypeface(Typeface.DEFAULT_BOLD);  
31.     TextView conditionsLabel = new TextView(this);  
32.     conditionsLabel.setText("Conditions");  
33.     conditionsLabel.setTypeface(Typeface.DEFAULT_BOLD);  
34.     rowDayLabels.addView(empty);  
35.     rowHighs.addView(highsLabel);  
36.     rowLows.addView(lowsLabel);  
37.     rowConditions.addView(conditionsLabel);  
38.     // day 1 column  
39.     TextView day1Label = new TextView(this);  
40.     day1Label.setText("Feb 7");  
41.     day1Label.setTypeface(Typeface.SERIF, Typeface.BOLD);  
42.     TextView day1High = new TextView(this);  
43.     day1High.setText("28°F");  
44.     day1High.setGravity(Gravity.CENTER_HORIZONTAL);  
45.     TextView day1Low = new TextView(this);  
46.     day1Low.setText("15°F");  
47.     day1Low.setGravity(Gravity.CENTER_HORIZONTAL);  
48.     ImageView day1Conditions = new ImageView(this);  
49.     day1Conditions.setImageResource(R.drawable.hot);  
50.     rowDayLabels.addView(day1Label);  
51.     rowHighs.addView(day1High);  
52.     rowLows.addView(day1Low);  
53.     rowConditions.addView(day1Conditions);  
54.     // day2 column  
55.     TextView day2Label = new TextView(this);  
56.     day2Label.setText("Feb 8");  
57.     day2Label.setTypeface(Typeface.SERIF, Typeface.BOLD);  
58.     TextView day2High = new TextView(this);  
59.     day2High.setText("26°F");  
60.     day2High.setGravity(Gravity.CENTER_HORIZONTAL);  
61.     TextView day2Low = new TextView(this);  
62.     day2Low.setText("14°F");  
63.     day2Low.setGravity(Gravity.CENTER_HORIZONTAL);  
64.     ImageView day2Conditions = new ImageView(this);  
65.     day2Conditions.setImageResource(R.drawable.pt_cloud);  
66.     rowDayLabels.addView(day2Label);  
67.     rowHighs.addView(day2High);  
68.     rowLows.addView(day2Low);  
69.     rowConditions.addView(day2Conditions);  
70.     // day3 column  
71.     TextView day3Label = new TextView(this);  
72.     day3Label.setText("Feb 9");  
73.     day3Label.setTypeface(Typeface.SERIF, Typeface.BOLD);  
74.     TextView day3High = new TextView(this);  
75.     day3High.setText("23°F");  
76.     day3High.setGravity(Gravity.CENTER_HORIZONTAL);  
77.     TextView day3Low = new TextView(this);  
78.     day3Low.setText("3°F");  
79.     day3Low.setGravity(Gravity.CENTER_HORIZONTAL);  
80.     ImageView day3Conditions = new ImageView(this);  
81.     day3Conditions.setImageResource(R.drawable.snow);  
82.     rowDayLabels.addView(day3Label);  
83.     rowHighs.addView(day3High);  
84.     rowLows.addView(day3Low);  
85.     rowConditions.addView(day3Conditions);  
86.     // day4 column  
87.     TextView day4Label = new TextView(this);  
88.     day4Label.setText("Feb 10");  
89.     day4Label.setTypeface(Typeface.SERIF, Typeface.BOLD);  
90.     TextView day4High = new TextView(this);  
91.     day4High.setText("17°F");  
92.     day4High.setGravity(Gravity.CENTER_HORIZONTAL);  
93.     TextView day4Low = new TextView(this);  
94.     day4Low.setText("5°F");  
95.     day4Low.setGravity(Gravity.CENTER_HORIZONTAL);  
96.     ImageView day4Conditions = new ImageView(this);  
97.     day4Conditions.setImageResource(R.drawable.lt_snow);  
98.     rowDayLabels.addView(day4Label);  
99.     rowHighs.addView(day4High);  
100.     rowLows.addView(day4Low);  
101.     rowConditions.addView(day4Conditions);  
102.     // day5 column  
103.     TextView day5Label = new TextView(this);  
104.     day5Label.setText("Feb 11");  
105.     day5Label.setTypeface(Typeface.SERIF, Typeface.BOLD);  
106.     TextView day5High = new TextView(this);  
107.     day5High.setText("19°F");  
108.     day5High.setGravity(Gravity.CENTER_HORIZONTAL);  
109.     TextView day5Low = new TextView(this);  
110.     day5Low.setText("6°F");  
111.     day5Low.setGravity(Gravity.CENTER_HORIZONTAL);  
112.     ImageView day5Conditions = new ImageView(this);  
113.     day5Conditions.setImageResource(R.drawable.pt_sun);  
114.     rowDayLabels.addView(day5Label);  
115.     rowHighs.addView(day5High);  
116.     rowLows.addView(day5Low);  
117.     rowConditions.addView(day5Conditions);  
118.     table.addView(rowTitle);  
119.     table.addView(rowDayLabels);  
120.     table.addView(rowHighs);  
121.     table.addView(rowLows);  
122.     table.addView(rowConditions);  
123.     setContentView(table);  
124. }  

Let’s take a closer look at the Java code listing above. First we create the TableLayout control and set the shrinkable and stretchable attributes to true for all columns using the setStretchAllColumns() and setShrinkAllColumns() methods. Next, we systematically create five TableRow. Each TableRow will contain view controls (TextView controls for the title, dates, highs and low data as well as ImageView controls for the weather condition graphics). You’ll see how the column span is handled with the first TableRow. Specific columns of views are created, styled, and added, in order, to the appropriate TableRow using the addView() method. Each TableRow is added to the TableLayout control, in order, using the addView() method of the TableLayout. Finally, we load the TableLayout and display it on the screen using the setContentView() method.
As you can see, the code can rapidly grow in size as more controls are added to the screen. For organization and maintainability, defining and using layouts programmatically is best left for the odd case rather than the norm. Additionally, in a case like this, the data would typically be coming from some other source than strings we type in, so a loop may be more appropriate for many applications.
The results are shown in the following figure. As you can see, they are the same as the previous results — as expected.

TableLayout Concerns

Although table layouts can be used to design entire user interfaces, they usually aren’t the best tool for doing so, as they are derived from LinearLayout and not the most efficient of layout controls. If you think about it, a TableLayout is little more than an organized set of nested LinearLayouts, and nesting layouts too deeply is generally discouraged for performance concerns. However, for data that is already in a format suitable for a table, such as spreadsheet data, table layout may be a reasonable choice.
Also, table layout data may vary based upon screen sizes and resolutions. It’s generally a good design practice to ensure you enable scrolling when displaying large quantities of data. For example, if the weather example used earlier also included a “write-up” of the conditions, this text might be one sentence or twenty sentences, so enabling vertical and/or horizontal scrolling would be prudent.

Conclusion

Android application user interfaces are defined using layouts, and table layouts are incredibly handy for displaying view data or controls in rows and columns. Using table layouts where they are appropriate can make many screen designs simpler and faster. However, keep in mind that TableLayout is derived from LinearLayout, and has many of the same performance limitations.