By Mohamad Wael

Posted :

TableLayout in android a tutorial

A TableLayout is first of all a LinearLayout with a vertical orientation , so the properties of LinearLayout , such as weight , apply to a TableLayout . layout_weight is just how the remaining free space is divided .

<?xml version="1.0" encoding="utf-8"?>

<TableLayout

    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TableRow
        android:layout_weight="1"
        android:background="@color/colorAccent"/>

    <Button
        android:layout_weight="1"
        android:background="@color/colorPrimaryDark" />

    <TextView
        android:layout_weight="1"
        android:background="@android:color/holo_orange_light" />

</TableLayout>
TableLayout weight

A TableLayout can contain 0 or more table rows , where a row can either be a View or a TableRow .

A View such as an ImageView , or a Button will have a width of MATCH_PARENT , and a default height of WRAP_CONTENT . The VIEW height can be changed .

A TableRow is a class which extends LinearLayout , and which has a horizontal orientation . A TableRow width , is always set to match its parent , as in MATCH_PARENT , and its height , is always set to wrap its content , as in WRAP_CONTENT .

A TableRow being a LinearLayout , the concept of weight , equally applies . layout_weight being how the remaining free space is divided .

<?xml version="1.0" encoding="utf-8"?>

<TableLayout

    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TableRow android:layout_weight="1"
              android:background="@color/colorAccent">

        <Button
            android:layout_gravity="center_vertical"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:background="@android:color/black"
            android:text="Button 1"
            android:textColor="@android:color/white" />

        <Button
            android:layout_gravity="bottom"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:background="@android:color/black"
            android:text="Button 2"
            android:textColor="@android:color/white" />

        <Button
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:background="@android:color/black"
            android:text="Button 3"
            android:textColor="@android:color/white" />
    </TableRow>

    <TableRow android:layout_weight="1"
              android:background="@color/colorPrimaryDark" />

    <Button
        android:layout_weight="1"
        android:text="A Button"
        android:textColor="@android:color/white"
        android:background="@android:color/holo_orange_light" />

</TableLayout>
Table Row weight , gravity

An added feature of the Tablelayout is the concept of cells and columns .

A cell is just a row's child .

A column is formed of cells in the vertical direction . The number of columns , is the max number of cells for all rows . The width of a column , is the largest width of its given cells , and the width of the cells in a column , will match the width of the column , unless weighting is being used .

<!-- Example three -->

<?xml version="1.0" encoding="utf-8"?>

<TableLayout

    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TableRow android:background="@color/colorPrimary">
        <Button
            android:layout_width="250dp" />
        <Button
            android:layout_width="100dp" />
    </TableRow>

    <TableRow android:background="@color/colorAccent">
        <Button
            android:layout_width="0dp" />
        <Button />
    </TableRow>

    <TableRow  android:background="@color/colorPrimary">
        <Button
            android:layout_width="1dp"
            android:layout_weight="1" />
        <Button
            android:layout_width="1dp"
            android:layout_weight="1" />
    </TableRow>

    <TableRow android:background="@color/colorAccent">
        <Button
            android:layout_width="0dp"
            android:layout_weight="1" />
        <Button
            android:layout_width="0dp"
            android:layout_weight="1" />
    </TableRow>

    <TextView android:background="@android:color/holo_orange_light" />

</TableLayout>
Table Row weight , gravity

In a TableLayout , the android:collapseColumns attribute can be used to control if one or more columns are to be collapsible , hence hidden . This is done by specifying the index of columns to be collapsed , separated by commas , as in android:collapseColumns="0" or android:collapseColumns="0,3" .

So given the previous example , if the column at index 0 is set to be collapsible , as in :

<?xml version="1.0" encoding="utf-8"?>

<TableLayout

    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"

    android:collapseColumns="0">

    <TableRow android:background="@color/colorPrimary">
        <Button
            android:layout_width="250dp" />
        <Button
            android:layout_width="100dp" />
    </TableRow>

    <TableRow android:background="@color/colorAccent">
        <Button
            android:layout_width="0dp" />
        <Button />
    </TableRow>

    <TableRow  android:background="@color/colorPrimary">
        <Button
            android:layout_width="1dp"
            android:layout_weight="1" />
        <Button
            android:layout_width="1dp"
            android:layout_weight="1" />
    </TableRow>

    <TableRow android:background="@color/colorAccent">
        <Button
            android:layout_width="0dp"
            android:layout_weight="1" />
        <Button
            android:layout_width="0dp"
            android:layout_weight="1" />
    </TableRow>

    <TextView android:background="@android:color/holo_orange_light" />

</TableLayout>

Then the new outcome in comparison to the older outcome , is :

