Welcome to 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

Android Layout Fundamentals

Overview

Chiu-Ki begins by defining a layout as the visual structure for the user interface, organizing the elements into a viewer hierarchy with a specific location.

Android’s layout system allows us to declaratively define elements positions, and we see some examples of different looks we can achieve with only two buttons on a screen.

Basic Layouts

The most common layout is the LinearLayout, which aligns its children in a single direction.

There are two types of LinearLayout: horizontal and vertical.

RelativeLayout positions each child releative to a sibling or a parent.

Chiu-Ki says having nested layouts negatively impacts performance, and using the RelativeLayout is a good way to avoid this situation.

There’s also the FrameLayout, which allows us to put the child views on top of one another. We can draw child elements on top of it and use layout gravity to vary the position.

TableLayout arrange child elements into rows and columns.

Size

There are some basic attributes which are used across all layout types:

• Size
• Margin vs padding
• Gravity

To demonstrate the effect of the size attribute, we look at a hello world example:

<LinearLayout     android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/hello" />

This is XML code for a LinearLayout with a TextView inside it.

Chiu-Ki explains that match_parentmeans it wants to take up as much space as it’s parent. In this case that means the whole screen.

When we run the program we can’t tell how much space the view is taking up because the entire background is white. Something we can do is to set a colored background:

<LinearLayout     android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/hello"
        android:background="#9cf"/>

We can see from running this that the blue background runs across the entire width of the screen.

The height only takes up as much space as the words “hello world” need, because the layou_height attribute is set to “wrap_content”.

Next Chiu-Ki changes the TextView’s layout_width to also be “wrap_content”. We see the blue background only covers the words “Hello world!”.

We can also set a specific size like this:

android:layout_height="100dp"

Dp stands for density-independent pixel and we see a calculation for converting from dp to px.

Chiu-Ki says when Android was first launched it was on a device with 160 dpi.

Android categorizes the screen density into different buckets:

• ldpi (x0.5)
• mdpi (x1)
• hdpi (x1.5)
• xhdpi (x2)
• xxhdpi

We see that double density devices have more pixels per physical area than a normal density device.

Margin vs Padding

Margin and padding are two different ways of adding space around a view.

• android:layout_margin
• android:padding

When an attribute has the word layout in it, that means it’s defined in relation to a parent. So margin is outside of the view, whereas padding stays within the view.

Gravity

There are two types of gravities:

• android:layout_gravity
• android:gravity

Layout_gravity describes the position of the view with respect to its parent. Gravity describes the content within the view itself.

We see examples of both of these with their value set to “center_horizontal”.

Then we see the effect of

android:gravity="center_horizontal|bottom"

Chiu-Ki says we can even mix both types of gravity:

android:layout_gravity="right"
android:gravity="center_horizontal|bottom"

Chiu-Ki then summarizes everything we’ve learned in this module.

Continue to Part 2 – LinearLayout