Alright, so let's start with the layout
for the calculator app. Now we already
know exactly what it should look like,
because we've seen it running, but you
wouldn't normally get to see a program
running before you'd written it. Now the
obvious thing to do would be to add the
widgets in the order they'll appear on
the screen, but you'll often want to add
a widget that you hadn't originally
decided you'd need. Now to show you how
the layout designer can handle that, what
I'm going to do is 'forget' that I need two
EditText widgets, and then add the
second one afterwards. So as you can see
on screen, I'm in the layout designer, and
if you've got the project pane open,
shrink that to make a bit more room - and
you can see that I've already done that.
So we want an EditText widget at the
top of the screen, and the data entry
widgets are in the section titled Text,
over here, which I can click and open. I
can open this a little bit, just to see a
bit more. Now Android actually provides
quite a few widgets for entering data,
including three for entering numbers. So
we've got Number, Number Signed, as well
as Number Decimal. Now our calculator is
going to allow signed, decimal numbers, so
we have to choose one of the available
ones and modify it slightly. So we're
going to go with the Number Signed. So
we're going to delete, now, the Hello World
TextView, so let's do that. Of course that
was created automatically by Android
Studio when the project was created. And
what we're going to do is drag one of
these widgets, the Number Signed, to the
top of the screen. Now it's going to be
centered eventually, so I'm not worried
about where it's going - anywhere at the
top will do for now. So I'm just going to
put it up the top there. Now this is
actually going to store the results of
our calculations. So I'm going to change
its ID up here, making sure that it's
selected, which it is - change the ID to
result. Press ENTER there, and you can see
the name is also reflected in the left,
under the Component Tree. Next we want to
set a top constraint to the top of the
layout, and left and right constraints to
the edges. Before doing that, though, make
sure that the default margin setting is
set to 8dp. You can see over here that
it is set to 8dp for me, but if for some
reason it's not, change it back to 8dp.
And if Autoconnect
has
already created some of the constraints,
you can just change the margins
yourself manually to 8. So I'm gonna
go ahead and create the constraint from
the result to the top, and also to the
left, and also to the right. And we can
see up here, in the top right-hand
corner in the inspector, that we've got
the correct margins of eight, for
top left and right. Now the other
thing you want to do is make sure that
the widget's set to wrap_content, both
horizontally and vertically - and you can
see that's the case over here. Alright,
now as I mentioned, I'm gonna skip the
second EditText widget. I'm gonna
start dragging buttons now onto the
design, in a rough four by four grid. Now
there's no point, here, worrying about
placing them exactly just yet, and that's
because all the positioning is
ultimately going to be done using
constraints. Now if Autoconnect is on
for you, make sure you turn it off at
this point. And you can see over here,
that my Autoconnect is off because
I've got the slash showing through, or
over the top of the magnet icon,
which of course, is the icon for Auto
connect - so I'm making sure that that's
turned off. And I'm doing that because it
doesn't really do the same thing for
each button, and I want them to follow a
pattern in the way that
their constraints are actually organized.
So I'm gonna drag 16 buttons now, so
I'm gonna click on All over here in
the pallet and then move over, and
start dragging some buttons. Again, it
doesn't matter too much where these
buttons are, because we're going to be
using constraints to actually position
them exactly. So a 4 by 4 grid, as I've
mentioned.
Okay, we're halfway there.
Okay, three to go.
And as you can see now, I've got all of
them on there, and a little bit of a
squeeze, but again, don't worry if they
overlap, or don't line up properly,
because we are going to be fixing that.
And you saw that I turned off Auto
connect for that, and I really do suggest
that you do that - it really doesn't seem
to cope well with a lot of widgets. Al
right, now we want the buttons for the
numbers to be called button 0 to button
9, and if you'd look at the Component Tree
to the left over here, we can see two
things; firstly, there's this little error
bar appearing, and it's complaining that
the View isn't constrained, and that's
because we haven't got any constraints
because we had Autoconnect turned off.
As you can see, that it has actually
named this button 2 3 4 5 6 7 8 9 10 11
through to 16. And that's because
Android Studio automatically appends a
number to the ID, when you put more than
one of the same widget on the screen. Now
you might be tempted, at this point, to
work systematically up or down the
screen changing the IDs,
but you can't set a widget to have an ID
that's already in use. Now you can, of
course, do this any way you want,
but what I'm gonna do is try and change
as few IDs as possible. I'm gonna make
the button text match the IDs that Android
Studio has assigned for us. So I'm gonna go
ahead and change, firstly, the ID
of the first button - button. Click on that.
And I'm going to change the ID of that to
button0, and I'm also going to change
its text to 0. And the Component Tree is
very useful for work like this,
you know, when selecting the buttons at
this stage, because at the moment they
all look the same in the layout. Alright,
so you can see I've changed button zero's
text and ID; button 0 and 0. respectively.
I'm going to work my way through buttons
2 through 9 in the Component Tree,
giving them the correct text. So I'm
going to click on button2, change the
text to 2, button3, 3, 4, 4, 5, 5, 6.
Okay 7, 8, okay, 9. So you
can see we've got the buttons 0 2 3 4 5
6 7 8 9 at the moment. Now we're missing
button1 at the moment. Android Studio
calls the second button, button2, but
didn't create a button1, because when we
added the first button, it didn't
actually know there'd be more. So, what
I'm going to do is change the ID of
button 10, by clicking it. You can change
that to button1. Then we're gonna change the
text to 1 as well. Okay. Alright, so we've
now got the 10 digit buttons, so it's
time to start arranging them correctly.
Now I could do with a bit more room at
the top, because 7 is going to go at the
top left of the button grid. But there's
not enough room to really place it
without overlapping - it's a little bit
tight there. Now there's no reason you can't
overlap buttons when you're creating the
layout, but it does make getting to the
constraint handles difficult. So rather
than moving the buttons down
individually, though, what I can do is
just click, just below the
bottom right button down here, and I can
drag a rectangle out so that it extends
over all the buttons. So I'm gonna do
that, and there's actually no need to
fully enclose the button - just any
part of it will select it - and if the,
basically, if the rectangle includes any
part of one it's going to be selected.
So when all the buttons are selected -
which you can see that the rectangle is
touching all of them now - I'm going to
release the mouse. And you can see now
that we've selected all the buttons, and you
can see that clearly in the blueprint,
but also in the Component Tree. So I'm
going to drag them down now, just to
make a bit more room for what we're
doing - drag it right down towards the bottom. And
you can click anywhere in a blank area
of the Design or Blueprint. If you do that,
that and unselects them, or deselects them -
you can see that's happened there. Al
right, now to lay out the grid,
one of the buttons is going to be the
key button. Now it's that one that's going
to be used to constrain the entire array
of buttons. And I'm going to choose
button 7, which is the one that will be
at the top left. Now you could use either
the button 7 or the slash button, the
forward slash, which will
at the top right - the one that we're
gonna be using for division - but we
haven't named that one yet. So what I'm
going to do is constrain the top of
button seven to the bottom of the Edit
Text widget, and then constrain its left
edge to the left edge of the screen. So I'll
do that. I'm going to click on the seven,
and as I mentioned, I'm going to
constrain it to the bottom of the Edit
Text widget. So I'll do that first. And
then I'm going to constrain its left
edge to the left edge of the screen, like
so. And you can see that it's been placed
automatically, once the constraints are
set, and that's why I haven't been too
worried about trying to place the
buttons accurately.
Alright, the next thing I'm going to do
is constrain the baseline of button 8
the baseline of button 7, and the
left edge of button 8 to the right edge
of button 7. Now when you're doing
things like that, I suggest leaving the
baseline til last. If the buttons get
too close together, then setting the
constraint on the edge can be very
fiddly. Now because the baseline
constraint handles are in the middle of
the widgets, they're actually much easier
to work with when widgets are close
together. So let's do button 8 first. I'm
going to do the button 8 constraint
from its left edge to the right of
button 7. Click on button 8.
Constrain it to the right of 7, as
you can see there. Now if the display
gets a bit messy, which you can see it's
getting a little bit messy from my point
of view now - we've got the eight button
overlaying another number -
don't worry too much about that, that's
okay. As long as button eight is selected,
which it still is, and if for some reason
it isn't, remembering you can still
select it from the Component Tree to the
left. I can set a baseline constraint to
button 7. If it gets hard to click on the
constraint handles, then you may have to
drag buttons around. But it doesn't
really matter how chaotic the display
starts to appear, because you'll get more
and more organized as the constraints
are actually created. So what I'm going
to do now is, come down here and click on
the ab button, which opens up the
baseline constraint, and then I'm
going to constrain this button eight
baseline constraint to button seven.
So I'm gonna click and hold. Come up and
constrain it to button seven, and you can see
it's been moved up for us automatically.
And by the way, as you finish setting
up the constraints for each button,
make sure you do check the margins
to make sure that they're set to 8.
It's easier to do that when while
the button's being selected, rather than
going back and going through all them
individually, later. Alright, so button
nine has a constraint from its left
edge to the right of button eight. So go
ahead and do that. I'm going to click on
button 9, and the left edge of button 9, I'm
gonna constrain to the right edge of
button 8. You can see that's moved over
for us. So you can see that it did move
but it's still selected. And again, as
long as I don't click on anything
else, I can turn on the baseline
constraint handle then drag it to the
baseline of button eight. So I'm gonna go
ahead and do that -
turn on the baseline, and then constrain
it to 8, and you can see that moves up
nicely for us. Now button 4 needs a top
constraint to the bottom of button 7. Now
it might be tempting now, to constrain
the left edge of button 4 to the left
edge of the layout. Really though, we want
the entire array of buttons to work like
a single group. So if we go constraining
each row to the layout, then it won't behave
as a single entity. So instead, what I'm
going to do, is constrain the left edge
of button 4 to the left edge of button 7,
then set the margin to 0 so it lines up.
But let's start, firstly, with button 4.
We click on that, and we want to set
the top constraint to the bottom of
button 7. Do that initially. Then as I
mentioned, we're going to constrain the
left edge of button to 4 to the left
edge of button 7. So I'm going to go
ahead and do that. And you can see at the
moment, looking at it there, it's got a margin
of 8. But we want to change that margin
to zero, so that it lines up directly
under the button ID 7. So I'm gonna
change that to zero, and you can see it's now
lining up and looks quite nice,
particularly in the Design. You can see
over here, that it's alignment
looks nice. And just to show that the
reason that I've done that - if I now
start dragging button 7 around the
screen. So I just click on just button 7,
you can see that as I drag that
around, all four buttons are moving now,
and that's exactly what I wanted to
happen. Alright, I can just set that
back to eight. Now I could have just
changed the margins back to eight,
instead of just dragging it back but I
did a combination of both here, as you
can see. Alright, now button five needs
a left constraint to the right of button
four, and a baseline constraint to it as
well. So let's go ahead and do that. So
button five, constrain the left first to
the right of 4, and then we're going to
do the same thing we've done before with
other buttons. Set the baseline for 4
there, so it lines up, and making
sure the margin of eight is still
correct. And button six is constrained to
button five in the same way. So click
on six, constrain the left edge
first, and then we do the baseline.
Select five to put it on to five
as well, and we're checking that the
margin's still eight as well.
Alright, so button one - well that's a
repeat of button 4. So it's top is
constrained to the bottom of button 4,
and it's left edge to the left edge of
button four, with a margin of zero. So
let's do that.
So button one, constrain the top first.
And then, as we've done previously for
button four, constrain it to
the left edge of that
button, and then change the margin,
the left margin for button 1, to zero,
so that it lines up nicely. And we
can confirm that things are still
looking ok - we can move seven around.
Click on button 7, we can move it - you can
see that everything's moving
nicely. And I can just quickly
change these margins if I want to, to put
seven back where it was, and
consequently, all the other buttons move
as well. Alright, so button 2 is
constrained to button 1 and button 3 to
button 2. So we need the left
constrained to the right of the
destination button and a baseline
constraint as well. So let's do that for
buttons 2 and 3. So button 2 constrained
to the left of button 1, and the baseline
constraint there, making sure the
margin's set to eight, which it is. And
then lastly, button 3 - constrain that
to the right of button 2, and set
our baseline constraint as well. Okay, and
the margin, you can see in the inspector,
is also set to eight. So at this point
now, we've got a nice group of buttons
that I can drag around as a single
object. Again, I can just drag them around
and you can see that all nine buttons
are now moving around nicely. So again,
I'll just change the margins back to
eight so that's sitting in the right
position. Alright, so let's finish the
video here. In the next video, we've still
got some remaining buttons that need to
be changed, and also their text changed. So
we'll start working on that
in the next video.