(short jingle)
(typing noises)
All right, now as I mentioned at the end
of the last video, we now are going to work
on the left hand block, and that's going to become
a mirror image of the buttons on the right.
So each button there should have a baseline constraint
to the button on its right, so 7 to 8, but also 8 to 9
and so on down the rows.
So let's start by doing that, so we're gonna start with 7.
We're going to create a baseline constraint for that to 8,
and also, as I mentioned, we want to set up baseline
constraint from 8 to 9.
Because almost all the buttons we want to have
are on the same position, horizontally.
All right then, 4.
We're going to base constrain that to 5.
Then 5, we're going to create the base constraint to 6.
And you can see that I'm not having to move the widgets,
they are moving themselves as I'm doing this.
And then zero, and create a baseline constraint to
this one over here.
Oops, you can see that I actually see that I didn't wait
until it placed correctly.
Now we'll do it again, and reposition that.
This stuff happens sometimes and if I was to drag it
and it didn't work, you just come back and do it again
and it normally fixes itself on the second time.
All right, last one now for the button dot,
we want to basically constraint that to the equal sign.
Okay, so I'm done with the left hand block.
So, next what we need to do, is we need to constrain
the right edge of each button on the first column,
so the left edge of the button to its right.
So it's 7 to 8, 4 to 5 and so on.
Let's go ahead and do that, I'm gonna start with 7,
so 7 to 8,
4 to 5,
1 to 2,
then zero into the dot, period.
Okay, so that's those four done.
Now to line them up vertically, each button in the second
column, starting with 5 and working down, should have its
right edge constrained to the right edge
of the button above it.
Let's go ahead and do that, so starting with the 5,
constrain it to the right of the 8.
We get that step effect as I mentioned before,
but we'll change the mask for that shortly.
And then the dot we'll constrain to the 2.
Oops.
Like so, now we just need to change the margins
to zero again.
So 5, come over here and change the margins to zero.
Same for the 2.
5 to zero, and also same for the dot, change it to zero.
So we've removed the step effect from those as well.
Right, so at this point now, button 8 should be able
to be dragged sideways and on the other buttons
on that side should follow.
Can we just try that?
We can see that they, we've got them all moving nicely.
Now none of the buttons on this side can be dragged
up or down because of the baseline constraints
to their right.
You can't click on 7 and move that up or down
because the way we've just slapped a baseline constraints
which is what we want here.
All right, so the final 2 constraints now we need to do,
is we need to constrain the left edge of button 9
to the guard line, then the right edge of button 8
to the left of button 9, which will fix the left hand
block in place.
So let's start with button 9.
We want to constrain the left edge of button 9
to the guideline.
Like so.
And then what we wanna do is get the right edge
of button 8, selecting that.
We want to constrain that to the left edge of button 9,
not to the guideline.
Like so.
That now fixes the left block in place.
Now I've connected block 9's left edge to the guideline,
I'm gonna just click it.
We want the margin here to be 4 DP.
I'm just gonna target 4 here, press Enter,
and I've already added our constraint from the
right edge of button 8 to the left edge of button 9.
We want to just check that and make sure
that the width there, the margin rather, is 8.
Now the combination of making that 8 and making this one 4,
button 9, means that things line up nicely.
Now right now there's nothing constraining the button group
vertically, so we want to constrain the top of button 9
to the bottom of one of the Edit Text widgets
for margin and weights.
I'm gonna click on that.
Now I'm gonna constrain this to the result.
Like so, and we just want to make sure that we've
got a margin of 8 there which we have got.
But obviously that constrains all the buttons
when I've done that.
At this point now we've got a grid of button that are all
constrained so that they work as a single block of widgets.
It's button 9 as a widget that they
are ultimately constrained to.
We can test this by dragging 9 around.
As it moves, you can see all the other buttons
are actually moving as well.
Now if any buttons get left behind you can check that
they are correctly constrained.
And when you're finished testing, as I have, move them back
close to where you think they should be, and just check
button 9.
So click on that and you wanna check that button 9's
top margin is on 8 DP; mine is currently set on 16,
I'll change that to 8, and also the left margin
should be set to 4.
By doing that that centres all the buttons.
Move the guard line appearing right to the middle
of both of them.
Right, so let's now try running this just to check
that our application still works, that things look okay.
Now obviously we'll start in portrait mode and that
should be fine and nothing should have changed there,
because we haven't been working on that layout.
But it's the landscape that we wanna check
to make sure that it's now working and looking okay.
So, let's move over to landscape.
And you can see that it's looking quite good at the moment,
looks quite centred.
Now there's a widget we haven't constrained,
and that's the operation text view, and that's appearing
at the top of the screen here at the top left hand corner,
which is the default operation
if there isn't any constraints.
And by the way, if you can't see it, tap one of the
operation buttons to give us some text; slash or divide
or a plus so you'll be able to see what it is on the screen.
Again, top left is where our constrained widgets appear,
so we need to obviously go back and constrain them.
However, you probably gonna have a popup (mumbles),
so let's just go back and have a look in Android Studio.
So you can't see it over here, so sometimes it can be
very hard to tell where that widget's gone or a widget
locked back that hasn't any text.
Even selecting it in the component tree may not actually
help in some cases.
Trying to select it can be quite finicky in other words.
Now I've mentioned a tools attribute earlier, and this is
a good use for one of them, the Tools Text.
So, to show you what I mean I'm gonna click on the
component tree, I'm gonna select Operation,
then you can see the (mumbles) by doing that,
that's now showing, and it is still very fitting
to try and connect this to.
So this is where the tools attributes come in handy.
So I've selected that using the component tree,
and then what I want to do is to enter some text down here
in Text, but this one, the one with the tools or the
wrench or the spanner to the left of it.
Now we're going to be very unimaginative
and target Operation.
And the widget in the container will only have a single
character when we run the app, but we're trying to find it,
so a slight longer text will make that a lot easier.
Now you can see obviously the way operations appearing
on the layout now.
And just a reminder here, the text won't appear when
we run the app, tools attributes, the ones that are marked
with a wrench or spanner, are only used in the designer.
So at this point in time, it's time for a challenge.
All right, so the mini challenge here is to provide suitable
constraints for the operation TextView widget that's
appearing over at the top, left hand side of the screen,
when we run the app in Landscape.
Now you can decide exactly where you want it, but my
solution would centre it in the space between the left
of button 7 and the left edge of newNumber.
So that's your challenge, pause the video and see how
you go with that, and when you're ready to see my solution,
come back and I'll go through that.
Pause the video now.
All right, so I'm gonna do what I suggested
in the challenge.
The first thing that we're going to make sure Operation is
selected, we're gonna constrain the Operation text view
to the baseline of button 7.
Let's go ahead and do that.
Like so.
Next we're gonna constrain the right edge to the left edge
of button 7, let's go ahead and do that.
And now we're going to constrain the left edge to
the left edge of newNumber.
And here, like so.
So that's the text view constrained by vertically
and horizontally, and you just gonna check the margins
to make sure that they are centred.
Here you can see we've got 8 DP for the left
and 8 DP for the right, so that's fine.
Now, at this point in time you can replace the tools' text
to better represent the running app.
So we'll go ahead and do that, we'll change the operation,
just use a plus as default, because that obviously that's
going to be more consistent as to what it's going to
look like when running the win, running the app.
So let's now just run the app to make sure that this
actually works, with its constraints and looking correct.
You can see in landscape mode at the top, something now,
you can see that we've got that working nicely.
All right, so we'll go back now to Android Studio.
Now even with the separate layer for landscape mode,
the layer won't fit on something like a Nexus 1
as we've designed it.
We're wasting a lot of space in landscape.
Now rather than trying to reduce all the top margins
to close everything up, it may make more sense to move
the roll buttons and redesign the keypad so that
it's only three buttons deep.
Now one advantage of having a separate layer for the
different orientations, is that you can take advantage
of the extra space available, rather than having to try
and cram everything into a narrow space.
But to one disadvantage as I mentioned, is that you
then have then two layers to maintain
now whenever you make changes
such as adding another button.
All right, so we've now covered a lot of what you can do
with the constraint layout, and if you make a copy
of the XML first, you can experiment with different designs
until you get something you're happy with.
Also, remember that Control + Z, or Command + Z on a Mac,
will undo each successive change that you've made,
so you can keep pressing that to go back to all the
changes that you've made.
And what I am gonna do is finish this section
with a challenge, but first I'm gonna switch over to the
text tab for this layout, and then click on
Reformat Code from the Code menu.
Just so it's nicely formatted and you can see that we
have a message briefly appeared to say
that it was already okay.
So let's have a look at that challenge.
All right, so one thing that's missing
from the calculator app, is the ability to enter
negative numbers for calculations.
And because of the way the operations buttons work,
you can't just use the Minus button to do that.
So the challenge is to add another button to
negate the input number.
Now if there's no number entered, then the button should put
a minus sign in the input, so that any subsequent input
will be negative.
Any time the button's clicked, the number should be negated,
so a negative number becomes positive and vice versa.
For blank input, it should toggle a leading minus sign
on and off.
Now if you want to use text for the button, for example Neg,
then have a look at the font properties at the bottom
of the panel to the right; you may want to make the font
size smaller, so the button can be the same size
as the current ones.
There's no need to centre the button grid, but I will
go through one way to do that in the solution.
And just as a hint, it doesn't involve
using another guideline.
And another hint, one button can be centred and used
as the key button that all others are anchored to.
All right, so I'm going to stop this video here,
and we'll go through my solution to this challenge
in the next video.