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
- 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.
- A table row which can be set as maximum views inside it and that many number of columns are created.
- 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.
Attributes | Where it is used | Why it is used |
android:stretchColumns | TableLayout | When a column width is less then you need to expand it and you use this attribute. |
android:shrinkColumns | TableLayout | Whenever you do not want the extra space in a column, you can use this attribute to shrink and remove the space. |
android:collapseColumns | TableLayout | It basically hides the column of the given index in the TableLayout. |
android:layout_span | Any View inside the TableRow | If a view takes only one column width but if you need your view to take more than space of one column, then you can use this attribute. |
android:layout_column | Any view inside the TableRow | When you want your view present in the first TableRow to appear below the other TableRow’s view, you can use this attribute. |
Defining TableLayout in layout XML
Now, let’s understand how we can define a TableLayout in the layout XML and its output.
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:
- collapseColumns
This property defines which column to be collapsed i.e to hide the columns of the specified index. - shrinkColumns
This property is used to shrink a column and multiple columns by providing index values for the columns. - 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.