Pr.Pg Next Pg

Table Layout Tutorials

 

What is a Table Layout

  • Table layouts can be used for displaying tabular data or neatly aligning screen contents in a way similar to an HTML table on a web page. 

  • A table layout is exactly what you might expect: a grid of made up of rows and columns, where a cell can display a view control.

  • From a user interface design perspective, a TableLayout is comprised of TableRow controls—one for each row in your table.

  • The contents of a TableRow are simply the view controls that will go in each “cell” of the table grid.

 

Adding the Table Layout

 

  • The children of a TableLayout cannot specify the layout_width attribute. Width is always MATCH_PARENT. However, the layout_height attribute can be defined by a child; default value is WRAP_CONTENT. If the child is a TableRow, then the height is always WRAP_CONTENT.

  • The width of a column is defined by the row with the widest cell in that column.

  • However, a TableLayout can specify certain columns as shrinkable or stretchable by calling setColumnShrinkable() or setColumnStretchable().

  • If marked as shrinkable, the column width can be shrunk to fit the table into its parent object.

  • If marked as stretchable, it can expand in width to fit any extra space.

  • The total width of the table is defined by its parent container. It is important to remember that a column can be both shrinkable and stretchable.

  • In such a situation, the column will change its size to always use up the available space, but never more.

  • Finally, you can hide a column by calling setColumnCollapsed().

Example

  • Below is the example of an XML layout and we make an activity which will set its ContentView to the layout.

 

table_layout.xml

 

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical">

 

<TableLayout

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:stretchColumns="*"

android:shrinkColumns="*">

<TableRow

android:id="@+id/tableRow1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

 

<TextView

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="Students Details"

android:gravity="center"

android:layout_span="4"/>

</TableRow>

 

<TableRow

android:id="@+id/tableRow2"

android:layout_width="wrap_content"

android:layout_height="wrap_content">

 

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Serial No." />

 

<TextView

android:id="@+id/textView3"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Name" />

<TextView

android:id="@+id/textView1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Roll Number" />

<TextView

android:id="@+id/textView1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Grade" />

</TableRow>

 

<TableRow

android:id="@+id/tableRow6"

android:layout_width="wrap_content"

android:layout_height="wrap_content">

 

<TextView

android:id="@+id/textView2"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="1" />

<TextView

android:id="@+id/textView1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="David" />

<TextView

android:id="@+id/textView1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="111070047" />

<TextView

android:id="@+id/textView1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="A+" />

 

</TableRow>

<TableRow

android:id="@+id/tableRow4"

android:layout_width="wrap_content"

android:layout_height="wrap_content">

<TextView

android:id="@+id/textView1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="2" />

<TextView

android:id="@+id/textView1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Sheldon" />

<TextView

android:id="@+id/textView1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="111070044" />

<TextView

android:id="@+id/textView1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="A" />

</TableRow>

</TableLayout>

</LinearLayout>

 

 

 

  • This table layout has all its columns set to both shrink and stretch by using a “*” in the value.

  • If just certain columns should shrink or stretch, the values would be a comma seperated list (using 0-based indexes for columns).

  • Our Layout will look like this when we run the application after setting it up as the View for our activity.

 

 

Pr.Pg border                                              Next Pg