Android development

A N D R O I D
L A Y O U T S


Table Layout
In Android, TableLayout lets us arrange
components in rows and columns, just like the
standard table layout in HTML, <tr> and <td>.
It organizes user interface controls, or widgets,
on the screen in neatly defined rows and
columns.

The Concept
Each TableLayout consists of a number of
TableRow objects.
Each TableRow object contains zero or more
cells.
Each cell can hold one View object.
The table has as many columns as the row
with the most cells and cells can of course
span columns
The Syntax
For TableLayout following is the syntax we have to follow:
<TableLayout . . .
. . . . . >
<TableRow attributes>
<Button attributes >
<TextView attributes>
.
.
</TableRow>
<TableRow attributes>
<Button attributes >
<TextView attributes>
.
.
</TableRow>
</TableLayout>


The Code
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TableRow>
<Button
android:layout_width="wrap_content" android:id="@+id/btn01"
android:text="Button 1"
android:layout_height="wrap_content">
</Button>
</TableRow>

The Code
<TableRow>
<Button
android:layout_width="wrap_content"
android:id="@+id/btn02"
android:text="Button 2"
android:layout_height="wrap_content" ></Button>
<Button
android:layout_width="wrap_content"
android:id="@+id/btn03"
android:text="Button 3"
android:layout_height="wrap_content" >
</Button>
<Button
android:layout_width="wrap_content"
android:id="@+id/btn04"
android:text="Button 4"
android:layout_height="wrap_content" >
</Button>
</TableRow>

</TableLayout>

The Output

Another Example
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="fill_parent"
android:layout_width="fill_parent">
<TableRow>
<TextView
android:id="@+id/textName"
android:text="Name:"
/>
<EditText
android:id="@+id/editName"
android:width="230dp" />
</TableRow>
Another Example
<TableRow>
<TextView
android:id="@+id/textPasswd"
android:text="Password:"
/>
<EditText
android:id="@+id/editPasswd"
android:password="true" />
</TableRow>

<TableRow>
<Button
android:id="@+id/buttonSignIn"
android:text=" Sign In " />
</TableRow>

</TableLayout>
The Output

Stretching Columns
The default width of a column is set equal to the
width of the widest column.
But we can stretch the column(s) to take up
available free space using the
android:stretchColumns attribute in the
TableLayout.
The value assigned to this attribute can be a
single column number or a comma-delimited list
of column numbers. The specified columns are
stretched to take up any available space on the
row.
Stretching Columns
android:stretchColumns="1"The second
column (because the column numbers are
zero-based) is stretched to take up any
available space in the row.
android:stretchColumns="0,1"Both the first
and second columns are stretched to take up
the available space in the row.
android:stretchColumns="*"All columns
are stretched to take up the available space.

The Code
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:stretchColumns="0">
<!- - Rest of the code is same - - >
The Output

The Code
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:stretchColumns="0,1">
<!- - Rest of the code is same - - >
The Output

The Code
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:stretchColumns=*">
<!- - Rest of the code is same - - >
The Output

Shrinking Columns
We can shrink or reduce the width of the
column(s) using the android:shrinkColumns
attribute in the TableLayout.
We can specify either a single column or a
comma-delimited list of column numbers for
this attribute.
The content in the specified columns word-
wraps to reduce their width.
Shrinking Columns
android:shrinkColumns="0"The first
columns width shrinks or reduces by word-
wrapping its content.
android:shrinkColumns="*"The content of
all columns is word-wrapped to shrink their
widths.

Spanning Columns
We can make a column span or take up the
space of one or more columns by using the
android:layout_span attribute.
The value assigned to this attribute must be
>=1.
For example, the following value makes the
control take or span up to two columns:

android:layout_span="2"

The Code
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content" android:stretchColumns="*">
<TableRow>

<EditText android:id="@+id/searchText" android:text="Search text"
android:layout_height="wrap_content"
android:layout_span="4" />

<Button android:id="@+id/searchButton" android:text="Search"
android:layout_height="wrap_content"
android:layout_span="1" />

</TableRow>
</TableLayout>
The Output

Using android:layout_column
Attribute
Cells are added to a row from 0
th
column
If we want to begin adding a columns from a different index
, then we can use android:layout_column attribute.
For example :
<Button
.
.
android:text=Button 2
android:layout_column=1
.
.
/>




android:layout_column=1

EXERCISE

Restrictions On TableLayout
The width of controls will be always set to
match_parent by default.
We can specify the layout_height attribute for
the enclosed controls (the default value is
wrap_content).
The layout_height attribute of the TableRow is
always wrap_content.