site brand Home موسوعة كتب شعر android apple c cpp cheat sheet firefox freebsd google chrome java javaee linux microsoft nginx orientdb pascal python rfc tutorials unix wiki
⤺⤼

By Mohamad Wael

Posted :

TableLayout in android a tutorial

A TableLayout is first of all a LinearLayout with a vertical orientation , so the properties of LinearLayout , such as weight , apply to a TableLayout . layout_weight is just how the remaining free space is divided . 

  1. <?xml version="1.0" encoding="utf-8"?>
  2.  
  3. <TableLayout
  4.  
  5.     xmlns:android="http://schemas.android.com/apk/res/android"
  6.     xmlns:tools="http://schemas.android.com/tools"
  7.     android:layout_width="match_parent"
  8.     android:layout_height="match_parent"
  9.     tools:context=".MainActivity">
  10.  
  11.     <TableRow
  12.         android:layout_weight="1"
  13.         android:background="@color/colorAccent"/>
  14.  
  15.     <Button
  16.         android:layout_weight="1"
  17.         android:background="@color/colorPrimaryDark" />
  18.  
  19.     <TextView
  20.         android:layout_weight="1"
  21.         android:background="@android:color/holo_orange_light" />
  22.  
  23. </TableLayout>
TableLayout weight

A TableLayout can contain 0 or more table rows , where a row can either be a View or a TableRow .

A View such as an ImageView , or a Button will have a width of MATCH_PARENT , and a default height of WRAP_CONTENT . The VIEW height can be changed .

A TableRow is a class which extends LinearLayout , and which has a horizontal orientation . A TableRow width , is always set to match its parent , as in MATCH_PARENT , and its height , is always set to wrap its content , as in WRAP_CONTENT .

A TableRow being a LinearLayout , the concept of weight , equally applies . layout_weight being how the remaining free space is divided . 

  1. <?xml version="1.0" encoding="utf-8"?>
  2.  
  3. <TableLayout
  4.  
  5.     xmlns:android="http://schemas.android.com/apk/res/android"
  6.     xmlns:tools="http://schemas.android.com/tools"
  7.     android:layout_width="match_parent"
  8.     android:layout_height="match_parent"
  9.     tools:context=".MainActivity">
  10.  
  11.     <TableRow android:layout_weight="1"
  12.               android:background="@color/colorAccent">
  13.  
  14.         <Button
  15.             android:layout_gravity="center_vertical"
  16.             android:layout_width="0dp"
  17.             android:layout_weight="1"
  18.             android:layout_height="wrap_content"
  19.             android:background="@android:color/black"
  20.             android:text="Button 1"
  21.             android:textColor="@android:color/white" />
  22.  
  23.         <Button
  24.             android:layout_gravity="bottom"
  25.             android:layout_width="0dp"
  26.             android:layout_weight="1"
  27.             android:layout_height="wrap_content"
  28.             android:background="@android:color/black"
  29.             android:text="Button 2"
  30.             android:textColor="@android:color/white" />
  31.  
  32.         <Button
  33.             android:layout_width="0dp"
  34.             android:layout_weight="1"
  35.             android:layout_height="wrap_content"
  36.             android:background="@android:color/black"
  37.             android:text="Button 3"
  38.             android:textColor="@android:color/white" />
  39.     </TableRow>
  40.  
  41.     <TableRow android:layout_weight="1"
  42.               android:background="@color/colorPrimaryDark" />
  43.  
  44.     <Button
  45.         android:layout_weight="1"
  46.         android:text="A Button"
  47.         android:textColor="@android:color/white"
  48.         android:background="@android:color/holo_orange_light" />
  49.  
  50. </TableLayout>
Table Row weight , gravity

An added feature of the Tablelayout is the concept of cells and columns .

A cell is just a row's child .

A column is formed of cells in the vertical direction . The number of columns , is the max number of cells for all rows . The width of a column , is the largest width of its given cells , and the width of the cells in a column , will match the width of the column , unless weighting is being used . 

  1. <!-- Example three -->
  2.  
  3. <?xml version="1.0" encoding="utf-8"?>
  4.  
  5. <TableLayout
  6.  
  7.     xmlns:android="http://schemas.android.com/apk/res/android"
  8.     xmlns:tools="http://schemas.android.com/tools"
  9.     android:layout_width="match_parent"
  10.     android:layout_height="match_parent"
  11.     tools:context=".MainActivity">
  12.  
  13.     <TableRow android:background="@color/colorPrimary">
  14.         <Button
  15.             android:layout_width="250dp" />
  16.         <Button
  17.             android:layout_width="100dp" />
  18.     </TableRow>
  19.  
  20.     <TableRow android:background="@color/colorAccent">
  21.         <Button
  22.             android:layout_width="0dp" />
  23.         <Button />
  24.     </TableRow>
  25.  
  26.     <TableRow  android:background="@color/colorPrimary">
  27.         <Button
  28.             android:layout_width="1dp"
  29.             android:layout_weight="1" />
  30.         <Button
  31.             android:layout_width="1dp"
  32.             android:layout_weight="1" />
  33.     </TableRow>
  34.  
  35.     <TableRow android:background="@color/colorAccent">
  36.         <Button
  37.             android:layout_width="0dp"
  38.             android:layout_weight="1" />
  39.         <Button
  40.             android:layout_width="0dp"
  41.             android:layout_weight="1" />
  42.     </TableRow>
  43.  
  44.     <TextView android:background="@android:color/holo_orange_light" />
  45.  
  46. </TableLayout>
