Basics of Android Programming: The Table Layout

Udemy Editor

A layout is the way view objects are arranged on the mobile device screen. In Android, layouts are important for designing purposes. Since the screen size of mobile phones has a limited area, you need these layouts to avoid wasting space. Every inch of space counts when it comes to adjusting the view objects. Layouts are used to efficiently adjust the objects on the screen. Layouts are important for a good design and smooth interface. It prevents objects from overlapping and avoids unwanted congestion on the screen. The layouts are described in an XML file.

New to Android programming? Take a course at Udemy.com.

Table Layout Attributes

CollapseColumns: This is a zero-based index of the columns to collapse. The column index is separated by comma: 1, 2 4. However, illegal and duplicate column index is ignored.
shrinkColumns: The zero based index of columns to shrink. All the columns can be shrunk using “*” value.
strechColumns: The zero-based index of column to stretch. All the columns can be stretched using “*” value

TableLayout and Public Methods:

addView(): Adds a child View
generateLayoutParams(): Returns new layout parameter based on supplied attributes set.
isColumnCollapsed(): Returns collapsed state of the column
isColumnShrinkable():Returns whether column is shrinkable or not
isColumnStrechable():Returns whether column is stretchable or not
isShrinkAllColumns():Indicates whether all columns are shrinkable or not
isStretchAllColumns():Indicates whether all columns are stretchable or not
onInitializeAccessibilityEvent(): Initializes the accessibilityEvent of the view which has caused the event to occur.
onInitializeAccessibilityNodeInfo(): it initializes an accessbilityNodeInfo of the view which has caused the event to occur.
requestLayout(): This is called when a layout is invalidated out of the view
setStrechAllCoulmns():Marks all columns stretchable
setShrinkAllColumns():Marks all columns shrinkable
setOnHierarchyChangeListener():Registers a callback when child is added or removed from the view.

For Example

<?xml version="1.0" encoding="utf-8"?>
<TableLayoutxmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/table1"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
 
<TableRow
android:id="@+id/Row1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dip" >
 
<TextView
android:id="@+id/View1"
android:text="CELL 1"
/>
 
<Button
android:id="@+id/bttn1"
android:text="CELL 2" />
</TableRow>
 
<!-- 2nd column -->
<TableRow
android:id="@+id/Row2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="15dip" >
 
<EditText
android:id="@+id/Text1"
android:layout_span="4"
android:text="CELL 1 &amp; CELL 2" />
</TableRow>
 
<TableRow
android:id="@+id/Row3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="3dip" >
 
<TextView
android:id="@+id/View2"
android:text="CELL 1"
android:textAppearance="?android:attr/textAppearanceLarge" />
 
<Button
android:id="@+id/bttn2"
android:text="CELL 2" />
 
</TableRow>
 
<!-- 3rd column _column(zero based) -->
<TableRow
android:id="@+id/Row4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="7dip" >
 
<Button
android:id="@+id/bttn4"
android:layout_column="2"
android:text="Column 3" />
</TableRow>
 
 
</TableLayout>

The above example shows the basic implementation of the table layout. It has four TableRowobjects, which means that there are four rows present in the parent TableLayout. The view objects are placed in cells using the layout column attribute and by using this attribute we can mention the location of the view object with respect to the column as used in last TableRow Object. The button is placed in the third column of the fourth row.

Android provides you with many layouts for designing purposes:

Linear Layout
Relative Layout
Absolute Layout
Table Layout

What is a Table Layout?

As the name suggests, a table layout arranges the objects in a table format (rows and columns). It can have any number of rows and every row has columns or cells where an object can be placed in each cell. It recommended for most Android beginners to arrange view objects. It linearly adjusts view objects placed in cells in the form of rows. Table layout containers do not display border lines and consist of numerous table row objects with each object defining a row.

Learn how to work with Android layouts at Udemy.com.

The column width is defined by each row with the widest cell in that column.

Table layout has two methods to make the column stretchable or shrinkable. They are setColumnStretchable() and setColumnShrinkable(). When the column is marked as shrinkable, the column width can be shrunk to fit a table into its parent object. When it is marked stretchable, it expands column width to fit any extra space. Total width of the table is defined in the table layout definition. Columns can be both shrinkable and stretchable and in such cases the column size changes to use the available space. The table’s width or height won’t stretch beyond the physical layout. In addition, you can hide columns by using the method set ColumnCollapsed().

One important factor to note is that the table layout’s children cannot specify a layout_width attribute. Width will always be “MATCH_PARENT”, which is described in the parent object. The child object can define a layout_height with a default value for “WRAP_CONTENT” but if the child is TableRow, then height is always the default (WRAP_CONTENT).

Cells must be added to the row in an increasing order both in XML and code. Column numbers are zero based. The number is auto incremented to the next available column. Typically the TableRow is the child of the Table Layout but you can also use any of the view class.

Syntax:

…………

………….

</TableLayout>

Table Row

It is always used inside the table layout and if it isn’t used as table layout child, it will behave like the horizontal LinearLayout. It has two attributes:

Layout_column: It defines the index of column in which the child should be placed.
Layout_span: It defines the amount of columns the child should span. Its value should be greater than or equal to 1.

Syntax:

……….

</TableRow>

</TableLayout>

What are Table LayoutParams?

Layout parameters tell the application’s parent view about location adjustment on the screen. The LayoutParams class defines view height and width. These dimensions are separate every time you use the layout. Layout parameters set the width of the child to “MATCH_PARENT” and height of each child to “WRAP_CONTENT”, only when height is not specified.

Want to learn more? Take a course at Udemy.com.