Table Layout - Android Example

DOWNLOAD CODE

Related Examples

In this example creating  a basic layout then a login screen.

In Android, TableLayout let you arranges components in rows and columns, just like the standard table layout in HTML, <tr> and <td>..

In this tutorial, we show you how to use TableLayout to arrange button, textview and edittext in rows and columns format, and also demonstrates the use of “android:layout_span” to span view in 2 cells, and “android:layout_column” to display the view in specified column.

 

Note :

In Eclipse , XML code assist will not prompts the attribute “android:layout_span“, “android:layout_column” and many other useful TableLayout attributes, no idea why, may be bug. Just put the attribute inside, it’s still compile and run.

 

One basic example to better understanding :

 

Table Layout Sketch

 

 

<TableLayout
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:shrinkColumns="*"  android:stretchColumns="*" android:background="#ffffff">


                        <!-- Row 1 with single column -->
                        <TableRow
                            android:layout_height="wrap_content"
                            android:layout_width="fill_parent"
                            android:gravity="center_horizontal">


                            <TextView
                                android:layout_width="match_parent" android:layout_height="wrap_content"
                                android:textSize="18dp" android:text="Row 1"  android:layout_span="3"
                                android:padding="18dip" android:background="#b0b0b0"
                                android:textColor="#000"/>


                       </TableRow>
         
                        <!-- Row 2 with 3 columns -->


                        <TableRow
                            android:id="@+id/tableRow1"
                            android:layout_height="wrap_content"
                            android:layout_width="match_parent">

                            <TextView
                                android:id="@+id/TextView04" android:text="Row 2 column 1"
                                android:layout_weight="1" android:background="#dcdcdc"
                                android:textColor="#000000"
                                android:padding="20dip" android:gravity="center"/>

                            <TextView
                                android:id="@+id/TextView04" android:text="Row 2 column 2"
                                android:layout_weight="1" android:background="#d3d3d3"
                                android:textColor="#000000"
                                android:padding="20dip" android:gravity="center"/>

                            <TextView
                                android:id="@+id/TextView04" android:text="Row 2 column 3"
                                android:layout_weight="1" android:background="#cac9c9"
                                android:textColor="#000000"
                                android:padding="20dip" android:gravity="center"/>

                        </TableRow>
                         
                        <!-- Row 3 with 2 columns -->
                        <TableRow
                            android:layout_height="wrap_content"
                            android:layout_width="fill_parent"
                            android:gravity="center_horizontal">

                            <TextView
                                android:id="@+id/TextView04" android:text="Row 3 column 1"
                                android:layout_weight="1  android:background="#b0b0b0"
                                android:textColor="#000000"
                                android:padding="18dip" android:gravity="center"/>
                     
                            <TextView
                                android:id="@+id/TextView04" android:text="Row 3 column 2"
                                android:layout_weight="1" android:background="#a09f9f"
                                android:textColor="#000000"
                                android:padding="18dip" android:gravity="center"/>
                        </TableRow>
                         
      </TableLayout>

 

Taking example to create a login screen for better understanding.

 

activity_table_layout_android_example.xml :

 

 

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                >
            
            
                        <TableRow   android:paddingTop="10px" android:gravity="center">
                             
                             <TextView
                                 android:id="@+id/status"
                                 android:layout_width="wrap_content"
                                 android:layout_gravity="center"
                                 android:layout_span="2"
                                 android:text="LOGIN"
                                 android:textColor="#890000"
                                 android:textSize="15sp"
                                 android:textStyle="bold" />
                        
                         </TableRow>
                         
                        <TableRow android:layout_marginTop="20dip" >
                            
                            <TextView
                                android:layout_width="wrap_content"
                            android:text="Username :"
                            android:textSize="20sp"
                            android:textColor="#000000"
                            android:layout_marginLeft="20dip"
                            ></TextView>
                        
                           <EditText
                               android:id="@+id/screenName"
                               android:layout_height="wrap_content"
                               android:layout_marginLeft="20dip"
                               android:layout_marginRight="20dip"
                               android:layout_weight="1" >
                                
                            </EditText>
                           
                         </TableRow>


                         <TableRow android:layout_marginTop="20dip" >
                             
                            <TextView android:text="Password :"  
                            android:layout_width="wrap_content"
                            android:textSize="20sp"
                            android:textColor="#000000"
                            android:layout_height="wrap_content"
                            android:layout_marginLeft="20dip"></TextView>
                        
                           <EditText
                               android:id="@+id/password"
                               android:layout_height="wrap_content"
                               android:layout_marginLeft="20dip"
                               android:layout_marginRight="20dip"
                               android:layout_weight="1" >
                                
                            </EditText>
                           
                         </TableRow>


                         <TableRow android:gravity="center" android:layout_marginTop="20dip" >
                         
                            <Button
                            android:text="Submit"
                            android:clickable="true"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:id="@+id/save" android:layout_span="2" ></Button>  
                         </TableRow>
            
     </TableLayout>