Android TableLayout Tutorial

View more Tutorials:

1- Android TableLayout

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:

2- TableLayout - android:stretchColumns

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>

3- TableLayout - android:shrinkColumns

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>

4- TableLayout - android:collapseColumns

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>

5- View - android:layout_column

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, ...


6- View - android:layout_span

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.

7- View - android:layout_gravity

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.CLIP_HORIZONTAL clip_horizontal  
Gravity.FILL_HORIZONTAL fill_horizontal  
     
Gravity.TOP top  
Gravity.CENTER_VERTICAL center_vertical  
Gravity.BOTTOM bottom  
Gravity.CLIP_VERTICAL clip_vertical  
Gravity.FILL_VERTICAL fill_vertical  
     
Gravity.START start  
Gravity.END end  
Gravity.CENTER center  
Gravity.FILL fill  

8- View - android:layout_weight

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.

9- Example of TableLayout

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>

View more Tutorials: