Android TableLayout Tutorial with Examples
View more Tutorials:
Follow us on our fanpages to receive notifications every time there are new articles.
Facebook
Twitter
TableLayout arranges the View(s) in table format. Specifically, TableLayout is a ViewGroup containing one or more TableRow(s). Each TableRow is a row in the table containing cells. Child View(s) can be placed in one cell or in a merged cell from adjacent cells of a row. Unlike tables in HTML, you cannot merge consecutive cells in the one column.
TableLayout is similar to a regular View, which you can drag and drop it into an available interface:
Or use it as an original Layout of the interface:
Add TableRow(s) and View(s) to the TableLayout:
In TableLayout the columns are indexed 0, 1, 2 ... The android:stretchColumns attribute allows you to specify which columns will be stretched to fill the free horizontal space of the TableLayout.
<!-- The columns with indexes 0 and 2 will be stretched. -->
<TableLayout
...
android:stretchColumns="0, 2">
...
</TableLayout>
<!-- All columns will be stretched. -->
<TableLayout
...
android:stretchColumns="*">
...
</TableLayout>
In contrast to android:stretchColumns, the android:shrinkColumns attribute specifies columns that will be shrinked to prevent child View(s) from spilling out of TableLayout.
<!-- The columns with indexes 0 and 2 will be shrinked. -->
<TableLayout
...
android:shrinkColumns="0, 2">
...
</TableLayout>
<!-- All columns will be shrinked. -->
<TableLayout
...
android:shrinkColumns="*">
...
</TableLayout>
The android:collapseColumns attribute specifies columns that will be collapsed, meaning that the width of the column will be 0, and as a result, that column will be hidden.
<!-- The columns with indexes 0 and 2 will be collapsed-->
<TableLayout
...
android:collapseColumns="0, 2">
...
</TableLayout>
<!-- All columns will be collapsed---->
<TableLayout
...
android:collapseColumns="*">
...
</TableLayout>
The android:layout_column attribute is applied to a child View in a TableRow in order to specify its column index. The values can probably be 0, 1, 2, ...
The android:layout_span attribute is applied to the child View(s) to specify the number of consecutive cells in a TableRow that will be merged together.
The android:layout_gravity attribute is applied to child View(s) (of TableRow) to specify its relative position compared to the cell containing it. This attribute affects the behavior of the android:layout_width attribute.
Case 1: If the android:layout_gravity attribute is not set for the child View (of TableRow), the width of the child View will always fill the cell containing it, which means the android:layout_width attribute will always get the MATCH_PARENT value.
Case 2: If the android:layout_gravity attribute is set for the child View (of TableRow), the child View will always have the default width, which means the android:layout_width attribute will always get the WRAP_CONTENT value.
The android:layout_gravity attribute is used to specify the location of the View in the cell containing it.
| Constant in Java | Value | Description |
| Gravity.LEFT | left | |
| Gravity.CENTER_HORIZONTAL | center_horizontal | |
| Gravity.RIGHT | right | |
| Gravity.TOP | top | |
| Gravity.CENTER_VERTICAL | center_vertical | |
| Gravity.BOTTOM | bottom | |
| Gravity.START | start | |
| Gravity.END | end | |
| Gravity.CENTER | center | |
The android:layout_weight attribute is used for child View(s) (of TableRow), which specifies how much space the child View takes up in the parent View (TableRow) horizontally. A layout_weight value greater than 0 allows the child View to expand in order to fill in the remaining space of the parent View. The child View can specify a layout_weight value; then all the remaining space in the parent View will be assigned to child View(s) according to their layout_weight ratio.
When all the child View(s) (of TableRow) have android:layout_weight = 0, you will see an empty space in the parent View (TableRow):
The child View(s) with android:layout_weight>0 will take up the free space of the parent View (TableRow):
The free space of the parent View (TableRow) will be allocated to the child View(s) according to their layout_weight ratio.
Have a look at the login window below. Do you think TableLayout can be used to design its interface?
The answer is "Absolutely yes", and here is a design idea draft:
Next is to implement the idea:
Step 1: Add 5 TableRow(s) to the TableLayout:
Step 2: Add 4 Button(s) to the first TableRow. We will have a four-column TableLayout which makes the design process easier. The first TableRow will be removed from the interface when the design process is complete.
Step 3: Add other child View(s) to the interface:
Step 4: Set the android:layout_span attribute for some child View(s):
Step 5: Set the android:layout_column for the "Login" button:
Step 6: Stretch the columns with index 1 and 3:
- (TableLayout) android:stretchColumns = "1, 3"
Step 7: Set the android:layout_gravity attribute for the "Login" and "Forget Password" buttons:
Bước 8: Set text, textSize, padding, and gravity for the child View(s) in the interface:
Step 9: Remove the first TableRow, and the interface design is done.
layout_main.xml
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp"
android:stretchColumns="1, 3"
tools:context=".MainActivity">
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_span="4"
android:gravity="center"
android:text="Login"
android:textSize="22sp" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="10dp"
android:text="User name" />
<EditText
android:id="@+id/editText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_span="3"
android:ems="10"
android:inputType="textPersonName" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="10dp"
android:text="Password" />
<EditText
android:id="@+id/editText2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_span="3"
android:ems="10"
android:inputType="textPassword" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="@+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_gravity="right"
android:text="Login" />
<Button
android:id="@+id/button6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Cancel" />
<Button
android:id="@+id/button7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:text="Forget Password?" />
</TableRow>
</TableLayout>