Table Row weight , gravity

In a TableLayout , the android:collapseColumns attribute can be used to control if one or more columns are to be collapsible , hence hidden . This is done by specifying the index of columns to be collapsed , separated by commas , as in android:collapseColumns="0" or android:collapseColumns="0,3" .

So given the previous example , if the column at index 0 is set to be collapsible , as in : 

  1. <?xml version="1.0" encoding="utf-8"?>
  2.  
  3. <TableLayout
  4.  
  5.     xmlns:android="http://schemas.android.com/apk/res/android"
  6.     xmlns:tools="http://schemas.android.com/tools"
  7.     android:layout_width="match_parent"
  8.     android:layout_height="match_parent"
  9.     tools:context=".MainActivity"
  10.  
  11.     android:collapseColumns="0">
  12.  
  13.     <TableRow android:background="@color/colorPrimary">
  14.         <Button
  15.             android:layout_width="250dp" />
  16.         <Button
  17.             android:layout_width="100dp" />
  18.     </TableRow>
  19.  
  20.     <TableRow android:background="@color/colorAccent">
  21.         <Button
  22.             android:layout_width="0dp" />
  23.         <Button />
  24.     </TableRow>
  25.  
  26.     <TableRow  android:background="@color/colorPrimary">
  27.         <Button
  28.             android:layout_width="1dp"
  29.             android:layout_weight="1" />
  30.         <Button
  31.             android:layout_width="1dp"
  32.             android:layout_weight="1" />
  33.     </TableRow>
  34.  
  35.     <TableRow android:background="@color/colorAccent">
  36.         <Button
  37.             android:layout_width="0dp"
  38.             android:layout_weight="1" />
  39.         <Button
  40.             android:layout_width="0dp"
  41.             android:layout_weight="1" />
  42.     </TableRow>
  43.  
  44.     <TextView android:background="@android:color/holo_orange_light" />
  45.  
  46. </TableLayout>

Then the new outcome in comparison to the older outcome , is :

A column can also be set as being stretchable , in its TableLayout , by using the TableLayout attribute android:stretchColumns . One or more indexes can be specified , as in , android:stretchColumns="0" , or android:stretchColumns="1,3" . In such a case , the specified columns will be stretched to fill the available empty space .

So if example three is to be reconsidered , the column at index 1 is set to be stretchable , as follows : 

  1. <?xml version="1.0" encoding="utf-8"?>
  2.  
  3. <TableLayout
  4.  
  5.     xmlns:android="http://schemas.android.com/apk/res/android"
  6.     xmlns:tools="http://schemas.android.com/tools"
  7.     android:layout_width="match_parent"
  8.     android:layout_height="match_parent"
  9.     tools:context=".MainActivity"
  10.  
  11.     android:stretchColumns="1" >
  12.  
  13.     <TableRow android:background="@color/colorPrimary">
  14.         <Button
  15.             android:layout_width="250dp" />
  16.         <Button
  17.             android:layout_width="100dp" />
  18.     </TableRow>
  19.  
  20.     <TableRow android:background="@color/colorAccent">
  21.         <Button
  22.             android:layout_width="0dp" />
  23.         <Button />
  24.     </TableRow>
  25.  
  26.     <TableRow  android:background="@color/colorPrimary">
  27.         <Button
  28.             android:layout_width="1dp"
  29.             android:layout_weight="1" />
  30.         <Button
  31.             android:layout_width="1dp"
  32.             android:layout_weight="1" />
  33.     </TableRow>
  34.  
  35.     <TableRow android:background="@color/colorAccent">
  36.         <Button
  37.             android:layout_width="0dp"
  38.             android:layout_weight="1" />
  39.         <Button
  40.             android:layout_width="0dp"
  41.             android:layout_weight="1" />
  42.     </TableRow>
  43.  
  44.     <TextView android:background="@android:color/holo_orange_light" />
  45.  
  46. </TableLayout>

