Android Table Layout Example

Android TableLayout as the name suggest it arranges the child views in rows and columns , just like standard HTML Table tag .

In this tutorial we will see an example of designing login screen using table layout that contains edittext ,textview and button.

Lets See An Example

Project Detail

Project Name	DynamicTableLayout
Package	com.pavan.dynamictablelayout
Minimum SDK	API 8
Target SDK	API 17
Theme	Holo Light with Dark Action Bar

1. XML Layout

file : activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tableLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="10dp"
    android:shrinkColumns="*"
    android:stretchColumns="*" >

    <!-- Row1 Column1 -->

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

        <TextView
            android:id="@+id/textView9"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="Login"
            android:textSize="24dp"
            android:textStyle="bold" >
        </TextView>
    </TableRow>

    <!-- Row2 Column2 -->

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

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="UserName"
            android:textSize="16dp" />

        <EditText
            android:id="@+id/editText1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ems="10" >
        </EditText>
    </TableRow>

    <!-- Row3 Column3 -->

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

        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Password"
            android:textSize="16dp" />

        <EditText
            android:id="@+id/editText2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ems="10"
            android:inputType="textPassword" >
        </EditText>
    </TableRow>

    <!-- Row4 Column1 -->

    <TableRow
        android:id="@+id/tableRow4"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="right" >

        <Button
            android:id="@+id/button1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="SignIn" />
    </TableRow>

</TableLayout>

2. Activity

file : MainActivity.java

package com.pavan.tablelayoutdemo;

import android.app.Activity;
import android.os.Bundle;

public class MainActivity extends Activity {

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
 }

}

3. RUN