Welcome to Part 5 of this review of the Pluralsight course Android Layout Fundamentals by Chiu-Ki Chan.

Chiu-Ki is a mobile developer with a passion in speaking and teaching.

She runs a mobile development company, producing apps such as “Monkey Write” for learning Chinese writing and Heart Collage for snapping photos to stitch into a heart.

Android Layout Fundamentals is the 5th course in the Android Learning Path.

Also in this series:

Part 1 – Introduction
Part 2 – LinearLayout
Part 3 – RelativeLayout
Part 4 – FrameLayout
Part 5 – TableLayout
Part 6 – Choosing the Right Layout

TableLayout

Overview

TableLayout arranges it’s child elements into rows and columns. It’s a specialized form of Linear Layout, with each row (usually) defined by a table row.

In the TableLayout, each element’s layout_width is automatically set to “match_parent”. T

he default height is “wrap_content” but this can be overridden if needed.

Chiu-Ki shows an example for creating a 3 x 2 table. This displays a sushi menu!

The width of the item displaying the name of the sushi item is determined by the item with the longest width. In this example the name “Caterpillar roll” is longer than “Kappa Roll” and so the width of this column is the width of the text “Caterpillar roll”.

If you’ve used HTML tables before, this should look quite familiar.

Spanning and Skipping

Chiu-Ki adds another row with only one TextView, for displaying the title “Sushi”.

We see it aligns with the first (left hand) column. We see that we can change it to align with whichever column we prefer using the parameter layout_column:

android:layout_column="1"

This displays “Sushi” above the middle column. But what if we want it to span across more than one column? We can use layout_span:

android:layout_span="2"

There’s also another way. By putting the TextView outside of the TableRow element.

Shrinking, Stretching and Collapsing

Not many people know what is really in a caterpillar roll, so Chiu-Ki decides to add a description column to the Sushi menu.

There are several things in a Caterpillar roll. When in portrait orientation, there isn’t enough space to describe it on one line.

Fortunately there is the shrunkColumns attribute:

android:shrinkColumns="*"

The * is used like the * in SQL – it means every column. We can change this to specify a specific column if we prefer.

In this lesson we see it looks better when we set this to column number 2.

Except for the height of the row, which is inconsistent with the height being twice as much for column 2. However we can easily fix this:

android:layout_height="match_parent"

Chiu-Ki also demonstrates the attribute stretchColumns which is used to expand the columns to use all available width:

android:stretchColumns="2"

The final attribute that Chiu-Ki describes is collapseColumns:

android:collapseColumns="3"

We see that we can specify multiple column numbers for these attributes by separating them with commas:

android:stretchColumns="0,1,2"

Continue to the final part – Choosing the Right Layout