o7planning

Android TableLayout Tutorial with Examples

  1. Android TableLayout
  2. TableLayout - android:stretchColumns
  3. TableLayout - android:shrinkColumns
  4. TableLayout - android:collapseColumns
  5. View - android:layout_column
  6. View - android:layout_span
  7. View - android:layout_gravity
  8. View - android:layout_weight
  9. Example of TableLayout

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 orderto 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 usedto 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>

Android Programming Tutorials

Show More

Android Programming Tutorials

Show More

Newest Articles

Show More