• A Beginner’s Guide To Android TableLayout

    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:
    Table Layout Example
    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:
    Android Table Description
    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.
  • You might also like

    No comments:

    Post a Comment

    Good day precious one, We love you more than anything.

Powered by Blogger.