A column can also be set as being stretchable , in its TableLayout , by using the TableLayout attribute android:stretchColumns . One or more indexes can be specified , as in , android:stretchColumns="0" , or android:stretchColumns="1,3" . In such a case , the specified columns will be stretched to fill the available empty space .

So if example three is to be reconsidered , the column at index 1 is set to be stretchable , as follows :

<?xml version="1.0" encoding="utf-8"?>

<TableLayout

    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"

    android:stretchColumns="1" >

    <TableRow android:background="@color/colorPrimary">
        <Button
            android:layout_width="250dp" />
        <Button
            android:layout_width="100dp" />
    </TableRow>

    <TableRow android:background="@color/colorAccent">
        <Button
            android:layout_width="0dp" />
        <Button />
    </TableRow>

    <TableRow  android:background="@color/colorPrimary">
        <Button
            android:layout_width="1dp"
            android:layout_weight="1" />
        <Button
            android:layout_width="1dp"
            android:layout_weight="1" />
    </TableRow>

    <TableRow android:background="@color/colorAccent">
        <Button
            android:layout_width="0dp"
            android:layout_weight="1" />
        <Button
            android:layout_width="0dp"
            android:layout_weight="1" />
    </TableRow>

    <TextView android:background="@android:color/holo_orange_light" />

</TableLayout>

Comparing example three result , with the current result , yields :

A column can also be set to be shrinkable , in its TableLayout , by using the TableLayout attribute , android:shrinkColumns , where 1 or more columns , separated by a comma , can be specified , as in android:shrinkColumns="1,4" . In this case , the specified columns , will shrink , to accomodate the TableLayout width .

So if example three is to be retaken , and if a width of 300dp is specified , with the android:shrinkColumns="1" attribute being set , as follows :

<?xml version="1.0" encoding="utf-8"?>

<TableLayout

    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="300dp"
    android:layout_height="match_parent"
    tools:context=".MainActivity"

    android:shrinkColumns="1">

    <TableRow android:background="@color/colorPrimary">
        <Button
            android:layout_width="250dp" />
        <Button
            android:layout_width="100dp" />
    </TableRow>

    <TableRow android:background="@color/colorAccent">
        <Button
            android:layout_width="0dp" />
        <Button />
    </TableRow>

    <TableRow  android:background="@color/colorPrimary">
        <Button
            android:layout_width="1dp"
            android:layout_weight="1" />
        <Button
            android:layout_width="1dp"
            android:layout_weight="1" />
    </TableRow>

    <TableRow android:background="@color/colorAccent">
        <Button
            android:layout_width="0dp"
            android:layout_weight="1" />
        <Button
            android:layout_width="0dp"
            android:layout_weight="1" />
    </TableRow>

    <TextView android:background="@android:color/holo_orange_light" />

</TableLayout>

Then in comparison to not setting the shrinkColumns attribute , the result will be :

Since the number of columns in a row , is specified as being the max number of cells for all rows , what if what is needed , is to have some rows which have fewer cells , or in other words cells which span multiple columns ?

The answer to this question , is to use the android:layout_span attribute , as in android:layout_span="2" , to specify the number of columns a cell will span , which means the number of columns a cell will take .

A cell always follows the natural flow of positioning , and it can be positioned in a specific column , using the layout_column attribute , as in android:layout_column="1" . So in this example , it will be positioned in column 1 .

An example about the earlier 2 attributes is :

<?xml version="1.0" encoding="utf-8"?>

<TableLayout

    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TableRow android:background="@color/colorPrimary">
        <Button
            android:layout_width="250dp" />
        <Button
            android:layout_width="100dp" />
        <Button
            android:layout_width="50dp" />
    </TableRow>

    <TableRow android:background="@color/colorAccent">
        <Button
            android:layout_width="0dp" />
        <Button />
    </TableRow>

    <TableRow  android:background="@color/colorPrimary">
        <Button
            android:layout_width="1dp"
            android:layout_weight="1" />
        <Button
            android:layout_width="1dp"
            android:layout_weight="1" />
    </TableRow>

    <TableRow android:background="@color/colorAccent">
        <Button
            android:layout_width="0dp"
            android:layout_weight="1" />
        <Button
            android:layout_width="0dp"
            android:layout_weight="1" />
    </TableRow>

    <TableRow android:background="@color/colorPrimary">
        <Button
            android:layout_column="1" />
    </TableRow>

    <TableRow android:background="@color/colorAccent">
        <Button
            android:layout_column="1"
            android:layout_span="2"
            />
    </TableRow>

    <TextView android:background="@android:color/holo_orange_light" />

</TableLayout>

The outcome of the previous xml code is as follows :

TableLayout weight