Table Layout in Android example



TableLayout in Android is similar to <table> in HTML. This layout arranges its children in tabular view ( Rows and Columns).
<TableLayout> is the parent and <TableRow> is its child. This is similar to HTML <table> and <tr>
<TableRow> can contain any view object like button,text field and so on.

The maximum number of cells in the table will be equivalent to the row with most cells. This layout do not show the table borders. The number of cells in a row can be greater than or equal to Zero.

It is possible to span the cells across columns. But we do not have direct option to span across rows. However this can be done using the inner/nested table layouts. One important thing is the column numbers are zero-based. The cells must be added in increasing order.


android:layout_span property is used to span cells across columns. For example, android:layout_span="2" will span the cell across two columns. 
There is no explicit property for Row span. But row span can be achieved using inner tables. This is also given in this example application.

Example application:

In this application we can understand how to create TableLayout in android, how to add rows, how to add cells, how to span cells across columns, how to span cells across rows and so on.

Project structure:



MainActivity.java


package com.example.tablelayout;

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

public class MainActivity extends Activity {

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

 @Override
 public boolean onCreateOptionsMenu(Menu menu) {
  // Inflate the menu; this adds items to the action bar if it is present.
  getMenuInflater().inflate(R.menu.activity_main, menu);
  return true;
 }

}

AndroidManifest.xml


<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.tablelayout"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="16" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="com.example.tablelayout.MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

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="fill_parent"
    android:layout_height="fill_parent" >

    <TableRow
        android:id="@+id/tableRow3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="5dip" >

        <Button
            android:id="@+id/textView2"
            android:text="Column 1" />
    </TableRow>
    <!-- display this button in 2nd column via layout_column(zero based) -->

    <TableRow
        android:id="@+id/tableRow4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="5dip" >

        <Button
            android:id="@+id/button4"
            android:layout_column="1"
            android:text="Column 3" />
    </TableRow>
    <!-- display this button in 3rd column via layout_column(zero based) -->

    <TableRow
        android:id="@+id/tableRow5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="5dip" >

        <Button
            android:id="@+id/button5"
            android:layout_column="2"
            android:text="Column 3" />
    </TableRow>
    
    <!-- 3 columns -->

    <TableRow
        android:id="@+id/tableRow6"
        android:layout_width="wrap_content"
        android:layout_height="10dip"
        android:padding="5dip" >

        <Button
            android:id="@+id/textView6"
            android:text="Column 1" />

        <Button
            android:id="@+id/button2"
            android:text="Column 2" />

        <Button
            android:id="@+id/button3"
            android:text="Column 3" />
    </TableRow>
    <!-- span 2 column -->

    <TableRow
        android:id="@+id/tableRow2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="5dip" >

        <Button
            android:id="@+id/editText1"
            android:layout_span="2"
            android:text="Column 1 &amp; 2 " />
    </TableRow>
    <!-- span 3 column -->

    <TableRow
        android:id="@+id/tableRow2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="5dip" >

        <Button
            android:id="@+id/editText1"
            android:layout_span="3"
            android:text="Column 1 &amp; 2 &amp; 3" />
    </TableRow>
 <!-- Span two rows -->
    <TableRow
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="5dip" >

        <Button
            android:layout_gravity="center"
            android:text="Column 1" />

        <TableLayout>

            <TableRow>

                <Button
                    android:layout_gravity="center"
                    android:text="Column 2" />
            </TableRow>

            <TableRow>

                <Button
                    android:layout_gravity="center"
                    android:text="Column 2" />
            </TableRow>
        </TableLayout>
    </TableRow>

</TableLayout>

Output of this application:




Source code of this application

TableLayout.zip




Reactions:

0 comments :

Post a Comment