Skip to content

Android Layout Tutorial

TableLayout

TableLayout organizes content into rows and columns. The rows are defined in the layout XML, and the columns are determined automatically by Android. This is done by creating at least one column for each element. So, for example, if you had a row with two elements and a row with five elements then you would have a layout with two rows and five columns.

You can specify that an element should occupy more than one column using android:layout_span. This can increase the total column count as well, so if we have a row with two elements and each element has android:layout_span=”3″ then you will have at least six columns in your table.

By default, Android places each element in the first unused column in the row. You can, however, specify the column an element should occupy using android:layout_column.

Here is some sample XML using TableLayout.

<TableLayout 
	android:layout_width="fill_parent" 
	android:layout_height="fill_parent" 
	xmlns:android="http://schemas.android.com/apk/res/android">
	<TableRow>
		<Button 
	    	android:id="@+id/backbutton"
	    	android:text="Back"
	    	android:layout_width="wrap_content"
	    	android:layout_height="wrap_content" />
	</TableRow>
	<TableRow>
		<TextView
	    	android:text="First Name"
	    	android:layout_width="wrap_content"
	    	android:layout_height="wrap_content"
	    	android:layout_column="1" />
    		<EditText
	    	android:width="100px"
	    	android:layout_width="wrap_content"
	    	android:layout_height="wrap_content" />
	</TableRow>
	<TableRow>
		<TextView
	    	android:text="Last Name"
	    	android:layout_width="wrap_content"
	    	android:layout_height="wrap_content"
	    	android:layout_column="1" />
    		<EditText
	    	android:width="100px"
	    	android:layout_width="wrap_content"
	    	android:layout_height="wrap_content" /> 
	</TableRow>
</TableLayout>

This is the result of that XML.

TableLayout

Next: Alternate Layouts

{ 35 } Comments