WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

Android Table Layout


Table layout used to arrange the group of views into rows and columns in android.

It do not display a border line for their columns, rows or cells.

How to use Android Table layout

We can use <TableLayout> elements if Table row child views of a table layout.

parent container is Total width of a table

Column are used in both stretchable and shrinkable.


Android Table Layout Attributes:

id: id attribute is used to unique identify a android Table Layout.

Syntax


<TableLayout
android:id="@+id/somethingcodeTableLayout"
android:layout_width="match_parent"
android:layout_height="match_parent/>

shrinkColumns: shrink Column mean reduce the width of the Column.

We can change either a single column or a comma delimited list of column numbers for this attribute.

If the value is ‘*’ then all the columns are stretched to take up the available space.

Example of shrinkColumns

Below this example code of shrink column attribute of table layout.
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:shrinkColumns="0"> 


       <!-- first row of the table layout-->
     <TableRow
            android:id="@+id/firstRow"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content">

        <!-- first element of the first row-->
           <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="#a23"
                android:padding="18dip"
                android:text="click shrink "
                android:textColor="#000"
                android:textSize="20dp" />

        </TableRow>
  </TableLayout>
shrinkColumns

collapse Columns

Collapse columns attribute is used to collapse or invisible the column of a table layout

If the values is 2 then the first column appears collapsed, i.e it is the part of table but it is invisible.

you change only the second column in screenshot.

    <?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:collapseColumns="2"> lt;!-- collapse the first column of the table row-->


         <!-- first row of the table layout-->
         <TableRow
            android:id="@+id/simpleTableLayout"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content">

             <!-- first element of the row that is the part of table but it is invisible-->
             <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="#ab20"
                android:padding="22dp"
                android:text="first 2"
                android:textColor="#fce"
                android:textSize="28dp" />

             <!-- second element of the row that is shown in the screenshot-->
             <TextView
                android:layout_width="150dp"
                android:layout_height="77dp"
                android:background="#bd3"
                android:padding="18dp"
                android:text="Columns 2"
                android:textColor="#c32"
                android:textSize="18dp" />
         </TableRow>
    </TableLayout>