Wednesday, May 20, 2015

How to use TableLayout in Android

Table of contents
  1. Android TableLayout Example
    • TableLayout
    • TableRow
    • TableLayout border
    • TableLayout layout_span (colspan)
    • TableLayout background
    • TableRow background
    • Table Cell background
    • layout_gravity
    • Padding

1. Android TableLayout Example

activity_main.xml

<TableLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/tl"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:background="@android:color/white"
    android:padding="16dp"
    >
    <!--
        * TableLayout is a layout that arranges its children into rows and columns.
        * A TableLayout consists of a number of TableRow objects, each defining a row.
        * Each row has zero or more cells.
        * Each cell can hold one View object.
        * TableLayout containers do not display border lines for their rows, columns, or cells.
        * The table has as many columns as the row with the most cells.
        * A table can leave cells empty. Cells can span columns.
        * The width of a column is defined by the row with the widest cell in that column.
        * TableLayout can specify certain columns as shrinkable or stretchable
          by calling setColumnShrinkable() or setColumnStretchable().
        * In this example code we generate border for table and its columns, rows and cells.
    -->
    <TableRow
        android:id="@+id/tr_header"
        android:background="@drawable/table_row_bg"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="5dp"
       >
        <TextView
            android:id="@+id/tv_product"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Book"
            android:background="@drawable/table_cell_bg"
            android:paddingRight="10dp"
            />
        <TextView
            android:id="@+id/tv_author"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Author"
            android:background="@drawable/table_cell_bg"
            android:paddingLeft="10dp"
            android:paddingRight="10dp"
            />
        <TextView
            android:id="@+id/tv_quantity"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Quantity"
            android:background="@drawable/table_cell_bg"
            android:paddingLeft="10dp"
            android:paddingRight="10dp"
            />
        <TextView
            android:id="@+id/tv_unit_price"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Unit Price"
            android:background="@drawable/table_cell_bg"
            android:paddingLeft="10dp"
            android:paddingRight="10dp"
            />
        <TextView
            android:id="@+id/tv_price"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Price"
            android:paddingLeft="10dp"
            />
    </TableRow>
    <TableRow
        android:id="@+id/tr_item_1"
        android:background="@drawable/table_row_bg"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="5dp"
        >
        <TextView
            android:id="@+id/tv_product_item_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello, Android, 4th Edition"
            android:background="@drawable/table_cell_bg"
            android:paddingRight="10dp"
            />
        <TextView
            android:id="@+id/tv_author_item_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Ed Burnette"
            android:background="@drawable/table_cell_bg"
            android:paddingLeft="10dp"
            android:paddingRight="10dp"
            />
        <TextView
            android:id="@+id/tv_quantity_item_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="2"
            android:background="@drawable/table_cell_bg"
            android:paddingLeft="10dp"
            android:paddingRight="10dp"
            android:layout_gravity="right"
            />
        <TextView
            android:id="@+id/tv_unit_price_item_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="$36.00"
            android:background="@drawable/table_cell_bg"
            android:paddingLeft="10dp"
            android:paddingRight="10dp"
            android:layout_gravity="right"
            />
        <TextView
            android:id="@+id/tv_price_item_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="$72.00"
            android:paddingLeft="10dp"
            android:layout_gravity="right"
            />
    </TableRow>
    <TableRow
        android:id="@+id/tr_item_2"
        android:background="@drawable/table_row_bg"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="5dp"
        >
        <TextView
            android:id="@+id/tv_product_item_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="High Performance Android Apps"
            android:background="@drawable/table_cell_bg"
            android:paddingRight="10dp"
            />
        <TextView
            android:id="@+id/tv_author_item_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Doug Sillars"
            android:background="@drawable/table_cell_bg"
            android:paddingLeft="10dp"
            android:paddingRight="10dp"
            />
        <TextView
            android:id="@+id/tv_quantity_item_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="3"
            android:background="@drawable/table_cell_bg"
            android:paddingLeft="10dp"
            android:paddingRight="10dp"
            android:layout_gravity="right"
            />
        <TextView
            android:id="@+id/tv_unit_price_item_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="$44.99"
            android:background="@drawable/table_cell_bg"
            android:paddingLeft="10dp"
            android:paddingRight="10dp"
            android:layout_gravity="right"
            />
        <TextView
            android:id="@+id/tv_price_item_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="$134.97"
            android:paddingLeft="10dp"
            android:layout_gravity="right"
            />
    </TableRow>
    <TableRow
        android:id="@+id/tr_total"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/table_row_last_bg"
        android:padding="5dp"
        >
        <!-- layout_span is table column span -->
        <TextView
            android:id="@+id/tv_total_price"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Total = $206.97"
            android:layout_span="5"
            android:layout_gravity="right"
            android:textStyle="italic"
            />
    </TableRow>
</TableLayout>
res/drawable/table_row_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <stroke android:color="@android:color/black" android:width="1dp"/>
        </shape>
    </item>
    <item
        android:left="1dp"
        android:top="1dp"
        android:right="1dp"
        >
        <shape android:shape="rectangle">
            <solid android:color="@android:color/white"/>
        </shape>
    </item>
</layer-list>
res/drawable/table_row_last_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <stroke android:color="@android:color/black" android:width="1dp"/>
            <solid android:color="@android:color/white"/>
        </shape>
    </item>
</layer-list>
res/drawable/table_cell_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <!-- Draw a stroke/border around the rectangle shape -->
            <stroke android:color="@android:color/black" android:width="1dp"/>
        </shape>
    </item>
    <!-- Hide left, top and bottom side of
         rectangle with border using a solid color by padding right 1 dp -->
    <item
        android:right="1dp"
        >
        <shape android:shape="rectangle">
            <solid android:color="@android:color/white"/>
        </shape>
    </item>
</layer-list>
MainActivity.java

package com.cfsuman.me.androidcodesnippets;

/*
    compileSdkVersion 22
    minSdkVersion 21
    targetSdkVersion 22
 */

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

public class MainActivity extends Activity{

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

        // Get the widgets reference from XML layout
        TableLayout tl = (TableLayout) findViewById(R.id.tl);
    }
}
More android examples