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.
Android Layout Fundamentals is the 5th course in the Android Learning Path.
Also in this series:
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:
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:
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:
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:
Chiu-Ki also demonstrates the attribute stretchColumns which is used to expand the columns to use all available width:
The final attribute that Chiu-Ki describes is collapseColumns:
We see that we can specify multiple column numbers for these attributes by separating them with commas: