Android – TableLayout

Android TableLayout

Android TableLayout - This Layout provided by Android SDK is very easy to understand for those who have done web development before because they usually used Table to design any website before CSS was used. Used to place various Structural Elements of the website properly and place them through the Rows and Comums of the Table.
Based on the same concept, in this Layout, various UI Elements of an Android App's activity are positioned as Rows and Columns of the Table, and the entire way of Placement is almost similar to the Table Based Layout of Website's. That is, in this Layout, various Child UI Elements of Activity are arranged in Rows and Columns.

TableRow Object

Under TableLayout, the TableRow Object represents a Row and this Row is divided into Single or Multiple Multiple Columns as per Layout Needs and different UI Elements are placed under each Column.
TableLayout is a type of Container Object but the Border Line of its rows, columns or cells is not visible. Whereas each row can have 0 or more cells and each cell can hold a single View Object ie UI Control.
Just as a row can have many cells, similarly a row can also contain many columns. A table can have multiple rows and multiple columns. Also, any cell in any table can be left Empty, which does not have any UI Control Exist and Cells can also SPAN in more than one column in the same way as in HTML. The only thing is that the cells in the HTML table are defined by the Element, while in Android's TableLayout, each UI View Control defines the cells themselves.
The width of a column in a TableLayout is equal to the width of the widest cell of the same column of a row in that table. However we can Shrink or Strech the Width of a Specific Column in our Java File by setColumnShrinkable () and setColumnStrechable () methods and in XML Layout File by shrinkColumns and strechColumns Attributes as per our requirement.
When a column is marked as Shrinkable, then in that case the table becomes Shrink and fit according to its Parent Object. Whereas if a column is marked Strechable, then in that case the column is expanded and Consume the Extra Width Space. While the Total Width of any TableLayout is defined by the Total Width of the Parent Container Object of that TableLayout.
Another important thing to understand here is that a Column can be Strechable and Shrinkable. Even in this type of situation, that Column always extends and uses the remaining space and in no case does it consume more space than the remaining space.
Whereas we can collapse / show Hide / Show a Specific Column using TableLayout's setColumnCollapsed () method or collapseColumns Attribute. When we collapse a column, it becomes hidden from the screen of the Column Android Device and the space occupied by that column is occupied by other columns. When we restore that Column again, that column starts showing on the screen of the Android Device again. An important point to note here is that any Column can be Collapsed / Restored only when it is related to TableRow.
In any Child Element of TableLayout we cannot specify the layout_width Attribute, rather the Width can always be set from the MATCH_PARENT value. But the Height of any Child Element can be defined by layout_height Attributge, whose default value is WRAP_CONTENT and Child is a TableRow Element, then Height is always set to WRAP_CONTENT.
Each cell to be added to each Row of the TableLayout must be added to the Increasing Column Order, even if they are being added via XML Code or through Java Codes. Column numbers are Zero based and if we do not specify a number for a column, then automatically the index number of the first column is set to 0 and the index for all subsequent columns is auto-increment. Whereas if we skip an index number while manually specifying index numbers, the Android system defines it as an Empty Column in that row.
Although TableRow is the specified Direct Child for TableLayout, but because the View and ViewGroup Class are inherited in TableLayout Class , we can specify any View or ViewGroup Sub-Class Object in TableLayout as Direct Child. . Also, the LinearLayout Class has also been inherited in this class, so we can also use different Constants of the LinearLayout Class under TableLayout in the same way as we do in LinearLayout.
For example layout_weight Attribute is actually Defined Constant in LinearLayout, but we can also use this Attribute in TableLayout and give them weightage to properly position different UI Elements of TableLayout. In fact all types of layouts are derive from the Android SDK's Views and ViewGroups class, so all types of layouts share some of the most commonly used Common Attributes as follows:
AttributeDescription
layout_widthSpecifies the Width of a View or ViewGroup object.
layout_heightSpecifies the Height of a View or ViewGroup object.
layout_marginTopTop Margin of a View or ViewGroup object specifies.
layout_marginBottomThe Bottom Margin of a View or ViewGroup object specifies.
layout_marginLeftThe Left Margin of a View or ViewGroup object specifies.
layout_marginRightRight Margin specifies a View or ViewGroup object.
layout_marginStartStart Margin specifies a View or ViewGroup object.
layout_marginEndSpecifies the End Margin of a View or ViewGroup object.
layout_gravityPositioning Specifies in the layout of a View or ViewGroup object’s Gravity.
layout_weightSpecifies the weight of a View or ViewGroup object. That is, it decides how the remaining extra space will allocate.
layout_xSpecifies the X-Coordinate of a View or ViewGroup object.
layout_ySpecifies the Y-Coordinate of a View or ViewGroup object.
Apart from these, there are many Attributes which are comon form in almost all UI Controls, but layout_weight and layout_gravity are the only two Attributes that can be used to decide the positioning of UI Controls used under LinearLayout or TableLayout while to decide Positioning the UI to be Use under the Controls and Discuss the LinearLayout have us under the same way had Use, TableLayout must Use them Exactly the same way.

Create new android application

tablelayout
Let us also see a simple Login Activity Example to understand this Layout properly-
// File Name: strings.xml
<resources>
 <string name="tv_login">Login </string>
 <string name="tv_username">Username: </string>
 <string name="tv_password">Password: </string>
 <string name="btn_login">Login </string>
 </resources>
// File Name: dimens.xml
<resources>
 <!-- Default screen margins, per the Android Design guidelines. -->
 <dimen name="activity_horizontal_margin">16dp</dimen>
 <dimen name="activity_vertical_margin">16dp</dimen>
 <dimen name="activity_heading1">26sp</dimen>
 </resources>
//File Name: table_layout.xml
<?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:background="#B0F3FAF8"
    android:padding="@dimen/activity_horizontal_margin"
    android:stretchColumns="*">

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="200dp">

        <TextView
            android:id="@+id/tvLogin"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/tv_login"
            android:layout_span="5"
            android:textAlignment="center"
            android:textColor="@color/black"
            android:textSize="@dimen/activity_heading1"/>
    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <TextView
            android:id="@+id/tvUsername"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@color/black"
            android:text="@string/tv_username" />

        <EditText
            android:id="@+id/etUsername"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:ems="5"
            android:inputType="textPersonName"
            android:layout_weight="1" />
    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <TextView
            android:id="@+id/tvPassword"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@color/black"
            android:text="@string/tv_password" />

        <EditText
            android:id="@+id/etPassword"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:ems="10"
            android:inputType="textPassword" />
    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <Space
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <Button
            android:id="@+id/btnLogin"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/btn_login"
            android:layout_marginTop="@dimen/activity_horizontal_margin"
            android:layout_weight="1"/>
    </TableRow>
</TableLayout>
//File Name: MainActivity.java
package com.androiddevlearn.demo;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}
tablelayout