Android Table Layout

 In Android, Table Layout is used to arrange the group of views into

rows and columns.
Table Layout containers do not display a border line for their columns,
rows or cells.A Table will have as many columns as the row with the
most cells.
A table can also leave the cells empty but cells can’t span the columns
as they can in HTML(Hypertext markup language).
 For building a row in a table we will use the <TableRow> element.
Table row objects are the child views of a table layout.
 Each row of the table has zero or more cells and each cell can hold
only one view object like ImageView, TextView or any other view.
Total width of a table is defined by its parent container
Column can be both stretchable and shrinkable. If shrinkable then the
width of column can be shrunk to fit the table into its parent object and
if stretchable then it can expand in width to fit any extra space
available.
TableLayout Attributes
Following are the important attributes specific to TableLayout −
1. android:id
This is the ID which uniquely identifies the layout.
<TableLayout android:id="@+id/simpleTableLayout"
android:layout_width="match_parent"
android:layout_height="match_parent/>
2. stretchColumns:
 Stretch column attribute is used in Table Layout to change the default
width of a column which is set equal to the width of the widest column
but we can also stretch the columns to take up available free space by
using this attribute.
The value that assigned to this attribute can be a single column
number or a comma delimited list of column numbers (1, 2, 3…n).
If the value is 1 then the second column is stretched to take up any
available space in the row, because of the column numbers are started
from 0.
If the value is 0,1 then both the first and second columns of table are
stretched to take up the available space in the row.
If the value is ‘*’ then all the columns are stretched to take up the
available space.
Below is the example code of stretch column attribute of table layout
with explanation included in which we stretch the first column of
layout.
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/simpleTableLayout"
android:layout_width="match_parent"
android:layout_height="match_parent" android:stretchColumns="1">
<!-- stretch the second column of the layout--> <!-- first row of the table
layout
</TableLayout>-->
3. shrinkColumns:
Shrink column attribute is used to shrink or reduce the width of the
column‘s. 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.
If the value is 0 then the first column’s width shrinks or reduces by
word wrapping its content.
If the value is 0,1 then both first and second columns are shrinks or
reduced by word wrapping its content.
If the value is ‘*’ then the content of all columns is word wrapped to
shrink their widths.
Below is the example code of shrink column attribute of table layout
with explanation included in which we shrink the first column of layout.
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" android:shrinkColumns="0">
<!-- shrink the first column of the layout-->
</TableLayout>
4. collapseColumns:
 collapse columns attribute is used to collapse or invisible the column’s
of a table layout. These columns are the part of the table information
but are invisible.
If the values is 0 then the first column appears collapsed, i.e it is the
part of table but it is invisible.
Below is the example code of collapse columns with explanation
included in which we collapse the first column of table means first
column is an part of table but it is invisible so you can see only the
second column in screenshot.
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" android:collapseColumns="0">
<!-- collapse the first column of the table row-->
</TableLayout>
package com.example.demo;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}
Following will be the content of res/layout/activity_main.xml file −

<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TableRow
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:text="Time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1" />
<TextClock
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/textClock"
android:layout_column="2" />
</TableRow>
<TableRow>
<TextView
android:text="First Name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1" />
<EditText
android:width="200px"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</TableRow>
<TableRow>

<TextView
android:text="Last Name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1" />
<EditText
android:width="100px"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</TableRow>
<TableRow
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<RatingBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/ratingBar"
android:layout_column="2" />
</TableRow>
<TableRow

android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
<TableRow
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Submit"
android:id="@+id/button"
android:layout_column="2" />
</TableRow>
</TableLayout>
Frame Layout
The FrameLayout is a placeholder on screen that you can use to display
a single view.
Frame Layout is designed to block out an area on the screen to display
a single item. Generally, FrameLayout should be used to hold a single
child view, because it can be difficult to organize child views in a way
that's scalable to different screen sizes without the children overlapping
each other.
You can, however, add multiple children to a FrameLayout and control
their position within the FrameLayout by assigning gravity to each child,
using the android:layout_gravity attribute
FrameLayout
Attributes
Following are the important attributes specific to FrameLayout −
1. android:id
This is the ID which uniquely identifies the layout.
2. android:foreground
This defines the drawable to draw over the content and possible values
may be a color value, in the form of "#rgb", "#argb", "#rrggbb", or
"#aarrggbb".
3. android:foregroundGravity
Defines the gravity to apply to the foreground drawable. The gravity
defaults to fill. Possible values are top, bottom, left, right, center,
center_vertical, center_horizontal etc.
4. android:measureAllChildren
Determines whether to measure all children or just those in the
VISIBLE or INVISIBLE state when measuring. Defaults to false.
Following is the content of the modified main activity file
src/com.example.demo/MainActivity.java. This file can include each of the fundamental
lifecycle methods.
package com.example.demo;
import android.os.Bundle;
import android.app.Activity;
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}
Following will be the content of res/layout/activity_main.xml file −
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:src="@drawable/ic_launcher"
android:scaleType="fitCenter"
android:layout_height="250px"
android:layout_width="250px"/>
<TextView
android:text="Frame Demo"
android:textSize="30px"
android:textStyle="bold"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:gravity="center"/>
</FrameLayout>