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

RelativeLayout

Relative Positioning

Chiu-Ki says a lot of people are intimidated by relative layout, because there’s a huge amount of attributes associated with it.

However, we just need to understand that it allows us to relatively position (or align) our views to parent or sibling views.

We begin with this:

We add a Button, and its default position is the top left of the screen, overlapping the EditText view.

To align it to the right we use:

android:layout_alignParentRight="true"

When we add a second button it looks strange because the vertical position is wrong. We fix this with:

android:layout_below="@id/greeting"

Chiu-Ki also shows us the other attributes we can use to position relative to sibling:

• android:layout_above
• android:layout_toLeftOf
• android:layout_toRightOf

Finally we see the 7 attributes for positioning relative to a parent.

Relative Alignment

Chiu-Ki shows us a “center” view with four views around it: North, East, South, West.

This is what we create in this lesson, and we begin with just the center view inside a RelativeLayout:

<TextView
android:id=”@+id/center”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
    android:layout_centerInParent=”true”
android:text=”@string/center”
android:textSize=”48sp”
android:background=”#cf9″ />

With the attribute layout_centerInParent set to true, this view displays in the middle of the relative layout.

By adding the attributes android:layout_above and android:layout_alignLeftwe position the north view.

We position we East view usingandroid:layout_alignRight and android:layout_alignTop.

For the South view we use android:layout_below and android:layout_alignRight.

Finally, to position the West view we use android:layout_toLeftOf andandroid:layout_alignBottom

We also learn about the attribute android:layout_alignBaseline

wheareas layout_alignBottom lines up to the bottom of a view, this aligns to the bottom of the text.

Missing Views

Chiu-Ki asks what happens if some of our views are missing?

To explore this, we start by making the OK button invisible:

android:visibility="invisible"

The position of the Cancel button remains unchanged. But if we change it to gone:

android:visibility="gone"

The cancel button is moved to the left hand side of the screen. This is the default position and the cancel button goes here because it cannot be to the left of a view that is gone.

There is an attribute called layout_alignWithParentIfMissing

This can be set to “true” and if so, the view becomes relative to the parent.

Continue to Part 4 – FrameLayout