Android Development Tutorial-TableLayout

Android Development Tutorial-TableLayout

7.1. Overview

In earlier chapter we have used the LinearLayout which allows to stack widgets vertical or horizontal. LinearLayout can be nestled to archive nice effects. This chapter will demonstrate the usage of “TableLayout”.

This layout allows to organize view into a table format. You specify via the view group “TableRow” rows for your table. Afterwards you put widgets into the individual rows.

On the “TableLayout” you can define which column should take additional space via the “android:stretchColumns” attribute. If several columns should take the available space you can specific them as a comma-separated list. Similar you can use the attribute “android:shrinkColumn”, which will try to word-wrap the content of the specified widgets and the attribute “android:collapseColums” to define initially hidden columns. Via Java you can display / hide these columns via the method setColumnVisible().

Columns will be automatically created based on the maximum number of widgets in one row. Per default each widgets creates a new column in the row. You can specific via “android:layout_column” the column a widget should go and via “android:layout_span” how many columns a widget should take.

You can also put non TableRows in a table. This way you can for example add dividers between your columns.

7.2. Example

Create the project “de.vogella.android.layout.table” with the activity “DemoTableLayout”. Change “main.xml” to the following.

< ?xml version="1.0" encoding="utf-8"?>

android:orientation="vertical" android:layout_width="fill_parent"

android:layout_height="fill_parent">

android:id="@+id/tableLayout1" android:layout_height="wrap_content"

android:stretchColumns="1">

android:layout_height="wrap_content" android:id="@+id/tableRow1">

android:layout_width="wrap_content" android:layout_height="wrap_content">

android:layout_width="wrap_content" android:layout_height="wrap_content"

android:layout_column="2">

android:layout_height="4px" android:background="#FF0000"> android:layout_height="wrap_content">

android:layout_width="wrap_content" android:id="@+id/editText3">

android:layout_width="wrap_content" android:text="Field4"

android:id="@+id/editText4">

Change the activity “DemoTableLayout” to the following to use the button to hide the second column in the table.

This Android Tutorial has been taken from Vogella click the link to read the entire android development tutorial.