Android Table Layout

A TableLayout is a type of ViewGroup that arranges its children which can be also Views and other Layouts in a table form with rows and columns and to define a row we can use the <TableRow> tag inside this layout.

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

TableLayout: Very Important Points to Always Remember

1. There is no need to setting 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 can be set as maximum views inside it and that many number of columns are created.
3. The width of the column can be automatically adjusted based on the size of the column with maximum width.

Now let’s see some of the very commonly used attributes in TableLayout.

Defining TableLayout in layout XML

Now, let’s understand how we can define a TableLayout in the layout 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:

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

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

Next, if we want a new row to be added in the TableLayout, we can add a new TableRow tag and inside it you can define the components/views that you want. Table row works the same as a Linear 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 be collapsed i.e to hide the columns of the specified index.
2. shrinkColumns
   This property is used to shrink a column and multiple columns by providing index values for the columns.
3. stretchColumns
   This property is also used to stretch the columns.

The index value starts from 0 which is the first column will have index 0, then 1 and so on.
For all these three properties and column indices can be shown as a single value or if you want to apply this attribute for multiple columns and we can do it using comma(,) between indices. eg: 1,2,5 and we can also stretch all the columns by using the value * instead of mentioning the indices of the columns.

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

So 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 Submit Button.