Android Table Layout Example

By | January 18, 2014
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

  • Great tuto, but …
    It keeps crashing on me 🙁
    It all goes fine until it's time to render the table and then it crashes with a "divide by zero" at android.widget.TableLayout.mutateColumnsWidth(TableLayout.java:583)