Skip to main content

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

Popular posts from this blog

How to use NumberPicker in Android

Table of contentsNumberPicker ExamplesetOnValueChangedListeneronValueChange()setWrapSelectorWheel()setMinValue()setMinValue()setMaxValue()NumberPicker with String ArraysetDisplayedValues()String Array1. NumberPicker Example activity_main.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/rl" android:layout_width="match_parent" android:layout_height="match_parent" android:padding="16dp" tools:context=".MainActivity" android:background="#ffffff" > <TextView android:id="@+id/tv" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="25dp" android:text="Select a number..." /> <NumberPicker android:id="@+id/np" …

TextView new line (multiline) in android

TextView new line (multiline) TextView display text on android app. by default, TextView show text on a single line, and if it is long then TextView take more lines to display its text. android developers can generate a new line on TextView both programmatically and syntactically. android developers can make a multiline TextView without splitting text to multiline by android:minLines attribute.

the following android example code demonstrate us how can we syntactically create a new line on TextView widget by xml layout file and string resource file.

the simplest way to create a new line on TextView is android:text attribute. android:text attribute allow us to display text on android app. we can add a simple '\n' to TextView text where we want to start a new line. in this way we can create a multiline TextView widget in android app. we can assign android:text attribute value by this way android:text="Line1 \n Line2 \n Line3" for a TextView widget. this value will…

How to change TextView font size in android

TextView font size TextView widget display text on android application. we can set or change TextView font size statically by declarative syntax in xml layout file or programmatically at run time in java file. even we can use an xml file source to define font size.

the following example code demonstrate us how can we define TextView font size in xml layout file and how can we uses dimens.xml to reference font size. in this example we did not changes any coding in java file, so here we only include the layout xml file and dimens.xml file. activity_main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:layout_margin="25dp" tools:context=".MainActivity" > <TextView android:id=&…