(lighthearted music)
Our calculator app looks like it centres
the array of buttons in portrait,
so you can see on the screen there,
but if we move over to the landscape layout,
it's obvious that things aren't centred.
In fact, to looking back in portrait,
we've taken advantage of the fact
that the layout contains a centred widget
that's very close to the width of the buttons.
So, we're able to constrain the key button,
which recall was button seven,
to the new number, F text widget,
and have something that looks pretty central on the screen.
We didn't really centre the buttons though,
and obviously in landscape,
it becomes very obvious that we didn't.
Now, the landscape layout does still work quite well,
and you may not actually even feel that the buttons
should be centred as they look all right where they are.
Now, I tend to agree but it is useful
to know how to centre a group of widgets,
and this is a good opportunity
to look at a couple of ways to do this.
Now, for this particular layer,
there's actually a third approach you could take
and that's using chains,
and these became available with a recent release
of the constraint layout, but there was no support for them
in the Android Studio 2 layout designer.
Now, they're not always appropriate,
which is why I'm showing these other two approaches first,
and, in fact, I'll create a separate video
to show you how to use chains later.
In the next few videos, we're going to have a look
at one way we can centre groups of widgets.
I'm then gonna set you a challenge
to centre them another way,
and if you keep in mind the concept of a key widget
that all the others are constrained to,
then you should be able to work the challenge out.
So, I'm gonna start out with the calculator app loaded
in Android Studio as I've got,
and open the landscape version of the layout for editing,
and I suggest you close down the project pane as well
so that there's more room on the screen,
and again I've done that.
What we're going to do is we're gonna start
by centering the two edit text widgets.
Now, because there's only two of those,
it's easier to then see what's going on.
First though, I'm going to show you guidelines,
which is what we're going to be using
to constrain the widgets to.
Now, guidelines don't appear in the palette of widgets,
but you can place one on the layout
by right-clicking the layout and selecting Helpers,
then come down here and select Helpers,
and I can click on add vertical or add horizontal guideline.
Now, because we wanna centre things horizontally,
we're gonna be choosing the option
to add vertical guidelines.
We can also come up here to the toolbar.
There's an option there
to add a vertical guideline or horizontal guideline.
So, I'm going to click on add vertical guideline
and, by the way, it's easy to see this in the blueprint
because it doesn't show in the designer until you move
the mouse over into the designer side,
but I've got this set up in blueprint mode as you can see,
and, by the way, sometimes when you go to add a guideline,
it doesn't appear, and you can see here
that it didn't appear for me when I did that,
but you can come down here into the Component Tree,
and you can see that it's been added down the bottom,
and you can click on there to select it.
Now, guidelines have widths and properties showing
on the right-hand properties panel
as you can see over here when I've clicked it,
but there's little point changing them,
and that's because they don't behave like normal widgets,
and the documentation which I'll take you to now,
and you can see the link on the screen there,
it actually mentions that vertical guidelines
have a width of zero and the height
of the constraint layout parent,
and horizontal guidelines have a height of zero
and the width of their constraint layout parent.
So, in other words, there's no point altering the layout
width and layout height attributes for a guideline.
In fact, there's no point altering any of their attributes.
The only thing you can change
is how far along the layout they are.
You go back to Android Studio.
So, you can drag them left and right
to position them on the layout.
Now, obviously a horizontal guideline
would be dragged up and down instead,
so although I'm working with a vertical guideline here,
the same thing applies to horizontal guidelines,
just the other way around.
Now, the guideline's got a measure showing
how far along the left edge of the height
we are as a percentage, and if I just drag
that over a little bit, we can see that number
is increasing as I'm dragging it over to the right.
Now, I can also measure from the right edge instead
by clicking on the top of the guideline,
so I'm gonna do that now,
and you can see the number has now changed,
and we're actually now measuring
from the right-hand side to the left.
In fact, each time it's clicked, it switches from left.
I can click on it again and went to right.
I can click on it again, and it's now in percentage mode,
and that's percentage of how far along
from the left-hand side that we're in position
at the moment,
and keep in mind that sometimes these don't work
quite right until you actually move it a little bit.
So, you might have to move the guideline
before this takes effect,
but I'm actually going to move this over now to exactly 50%,
which is a percentage so therefore it's directly
in the middle of the screen.
And, as I mentioned before, I suggest you close
the project pane and work just with the blueprint
'cause that gives you more space to see what's going on.
So, again, if I want this guideline centred, which I do,
we just need to click until we get the percentage showing,
and then move it until it's on 50%,
and we're now directly centred in the middle of the layout.
So, what I'm going to do now is delete
the right-hand constraint of the new number widget,
then I'm gonna constrain it to the guideline instead.
So, I'm gonna come over here, select the new number widget,
gonna delete the constraint which is currently
constrained to the result edit text,
delete that, then I'm gonna constrain it
to the guideline instead as you can see over there.
Now, the result edit text is constrained at the moment
to the right-hand side, but we'll leave that.
What we're gonna do is I'm gonna select that,
and I'm going to now constrain that
to the guideline on its left like so,
and both the new number and result edit text
are now constrained to the guideline.
So, basically centred in their half of the layout
as a result of what we've done.
Now, before I go any further, it's going to be a lot easier
to clear all the constraints on the layout,
and recreate them rather than try
to change the various button constraints,
and that's because if you miss one, it can slow you down
while you try to work out why something's not working.
So, in other words, when you're making a radical change
to a layout, as we're about to do here,
my suggestion is to clear all the constraints
first using the Clear All Constraint buttons on the toolbar,
and this is also a good time to make sure
that auto-connect is turned off.
So, I'm going to come over here.
You can see that auto-connect's turned off,
but I'm gonna click on the Clear All Constraints button,
this one here, to remove all constraints.
Alright, so now what I'm gonna do is I'm gonna recreate
the constraints for the two edit text widgets,
constraining them on their inner edges to the guideline
and also to the top of the layout.
So, let's go ahead and do that, starting with new number.
Constrain it to the guideline,
and also constrain it to the top of the layout,
and I'm also going to constrain result
to the guideline and also to the top.
Now, there's no need to constrain their outer edges,
but you can do that if you want to.
If you decide to do that, set the layout with attributes
to match constraint for each added text
rather than a rep and its core content,
but I'm not gonna do that,
and, in addition, you could use a baseline constraint
to line them up vertically if you prefer
which is what we had before I deleted all the constraints.
Alright, now the margins that I've set
leaves the edit text a little bit close to each other,
so let's actually change
their inner margins to 16 DP instead.
So, I'm gonna go ahead,
and for the new number, edit text change that to 16,
and then for the result, change its left constraint
to 16 as well just so they're a little bit further apart.
Now, at this point, we can't switch to portrait
to check the centering,
and that's because portrait uses a different layout,
and that brings up something that you wanna bear in mind
is if you decide to create different portrait
and landscape layouts for your app,
when you do so, you've got two layouts
to maintain instead of just one.
So, if you can make a single layout work in both modes,
then it does make life a lot easier to do that.
Now, what we can do here is try different devices though,
and I'm gonna see how this looks on another device
by clicking on the option on the toolbar.
Let's just try selecting a Nexus one.
Let's see what that looks like.
So, it looks okay horizontally anyway
because of course the buttons are still dropping
off the bottom of the screen,
but at the moment, we're just considering
the horizontal alignment.
So, that's good.
It's working okay, so lets go back to our Nexus 4.
It's easier to use that because it's going
to be a little bit easier to work with the buttons.
So, to centre the buttons, we need the guideline
to run down the gap
between the button eight and button nine.
So, in other words, there's two groups of buttons,
one on the left-hand side,
and one on the right-hand side of the guideline.
So, we're now going to have a different key button.
So, instead of everything being aligned to button seven,
all the other buttons will take their lead from button nine.
Now, I could use button eight instead.
The important thing is that it's a button at the top
and next to the guideline,
and I find it easier to work with just the blueprint
for things like this, and I've obviously been just using
the blueprint in this video,
but that way, everything's much bigger on the screen,
and we've got more space to work with.
Now, you can also use the plus button over here
if you want to zoom everything up,
which can make creating the constraints a lot easier,
and also collapsing the palette and the Component Tree
gives more space to the screen, or on the screen as well.
So, I'm gonna go ahead and do that.
Close those two off just so we've got
a little bit more space to look at the things
that are zoomed up a little bit more.
Alright, so we gonna split the group of buttons into two,
with button nine on the right-hand side of the guideline
and button eight on the left.
So on the right, each button in the second column,
starting with the slash, will need a baseline constraint
to the button on its left,
and it should also have its left edge constrained
to the right edge of the button on its left.
So, lets start by splitting the two groups of buttons.
I'm gonna get the first, or the right-edge button,
the eight of the buttons
that's starting with nine, six, three and equals,
and move them over to the right-hand side
of the guideline for now.
So, we've now got our groups of buttons
on two different sides.
Now, on the right as I mentioned, each button
in the second column that's starting with the slash here,
that needs a baseline constraint to the button on its left,
and it should also have its left edge constrained
to the right edge of the button on its left.
So, lets go ahead and do that.
We're going to open up the baseline.
Constrain that to the nine,
likewise, for the asterisk, or the multiplication baseline,
and come over here and add that to the six, next one,
and in minus, we're going to do the same,
baseline and constrain it.
Baseline constraint there,
and then the plus, we're going to do the same thing.
Constrain it as you can see there,
and for each of those four buttons as well,
we should have its left edge constrained
to the right edge of the button on its left.
So, a similar thing there.
We're going to click on that and constrain it
for all four.
So, you can see that we've got a baseline constraint
for each of these now,
and we've also got the constraint on the left for each one
constrained to the right of the buttons on its left.
Alright, so next we need to constrain the top edge
of each button in the first column to be 8DP
from the button above it.
So, basically starting with the six
and working down the column.
So, lets go ahead and do that.
So, the six I'm gonna constrain to the nine.
We're gonna make sure we've got a margin of eight
which we can see in the inspector.
The three, we're gonna constrain to the six,
and checking on the DP, we've got 8DP there
showing on the inspector, and the equals sign
I'm also going to constrain to the three
as you can see there.
Okay, so that's all done.
Now, finally, those three buttons, these three buttons here,
the six, the three, and the equals in this case,
they should have their left edges constrained
to the left edge of the button above,
again starting with six.
So, let's do that.
So, with the six, I'm going to left constrain with the nine.
With the three, we're gonna constrain to the six,
and with the equals, we're going to constrain to the three,
but what I am going to do then is also change the margins
for six to zero so that it lines up correctly
for three to zero,
and also the equals to zero as well,
and you saw that they appear to be stepped until
I changed all their left margins to zero,
which I've done now.
So, at this point now, I should be able
to drag the nine button around,
and the other seven buttons will follow with it,
and you can see that that's actually working,
and it's working quite nicely,
so I could have actually done this work
on the left hand side.
So, I could have actually, instead of moving these manually,
which I did, I dragged them over,
I could have done all the work
until they're all constrained together,
then just drag the one button over instead of doing
what I did which was select all eight buttons,
and then we drag them over that way.
Either way would have worked just fine.
Alright, so let's end the video here.
In the next video, we need to start working
on the left-hand side of the block,
and that's going to be a mirror image to what we've done
to the buttons on the right.
So, I'll see you in the next video.