Table layout

Organizing widgets in a table is a famous approach in HTML design where you construct a table of a number of rows and cells and distribute the controls over the cells to achieve a consistent look for your UI. Android provides a similar technique.


In android you define the number of rows by your own and android determines the number of cells in each row according to the number of widgets in each row

 
 
 
 <Button
 android_layout_width="wrap_content" 
 android_layout_height="wrap_content"
 android_text="Submit"
 /> 
 

You can define a table and add rows and views to it like this:

TableLayout tl=new TableLayout(this);
TableRow tr=new TableRow(this);
Button btn=new Button(this);
btn.setText("Hello");
tr.addView(btn); 
tl.addView(tr);
setContentView(tl);

This example represents a row with three cells.

A table cell can span multiple columns like this:

 
 
 
 <Button
 android_layout_width="wrap_content" 
 android_layout_height="wrap_content"
 android_text="Submit"
 /> 
 
 
 
 
 <Button
 android_layout_width="wrap_content" 
 android_layout_height="wrap_content"
 android_text="Cancel"
 /> 
 

Also you can choose which column to put your widget by using android:layout_column property, you define the Zero-based index of the column where you want your widget to be.

 
 
 
 <Button
 android_layout_width="wrap_content" 
 android_layout_height="wrap_content"
 android_text="Submit"
 /> 
 
 
 
 
 <Button
 android_layout_width="wrap_content" 
 android_layout_height="wrap_content"
 android_text="Cancel"
 /> 
 
 
 
 <Button
 android_layout_width="wrap_content" 
 android_layout_height="wrap_content"
 android_text="Help"
 android_layout_column="1"
 /> 
 
 

Note: if you specify an index greater than the actual cells count, the widget won’t appear. For example in the previous example if android:layout_column had a value greater than 2 the widget wouldn’t appear.

Table layout also allows you to put widgets directly under the <TableRow> tag to act as a separator between rows.


These widgets will have their width set to fill_parent.

 
 
 
 <Button
 android_layout_width="wrap_content" 
 android_layout_height="wrap_content"
 android_text="Submit"
 /> 
 
 
 
 
 <Button
 android_layout_width="wrap_content" 
 android_layout_height="wrap_content"
 android_text="Cancel"
 /> 
 
 
 
 <Button
 android_layout_width="wrap_content" 
 android_layout_height="wrap_content"
 android_text="Help"
 android_layout_column="5"
 /> 
 
 <Button
 android_layout_width="wrap_content" 
 android_layout_height="wrap_content"
 android_text="Separator"
 /> 

In table layout each column occupies space equal to the size of the largest widget in it. But you can set the width of any column to take the largest available space, just like setting the width to 100 % in HTML. This is done by setting the property android:stretchColumns to the index of the column, also you can set multiple columns by separating them with a comma.

Look at the layout below:

Now we gonna to add android:stretchColumns="0" to the table layout and see what it’s gonna look like:

Column 0 occupied the largest available space.

You can set this property from code like this

TableLayout tl=new TableLayout(this);
tl.setColumnStretchable(0, true);

the setColumnStretchable(ColumnIndex, IsStretchable)method parameters are the column index and a Boolean value to indicate it is going to be stretched.

Now if we have a column that have a large content. Android columns by default do not wrap their content. Look at this layout:

See column zero occupies large space that column 1 is not visible.

We can use android:shrinkColumns property to wrap content of a certain column or for multiple columns by assigning column numbers separeted by commas.

When we use the property with column zero it will be like this:

Its like using style=”white-space:wrap;” style in HTML
You can set the property from code like this:

TableLayout tl=new TableLayout(this);
tl.setColumnShrinkable(0, true);

The setColumnShrinkable(columnIndex, isShrinkable) method parameters are the column index and a Boolean to indicate it si going to be shrinked.

Finally if you want to make some columns invisible you can use the property android:collapseColumns the same way we used the last two properties

See that column zero is invisible.
You can use this property from code like this:

TableLayout tl=new TableLayout(this);
tl.setColumnCollapsed(0, true);

The property setColumnCollapsed(columnIndex, isCollapsed) parameters are the column index and a Boolean to indicate that it’s going to be collapsed

This is just like using the style=”display:none;” in HTML

Other functions can be called from code:
TableLayout.setShrinkAllColumns(Boolean shrinkAllColumns) : shrinks all colums
TableLayout.setStretchAllColumns(Boolean stretchAllColumns): stretches all columns

Related Posts by Categories