Android Table Layout

A TableLayout is a ViewGroup that arranges its children i.e Views and other Layouts in a table form with rows and columns. To define a row, you can use <TableRow> tag inside this layout.

There is no need to mention number of columns in a TableLayout because Android automatically adds columns as per the number of views and other layouts added in a table row.

TableLayout: Important Points to Remember

1. There is no need to provide the layout_width and layout_height for TableRow because by default, its width is match_parent and height is wrap_content.
2. A table row which has maximum views inside it, that many number of columns are created.
3. The width of the column automatically adjusts based on the size of the column with maximum width.

Now let's see some of the common attributes used in TableLayout.

Defining TableLayout in layout XML

Now, let's understand how we can define a TableLayout in the layou XML and its output.

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp"
    android:background="#FFFF00"
    android:stretchColumns="*"
    android:shrinkColumns="*">

    <!-- first row -->
    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:background="@color/colorAccent">

        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="NAME"
            android:textAppearance="?android:attr/textAppearanceMedium"/>

        <EditText
            android:id="@+id/edtName"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:ems="10"
            android:hint="Enter you name"
            android:inputType="textPersonName"/>
            
    </TableRow>

    <!-- second row -->
    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:background="#0091EA">

        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Password"
            android:textAllCaps="true"
            android:textAppearance="?android:attr/textAppearanceMedium"/>
          
        <EditText
            android:id="@+id/edtPwd"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:ems="10"
            android:hint="Enter your Password"
            android:inputType="textPassword"/>
      
    </TableRow>

    <!-- third row -->
    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:padding="16dp">

        <Button
            android:id="@+id/btnSubmit"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="SUBMIT"/>

    </TableRow>

</TableLayout>

Output Screen:

As you can see in the XML file, root element is TableLayout, hence your layout will have a table of elements rendered in form of rows and columns.

Rows in the table layout are defined with the tag TableRow. You have to specify the width of the row as well as height using attributes layout_width and layout_height.

Next, if you want a new row to be added in the TableLayout, you can add new TableRow tag and inside it you can define the components/views that you want. Table row works the same as a Linear Horizontal Layout where components are placed side by side to each other.

We have set three properties for the TableLayout, namely:

1. collapseColumns

   This property defines which column to collapse i.e to hide the columns of the specified index.

2. shrinkColumns

   This property is used to shrink a column or multiple columns by providing indes values for the columns.

3. stretchColumns

   This property is used to stretch the columns.

The index value starts from 0 i.e the first column will have index 0, then 1 and so on.

For all these three properties, column indices can be shown as a single value or if you want to apply this attribute for multiple columns, you can do it using comma(,) between indices. eg: 1,2,5. You can also stretch all the columns by using the value * instead of mentioning the indices of the columns.

You can see that in the layout e have added the first row with two components - one is a Android Studio(displaying Name as label) and another is an EditText(to get the Name from User). We have set the gravity for this row as center so that the elements are placed in the center of the display screen.

Similarly, we have added the second row with the TextView(to display Password as label) and EditText(to get password from the user).

The third row just contains one Submit Button.