Programming and Personal Development

Android Table layout

Table layout is a useful layout to display data as a set of rows and columns.  As mentioned in the android layouts Example demo for table layoutoverview, it contains a set of table rows each having its own set of elements to be rendered.   You cannot explicitly control the number of columns in the table, android decides it for you based on the row with the largest number of columns.  Some of the useful properties in the table layout are mentioned below.

Property Example Values Description
stretchColumns ‘*’ or (0,1,2…) Indicates which columns can be stretched to take up the available extra space.Zero indicates the first column, 1 indicates the second and so on. ‘*’ indicates all columns
shrinkColumns *’ or (0,1,2…) Indicates which columns can be shrunk so that the table fits within its parent. Zero indicates the first column, 1 indicates the second and so on. ‘*’ indicates all columns
collapseColumns *’ or (0,1,2…) Indicates the columns that can be collapsed. Zero indicates the first column, 1 indicates the second and so on. ‘*’ indicates all columns
layout_span 3 The number of columns that the element within column should span across. In our example below, we ask the EditText widget to span across 3 columns to fill the entire row.
layout_column 3 The column number at which the element should be placed within the row. By default, element are placed starting from column 0,1,2 and so on.

Lets re-construct the same name and address form that we used for the  relative layout demo, this time using the Sample layout.xml file for TableLayout demoandroid table layout. The desired output is as shown above.

  1. Create a table layout and specify  the columns 2-4 as stretchable by  setting the android:stretchColumns to “1,2,3″.   You also specify the table layout to take up the entire space of  the parent container  by setting the layout_width and layout_height properties to “match_parent” . Note that  stretch, shrink and collapse properties are table level properties and can only be mentioned in the TableLayout element as shown.
  2. Insert the first row into the table using the TableRow element. Add a TextView and EditText element within it to display the “name”  label and a textbox for user input.
  3. Since each element occupies a column , there are four columns  in this table including the submit and cancel  buttons. By default the EditText element only occupies the second column but we can tell android to span it across the remaining 3 columns by setting the android:layout_span property to 3.  We repeat the same procedure for inserting the second row.
  4. In addition to table rows, you can drop other elements between the TableRows . The elements dropped between the table rows are stacked vertically and occupy the entire row. In this case, we have dropped the View element to act as dividers between the two rows.
  5. Finally add the third row with the Submit and Cancel buttons. Since we want the buttons to the right of the screen, we insert the submit button at the third column by setting the android:layout_column property to “2″ . The cancel button then automatically follows the previous button and sits at the fourth column.


Web Analytics