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

FrameLayout

Chiu-Ki says this is a simple layout which allows us to put views on top of each other.

<FrameLayout
android:layout_width=”match_parent”
android:layout_height=”match_parent”
<View
android:layout_width=”240dp”
android:layout_height=”180dp”
android:background=”#9cf” />
<View
android:layout_width=”180dp”
android:layout_height=”240dp”
android:background=”#c9f” />

It’s not obvious what the hex codes #9cf and #c9f mean here.

But we can improve readability by using resources:

#9cf#c9f

We put this in a file called res/values/colors.xml and Chiu-Ki says this is the same kind of idea as strings.xml

We can use color values “@color/blue” and “@color/purple”.

The FrameLayout doesn’t render anything on it’s own.

The first view outputs a blue background.

The second view is drawn on top of the first view and is purple.

Chiu-Ki says we can also use gravity to move the views around, and we see that we can use multiple values for gravity, with each value separated with a | (the pipe character).

Next we see the effect of margins applied to views within a FrameLayout.

FrameLayout can be used like a picture frame, and we see how to show a tiger frame around a cat picture.

There’s also a foreground parameter:

android:foreground="@drawable/tiger_frame"

With this we don’t need two image views as children. All we need is a FrameLayout with a single ImageView in it.

We also can create non-frame foregrounds. There’s a parameter call forgroundGravity which alters the default fill screen functionality to the placement we want. This displays a ribbon in the top left hand corner:

Chiu-Ki summarizes all of these points at the end of this lesson.