So far we've learned that a linear layout can have a vertical orientation,
or a horizontal orientation.
We've also learned that individual views can have weight values
to fill up the extra space in the parent.
Now we;re going to spend some time learning about
the relative layout view group.
This will help you build even more flexible layouts.
Do remember Ray the relative layout.
He's the dad, and he's represented by this view group here.
He helps the children views, be positioned within this container.
With the relative layout, you can position children relative to
the parent, such as the top of the parent or the bottom of the parent.
The other option is to position children views relative to other children.
Like this.
Let's focus first on the case where views can be positioned relative to
the parent.
For this example, this parent relative that is set to have with a batch parent,
and height of match parent, so it's as big as the device.
The children inside a relative layout, can be positioned
relative to the parent's left, top, right or bottom edges.
This is the code for it, on the child view x amount elements.
For example for the emoji or TextView, you would add these attributes.
The attribute name follows this format android:layout_alignParentTop.
This attribute determines whether the Child view
is align to the parents top edge or not.
So the possible values are true or false.
If it's true, then the view should be aligned to the parent's top edge.
If it's false, then it shouldn't be aligned.
There are attributes for all the other edges as well.
For example alignParentBottom, for aligning to the parent's bottom edge.
There's align parent left, for aligning to the parent's left edge.
And then there's align parent right, for aligning to the parent's right edge.
You can mix and match, and use multiple of these attributes at a time.
Take this image view as an example.
We would set the attribute align parent top to be true,
because it's aligned to the parent's top edge.
It's also aligned to the parent's left and right edges.
So we set left to be true, and right to be true as well.
It's not aligned to the parent's bottom edge, so we set that to be false.
And so the this text view down here,
it's aligned to parent's bottom edge, right edge and left edge.
So alignParentBottom would be true, alignParentLeft would be true,
alignParentRight would be true, but alignParentTop would be false.
In addition to positioning a child at the top portion, or
the bottom portion of the screen, you can also do specific corners.
If we want to position the birthday text view in the top left corner,
we say align parent top to be true, and then align parent left to also be true.
To position a view in the top right corner,
we want to align it to the parent's top edge and right edges.
So align parent top equals true, and align parent right equals true.
For the bottom left corner, we're aligned to the parent's left edge and
bottom edge.
So we say align parent bottom equals true.
True, and a line parent left equals true.
These values are false, and they're false by default, so
you don't need to include them in the XML code.
And then for the very last corner, it's aligned to the parent's right edge and
bottom edge.
So align parent bottom and align parent right are equal to true.
The other two are false.
So we can leave them out of the code.
Believe it or not there's even more attributes that you could set.
You can also center the view horizontally, so
you said, android layout under score horizontal to be true.
And you can also add it to the existing attributes we learned before.
So if this is a line to the bottom, and it's centered horizontally,
it would look like this.
The last one I'm going to show you is layout_centerVertical.
If this is set to true, then it centers the view vertically within the parent.
The reason why this TextView is aligned to the left edge of the parent, even if
we didn't set this value, is because all views that are added to the relative
layout, are positioned by default in the top left corner of the view group.
All of these attributes are called view group layout parameters.
Even though they're declared on the child XML elements,
they're used by the parent view group to know how to position the children.
Thus, they all start with layout underscore.
This also follows the pattern of layout underscore width, and
layout underscore height, which you are already familiar with.
Those two attributes are also view group layout perimeters, because they are used
by the view group parent, in order to position and size the children.
And here's the XML for relative layout and its children.
You can follow along in the link below.
We have an opening relative layout tag, and we have a closing tag at the bottom
here, and all the children are in between.
The width and
height of the RelativeLayout is set to be match_parent.
Since this is the layout for
our whole app, it's going to take up the whole screen.
There are three child texts used inside the RelativeLayout.
The first one is a TextView that says Happy.
The width and height are wrap_content, and we have these additional attributes
to help the relative layout, know where to position this child text view.
We tell it to align it to the parent's right edge, and
to align to the parent's top edge.
So that puts the happy text view in the top right corner of the screen.
For the birthday text view, the width and height are also wrap content.
Then we want it to align to the parent's bottom and left edges.
So the bottom and left edges leads to this corner down here.
This last text view that says, To You, doesn't have any specific
attributes specifying where it is relative to the parent.
All we know is that the width and height should be wrap content.
As I mentioned earlier, if you don't specify where a child view should go,
by default, the relative will add it to the top left corner of the screen.