In earlier chapter we have used the LinearLayout which allows you to stack widgets vertical or horizontal. LinearLayout can be nestled to archive nice effects. This chapter will demonstrate the usage of "TableLayout".

This layout allows you to organize a view into a table format. You specify via the view group "TableRow" rows for your table. Afterwards you put widgets into the individual rows.

On the "TableLayout" you can define which column should take additional space via the "android:stretchColumns" attribute. If several columns should take the available space you can specify them as a comma-separated list. Similar you can use the attribute "android:shrinkColumn", which will try to word-wrap the content of the specified widgets and the attribute "android:collapseColums" to define initially hidden columns. Via Java you can display / hide these columns via the method setColumnVisible().

Columns will be automatically created based on the maximum number of widgets in one row. Per default each widgets creates a new column in the row. You can specific via "android:layout_column" the column a widget should go and via "android:layout_span" how many columns a widget should take.

You can also put non TableRows in a table. This way you can for example add dividers between your columns.

Create the project "de.vogella.android.layout.table" with the activity "DemoTableLayout". Change "main.xml" to the following.

				
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:orientation="vertical" android:layout_width="fill_parent"
	android:layout_height="fill_parent">
	<TableLayout android:layout_width="match_parent"
		android:id="@+id/tableLayout1" android:layout_height="wrap_content"
		android:stretchColumns="1">
		<TableRow android:layout_width="match_parent"
			android:layout_height="wrap_content" android:id="@+id/tableRow1">
			<EditText android:text="Field1" android:id="@+id/editText1"
				android:layout_width="wrap_content" android:layout_height="wrap_content"></EditText>
			<EditText android:text="Field2" android:id="@+id/editText2"
				android:layout_width="wrap_content" android:layout_height="wrap_content"
				android:layout_column="2"></EditText>
		</TableRow>
		<View android:layout_width="wrap_content" android:id="@+id/view1"
			android:layout_height="4px" android:background="#FF0000"></View>
		<TableRow android:id="@+id/tableRow2" android:layout_width="wrap_content"
			android:layout_height="wrap_content">
			<EditText android:layout_height="wrap_content" android:text="Field3"
				android:layout_width="wrap_content" android:id="@+id/editText3"></EditText>
			<EditText android:layout_height="wrap_content"
				android:layout_width="wrap_content" android:text="Field4"
				android:id="@+id/editText4"></EditText>
		</TableRow>

	</TableLayout>
	<Button android:text="Hide second column" android:id="@+id/collapse"
		android:onClick="toogleHiddenRows" android:layout_width="wrap_content"
		android:layout_height="wrap_content"></Button>
</LinearLayout>

			

Change the activity "DemoTableLayout" to the following to use the button to hide the second column in the table.

				
package de.vogella.android.layout.table;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TableLayout;

public class DemoTableLayout extends Activity {
	private TableLayout layout;
	private Button button;

	/** Called when the activity is first created. */
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
		layout = (TableLayout) findViewById(R.id.tableLayout1);
		button = (Button) findViewById(R.id.collapse);

	}

	public void toogleHiddenRows(View view) {
		// Second row has index 1
		layout.setColumnCollapsed(1, !layout.isColumnCollapsed(1));
		if (layout.isColumnCollapsed(1)) {
			button.setText("Show second column");
		} else {
			button.setText("Hide second column");
		}
	}
}