A Table layout in Android arranges the children’s layout inside it in rows and columns. Its like Nesting the Linear Layout in Android but without taxing the resources.
Need some career advice or prepping for an Android developer interview? Hit me up on Topmate.io, and let's chat!
What is a Table Layout ?
The Table layout’s tag <TableLayout> consists of the Table Row tag <TableRow> objects that defines the row of the table layout. Inside the table row <TableRow> tag you can have other <View> children ex: TextView, Buttons, ImageView, etc.
The Table layout class extends the Linear Layout class and it’s recommended to use Table Layout in your XML file, instead of nesting Linear layouts (i.e, one layout inside another) wherever appropriate.
Each row inside the table layout, the <TableRow> can have zero i.e, null or more views to hold.
The number of column in the table layout determined by the row with most views.
To create a Table layout in Android Studio using XML we use the <TableLayout> Tag. Inside it we use the <TableRow> tag to create rows. The Table Row tag <TableRow> can contain view elements what has to be aligned horizontally.
Table Layout Attributes
Table Layout contains the following attributes:
android:id
Just like any other Android widget, the id attribute is used to uniquely identify the layout.
android:shrinkColumns
Use this attribute to tell Android what columns can shrink. The columns start from index 0. So if you want the 1st and the 4th column to collapse, we use android:collapseColumns:”0,4″. Shrink the column will shrink the column to its minimum space required.
android:stretchColumns
Use this attribute to tell Android what columns can stretch. The columns start from index 0. SO if you want the 1st and the 5th column to stretch, we use android:collapseColumns:”0,5″.
android:collapseColumns
Use this attribute to tell Android what columns can collapse. The columns start from index 0. So if you want the 1st and the 5th column to collapse, we use android:collapseColumns:”0,5″. Collapse Column will hide the column.
Android Table Layout Demo App
Create a new Android Studio project with an empty activity.
Table Layout using XML Layout
In the XML file, create a <TableLayout> Tag. To the Table layout tag, add the following attributes:
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:stretchColumns="0"
android:shrinkColumns="2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
</TableLayout>Now add a <TableRow> tag and to this add layout_width and layout_height attribute.
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content">
</TableRow>Inside the Table Row tag, add as may views you want. We have added two widgets.
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_margin="5dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="This column is"
android:textSize="22sp"/>
<TextView
android:layout_margin="5dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="And I am"
android:textSize="22sp"/>
</TableRow>Once you’ve closed the </TableRow> tag, you can add another row to the table layout by opening a new <TableRow> Tag and adding new views to it.
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:layout_margin="5dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="STRETCHeDDDDDDDDDD"/>
<Button
android:layout_margin="5dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Normalll"/>
<Button
android:layout_margin="5dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Shrinked"/>
</TableRow>
You can find the complete source code here:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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">
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:stretchColumns="0"
android:shrinkColumns="2">
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_margin="5dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="This column is"
android:textSize="22sp"/>
<TextView
android:layout_margin="5dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="And I am"
android:textSize="22sp"/>
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:layout_margin="5dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="STRETCHeDDDDDDDDDD"/>
<Button
android:layout_margin="5dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Normalll"/>
<Button
android:layout_margin="5dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Shrinked"/>
</TableRow>
</TableLayout>
</LinearLayout>Table Layout using Kotlin / Java Code
//set 2nd column collapse-able
tableLayout.setColumnCollapsed(1,true)
//check if 2nd column is collapse-able
tableLayout.isColumnCollapsed(1)
//set 1st column shrinkable
tableLayout.setColumnShrinkable(0,true)
//check if 1st column is shrinkable
tableLayout.isColumnShrinkable(0)
//set 3rd column Stretchable
tableLayout.setColumnStretchable(2,true)
//check if 3rd column is Stretchable
tableLayout.isColumnStretchable(2)
