onlyMobilePro

Introduction to Android TableLayout

TableLayout, is a XML layout that used to organizes content into rows and columns. The concept of the table that defined using TableLayout is much same like the HTML’s table. It will be very easy to understand, if you come from web industry. For example, if we want our app layout look like the following screenshot, then we could write the XML code as below:

<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>

Result:

As you can seen from code above, a table is divided into rows with TableRow tag and each row is divided into columns. At line 17, we have specified “android:layout_column” to 1. This attribute is to control the index of the column in which this child should be. Still not clear? Let’s take a look on the following image:

The green line represented as columns, and purple line as rows. Please bear in mind that, all index of elements are started from 0 not 1. As we mentioned earlier, we have specified “android:layout_column” to 1 for “First Name” & “Last Name“, so both of these data will ONLY appear on the index number 1 columns.

Besides, we could specify an element to occupy more than one column using android:layout_span attribute. This attribute allow us to increase the total columns, 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 the table.

For a complete list of attributes available fr TableLayout, please visit Google Android Documentation Site.

Previous Post Next Post