Comparing example three result , with the current result , yields :

A column can also be set to be shrinkable , in its TableLayout , by using the TableLayout attribute , android:shrinkColumns , where 1 or more columns , separated by a comma , can be specified , as in android:shrinkColumns="1,4" . In this case , the specified columns , will shrink , to accomodate the TableLayout width .

So if example three is to be retaken , and if a width of 300dp is specified , with the android:shrinkColumns="1" attribute being set , as follows : 

  1. <?xml version="1.0" encoding="utf-8"?>
  2.  
  3. <TableLayout
  4.  
  5.     xmlns:android="http://schemas.android.com/apk/res/android"
  6.     xmlns:tools="http://schemas.android.com/tools"
  7.     android:layout_width="300dp"
  8.     android:layout_height="match_parent"
  9.     tools:context=".MainActivity"
  10.  
  11.     android:shrinkColumns="1">
  12.  
  13.     <TableRow android:background="@color/colorPrimary">
  14.         <Button
  15.             android:layout_width="250dp" />
  16.         <Button
  17.             android:layout_width="100dp" />
  18.     </TableRow>
  19.  
  20.     <TableRow android:background="@color/colorAccent">
  21.         <Button
  22.             android:layout_width="0dp" />
  23.         <Button />
  24.     </TableRow>
  25.  
  26.     <TableRow  android:background="@color/colorPrimary">
  27.         <Button
  28.             android:layout_width="1dp"
  29.             android:layout_weight="1" />
  30.         <Button
  31.             android:layout_width="1dp"
  32.             android:layout_weight="1" />
  33.     </TableRow>
  34.  
  35.     <TableRow android:background="@color/colorAccent">
  36.         <Button
  37.             android:layout_width="0dp"
  38.             android:layout_weight="1" />
  39.         <Button
  40.             android:layout_width="0dp"
  41.             android:layout_weight="1" />
  42.     </TableRow>
  43.  
  44.     <TextView android:background="@android:color/holo_orange_light" />
  45.  
  46. </TableLayout>

Then in comparison to not setting the shrinkColumns attribute , the result will be :

Since the number of columns in a row , is specified as being the max number of cells for all rows , what if what is needed , is to have some rows which have fewer cells , or in other words cells which span multiple columns ?

The answer to this question , is to use the android:layout_span attribute , as in android:layout_span="2" , to specify the number of columns a cell will span , which means the number of columns a cell will take .

A cell always follows the natural flow of positioning , and it can be positioned in a specific column , using the layout_column attribute , as in android:layout_column="1" . So in this example , it will be positioned in column 1 .

An example about the earlier 2 attributes is : 

  1. <?xml version="1.0" encoding="utf-8"?>
  2.  
  3. <TableLayout
  4.  
  5.     xmlns:android="http://schemas.android.com/apk/res/android"
  6.     xmlns:tools="http://schemas.android.com/tools"
  7.     android:layout_width="match_parent"
  8.     android:layout_height="match_parent"
  9.     tools:context=".MainActivity">
  10.  
  11.     <TableRow android:background="@color/colorPrimary">
  12.         <Button
  13.             android:layout_width="250dp" />
  14.         <Button
  15.             android:layout_width="100dp" />
  16.         <Button
  17.             android:layout_width="50dp" />
  18.     </TableRow>
  19.  
  20.     <TableRow android:background="@color/colorAccent">
  21.         <Button
  22.             android:layout_width="0dp" />
  23.         <Button />
  24.     </TableRow>
  25.  
  26.     <TableRow  android:background="@color/colorPrimary">
  27.         <Button
  28.             android:layout_width="1dp"
  29.             android:layout_weight="1" />
  30.         <Button
  31.             android:layout_width="1dp"
  32.             android:layout_weight="1" />
  33.     </TableRow>
  34.  
  35.     <TableRow android:background="@color/colorAccent">
  36.         <Button
  37.             android:layout_width="0dp"
  38.             android:layout_weight="1" />
  39.         <Button
  40.             android:layout_width="0dp"
  41.             android:layout_weight="1" />
  42.     </TableRow>
  43.  
  44.     <TableRow android:background="@color/colorPrimary">
  45.         <Button
  46.             android:layout_column="1" />
  47.     </TableRow>
  48.  
  49.     <TableRow android:background="@color/colorAccent">
  50.         <Button
  51.             android:layout_column="1"
  52.             android:layout_span="2"
  53.             />
  54.     </TableRow>
  55.  
  56.     <TextView android:background="@android:color/holo_orange_light" />
  57.  
  58. </TableLayout>

The outcome of the previous xml code is as follows :

TableLayout weight