Okay, so here's our first simple example UI.
You might recognize this as something similar to Gmail.
How would you go about constructing this UI?
In my situations where you have stacked content like this,
one on top another, it's likely you'll want to use a linear layout.
Now the red toolbar at the top, which we'll go into a in a bit later on in
the course, is going to have a fixed height, and the second view in
the linear layout, whatever that is, should take up the remaining space.
Here you can see if I stretch it out,
the red toolbar remains the same height, but the list expands to fill the space.
So the way we do that is we set a weight of one
and a height of zero dp.
The zero dp height tells us that we aren't using a fixed value here and
it will be worked out later.
Now, below this toolbar is this list and this floating red button here,
which we'll go into, again, later.
Now because these elements overlap each other, we'll want to use a frame layout.
For the list, we use a list view or a cycle view, so that will be the first
child, and it will have a layout width and height of matched parent.
The button will then be the second child, where if a gravity at bottom end,
and a generous layout margin,
something like 16 dp to move it away from the edges.
And in case you're wondering, the frame layout should be the one that has
the zero dip height, and layout weight of one.
Here's another, similar example based on a contacts app, say for
creating a new contact.
Now in this situation you again have a toolbar at the top with
a scrolling section below it.
Since we have a fixed set of form fields, instead of a list view,
we're going to use a scroll view that holds a grid layout.
The grid layout contains a left column with icons which identify the form
of sections and then a right column containing the form fields themselves.
Now when using the scroll view, it can only contain one child view, and
that child should have its height based on its contents.
That's why we use wrap content for the height of the grid layout.
One quick note here.
If we want the toolbar to scroll off the form,
we'd simply move the toolbar inside of the grid view as its first row,
and set its layout column span to two so it fills both columns.
Let's look at one final, more complicated, example.
This resembles an apps detail page in the Play Store.
We can see there's this banner image at the top with an overlayed toolbar
on top of the image.
Below that, there's this scrollable white pane with details of the app.
Now the overall composition is a frame layout because we want the toolbar to
overlay the image banner and the entire screen to be scrollable.
The first child is an ImageView because we want it to be behind everything else.
It has a fixed height, but its width can vary, so we use a scale type of center
crop to ensure that the image itself always covers the entire banner area.
Next is the scroll view which contains a vertical linear layout.
Because we want this to appear in front of the image when scrolling, but
behind the toolbar, the linear layout itself has a white background, but
it's offset by 200 dp using top padding on the scroll view.
This makes the image visible behind it, but
as you scroll, the image becomes obscured by the scroll views background.
The final child of the frame layout is this toolbar
which sits on top of everything else with a transparent background.
Now, when composing this kind of UI, you'll likely want to do some tricks
to slowly move the image at a different rate to scrolling, or
perhaps fade in a background on the toolbar and the title as we scroll.
There's some common techniques that we're going to go through
later in the course on how to go about doing this.
Now finally for the things inside the linear layout, we can use nested layouts
such as another horizontal linear layout for these buttons across here.