From the Rough Cut
From the Rough Cut
From the Rough Cut
TableLayout
The TableLayout is used for arranging the enclosed controls into rows and columns. Each new row in the TableLayout is defined through a TableRow object. A row can have zero or more controls, where each control is called a cell. The number of columns in a TableLayout is determined by the maximum number of cells in any row. The width of a column is equal to the widest cell in that column. All elements are aligned in a column; that is, the width of all the controls increases if the width of any control in the column is increased.
Operations Applicable to TableLayout
We can perform several operations on TableLayout columns, including stretching, shrinking, collapsing, and spanning columns.
Stretching Columns
The default width of a column is set equal to the width of the widest column, but we can stretch the column(s) to take up available free space using the android:stretchColumns attribute in the TableLayout. The value assigned to this attribute can be a single column number or a comma-delimited list of column numbers. The specified columns are stretched to take up any available space on the row.
Examples:
- android:stretchColumns="1"—The second column (because the column numbers are 0-based) is stretched to take up any available space in the row.
- android:stretchColumns="0,1"—Both the first and second columns are stretched to take up the available space in the row.
- android:stretchColumns="*"—All columns are stretched to take up the available space.
Shrinking Columns
We can shrink or reduce the width of the column(s) using the android:shrinkColumns attribute in the TableLayout. We can specify either a single column or a comma delimited list of column numbers for this attribute. The content in the specified columns word-wraps to reduce their width.
Examples:
- android:shrinkColumns="0"—The first column’s width shrinks or reduces by word-wrapping its content.
- android:shrinkColumns="*"—The content of all columns is word-wrapped to shrink their widths.
Collapsing Columns
We can make the column(s) collapse or become invisible through the android:collapseColumns attribute in the TableLayout. We can specify one or more comma-delimited columns for this attribute. These columns are part of the table information but are invisible. We can also make column(s) visible and invisible through coding by passing the Boolean values false and true, respectively, to the setColumnCollapsed() method in the TableLayout. For example:
- android:collapseColumns="0"—The first column appears collapsed; that is, it is part of the table but is invisible. It can be made visible through coding by using the setColumnCollapsed() method.
Spanning Columns
We can make a column span or take up the space of one or more columns by using the android:layout_span attribute. The value assigned to this attribute must be >=1. For example, the following value makes the control take or span up to two columns:
android:layout_span="2"
Let’s try arranging controls in a TableLayout with an example. Create a new Android Project called TableLayoutApp. Make its layout file activity_table_layout_app.xml appear as shown in Listing 3.13.
Listing 3.13 The Layout File activity_table_layout_app.xml on Arranging Controls in a TableLayout Container
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:stretchColumns="1">
<TableRow android:padding="5dip">
<TextView
android:layout_height="wrap_content"
android:text="New Product Form"
android:typeface="serif"
android:layout_span="2"
android:gravity="center_horizontal"
android:textSize="20dip" />
</TableRow>
<TableRow>
<TextView
android:layout_height="wrap_content"
android:text="Product Code:"
android:layout_column="0"/>
<EditText
android:id="@+id/prod_code"
android:layout_height="wrap_content"
android:layout_column="1"/>
</TableRow>
<TableRow>
<TextView
android:layout_height="wrap_content"
android:text="Product Name:"
android:layout_column="0"/>
<EditText
android:id="@+id/prod_name"
android:layout_height="wrap_content"
android:scrollHorizontally="true" />
</TableRow>
<TableRow>
<TextView
android:layout_height="wrap_content"
android:text="Product Price:" />
<EditText
android:id="@+id/prod_price"
android:layout_height="wrap_content" />
</TableRow>
<TableRow>
<Button
android:id="@+id/add_button"
android:text="Add Product"
android:layout_height="wrap_content" />
<Button
android:id="@+id/cancel_button"
android:text="Cancel"
android:layout_height="wrap_content" />
</TableRow>
</TableLayout>
We cannot specify the layout_width attribute for the controls enclosed within the TableLayout, as their width will be always set to match_parent by default. We can specify the layout_height attribute for the enclosed controls (the default value is wrap_content). The layout_height attribute of the TableRow is always wrap_content.
Cells are added to a row in increasing column order. Column numbers are zero-based. If we don’t specify a column number for any cell, it is considered to be the next available column. If we skip a column number, it is considered an empty cell in that row. We can make a cell span columns. Besides TableRow, we can use any View subclass as a direct child of TableLayout. The View is displayed as a single row that spans all the table columns.
In Listing 3.13, we specify that the second column of each row should be stretched to take up any available space in the row. The row contents are
- The first row of the table has a single control, New Product Form TextView. The TextView is set to span two columns and is set to appear at the center of the horizontal space. The font of the text displayed through TextView is set to serif, 20dip in size.
- In the second row, a TextView and an EditText control are displayed. The TextView control with text Product Code is set to appear at the column 0 location (the first column), and the EditText control is set to appear at column 1 (the second column).
- In the third row, again two controls, TextView and EditText, are displayed. The TextView control with the text Product Name is set to appear in column 0. If the user types text beyond the width of the EditText control, the content scrolls horizontally.
- In the fourth row, the TextView control with the text Product Price is displayed in the first column, and the EditText control is displayed in the second column.
- In the fifth row, a Button control with the caption Add Product is displayed in the first column, and a Button control with the caption Cancel is displayed in the second column.
When the application is run, the controls are laid out in rows and columns, as shown in Figure 3.14.
)
Figure 3.14 Different controls arranged in TableLayout