My Life with Android
Introduction Android Componets UserInterface Advanced UI Data Storage Advanced Concepts Others New Studio

TableLayout

A TableLayout used to arrange views into rows and columns. You will use the <TableRow> element to create a row in the table.



Syntax : 
<TableLayout>

           <TableRow>
               . 
               .
               .
               .
           </TableRow>
           
           <TableRow>
               . 
               .
               .
               .
           </TableRow>

           <TableRow>
               . 
               .
               .
               .
           </TableRow>

</TableLayout>

Ex : Login screen using TableLayout


In .xml file 
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="8dp"
    android:stretchColumns="2" >

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_span="2"
            android:gravity="center"
            android:text="Registration"
            android:textColor="#F00" />
    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <TextView
            android:id="@+id/tv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="1"
            android:gravity="right"
            android:text="Name" />

        <EditText
            android:id="@+id/etName"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="2" />
    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <TextView
            android:id="@+id/tvPhoneNumber"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="1"
            android:gravity="right"
            android:text="Phone Number" />

        <EditText
            android:id="@+id/etPhoneNumber"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="2" />
    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="1"
            android:gravity="right"
            android:text="EmailID" />

        <EditText
            android:id="@+id/etEmailID"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="2" />
    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal" >

        <Button
            android:id="@+id/textView6"
            android:layout_width="100dp"
            android:layout_height="45dp"
            android:layout_span="2"
            android:text="Submit" />
    </TableRow>


</TableLayout>