(upbeat music)
(typing)
Alright, so as I mentioned in the last video,
we've now got a nice group of buttons
that we can drag around as a single object
and what we need to do now is add the IDs of the
remaining six buttons to be changed
and also their text change to show the symbol
for the operation that they're going to be performing
in our calculator app.
So I'm going to start now with, down here, button 11.
We'll make that the divide button.
So we'll call it button divide.
(typing)
The text for that will be a slash.
So next one a button multiply.
(typing)
Multiply. And that's going to be an asterisk or a star.
Next we want a button minus to perform a subtraction.
Button minus. That will be a dash for the minus sign.
We want a button dot so we can enter decimal numbers.
That's going to be numbers with a decimal point
so we can add numbers after the decimal point
so that's button dot and the text for that will be
a period or the dot.
Then we want, also, a button for equals.
(typing)
Button equals and that's going to be equals.
I missed one yet, I need button plus too, of course.
We've got everything else but button plus.
That's for addition, obviously.
So button plus and that will be the plus sign.
Okay, so there's all our buttons.
Now in terms of locations, what we haven't done yet
is we haven't moved button zero.
So let's just move button zero first.
Now button zero comes straight at the top
to the bottom of button one.
So let's start with that.
Straight under button one and its left edge should be
constrained the left edge of button one
as we've done for the other numbers on this site.
So let's go ahead and do that.
We also want to make sure the margin's set to eight,
which it is there.
Which is wrong here because we want to move it over,
so we set that to zero,
so that it fits nicely and snug there.
Alright, so next one is the button dot.
That goes to the right of button zero.
That's this one here. Select that.
Let's go ahead and place that.
We need to do the same baseline constraint
that we've been doing.
The equals sign is next.
The equals is going to be to the right of that
and then plus will be to the right of that.
So, let's do the equals first.
Constrain it to the left.
Set it up from the baseline.
Constrain it to the baseline, like so.
We want another one there, as I mentioned the plus.
I'm going to click on the plus, constrain it to the left.
Then also do the baseline constraint,
to move it up like so.
Alright, so at this point we've got three other buttons
that we need to set now.
We've got button divide. Let's do that one first.
That goes to the right of number nine.
Button divide. Put the constraint on the left there.
Also making sure its still selected.
Do the same for the baseline, like so.
Next we've got the multiply. Let's do that.
That's going to be to the right of six.
Constrain it to the right of six and do the baseline.
Move it to the baseline for six.
The last one, constrain it to the right of three.
This is the minus sign.
We'll do a baseline constraint as well, to the three.
Alright so that's all 16 buttons
that have now been completed.
Now there was a frustrating issue with
previous versions of Android Studio,
but fortunately it seems to have gone.
It's worth mentioning though, partly in case it comes back
and partly because it involves a couple of attributes
that you should know about.
I'm going to select one of the buttons,
in my case I'm going to select the minus button.
That was already selected
cause that was the last one we moved.
You want to expand out the attributes
and I'm going to click on the expanded attributes,
and scroll down here until you get to
mean height and mean width.
Now, by default, mean width used to be set to 88dp,
and that caused the width to keep resetting
if you tried to make the button narrower,
but fortunately you can see here that it's not set
and it's no longer the case.
But if you happen to get problems with widgets
not resizing or resetting after you resize them,
then check out these.
Mean width and mean height in the expanded attributes
to make sure they're not causing you problems.
To a lesser extent, keep an eye on the
max width and max height attributes as well.
I'm not going to change the width of the buttons manually.
because the text that could take
could be resized independently.
You can select large fonts for the display
which could make the text look a bit ugly
if the buttons don't resize as well.
So we want to leave our buttons set to wrap content.
Now, you could change the size to fixed
then size them to 48dp, say,
but bear in mind that font size isn't under
your complete control.
Wrap_content uses smaller button size where possible
you want to change the mean width attribute to 48dp.
We're going to go ahead and do that, and again,
I've got everything selected here.
I've got my minus sign selected here,
so I'm going to come over here to mean width
and I'm going to change that now to 48dp
and press enter.
You can see the buttons moved or sized down by doing that.
Now it would get a bit tedious
changing each button individually,
but what we can do is select them all
and change them all in one go.
Now, I've already shown you how to select all the buttons
by dragging over them.
Another way which can be useful if you've got other
widgets in the way, is to right click button minus,
and then I can actually choose Select
and then Select Same Type.
You can see that's automatically selected
all the other buttons.
Changing the mean width attribute now will set it
for all buttons, but what's happened to mean width?
You can see it's actually disappeared.
Seems to have vanished from the attributes.
Android Studio tries to be helpful,
and once you've changed an attribute it moves up
to the top of the attributes list.
Now, this list is sort of alphabetical,
but arranged in two sections.
Attributes that you changed appear alphabetically at the top
then the list starts again alphabetically
with all the other widgets.
So if you scroll back up to the top now,
you can see we've got our mean width over here
and we're going to go over here and change that to 48dp.
Press enter and you can see
all buttons have now been resized.
The other thing you want to do here is
just make sure the layout width and layout height
is set to wrap content before unselecting them.
You can see here that is the case.
Now if you're setting the same properties
for many widgets at once, what I've shown here
makes life a lot easier.
Not all properties can be set for groups of widgets
at the same time, so although this is a useful feature,
there are times when you just have
to set each one individually.
Just click in anywhere now, any blank part of the layout,
to select the buttons.
Before I move on to add the forgotten widgets,
let's have another look at the componentry to the left.
Although it generally makes no different what order
the widgets appear in here, you can put them
in a more logical order,
reflecting their position on the screen
by dragging them up and down to sort them
into an order that makes sense.
It'll also be easy to find the individual digit buttons
to select them if they appear in numerical order
and they should probably be all together.
So I'm going to drag the widgets around now
just to reorder them.
We've got button zero, I'm going to move button one up here.
We've got buttons zero through nine.
We've got the result text at the top.
Then we've got divide, multiply, minus.
Let's actually move plus up.
Then we've got dot and equals.
Now in this app the order makes no difference
to the way the layout works, but it does reflect
the order that the widgets appear in the xml.
Now if you're using nested layouts then make sure
you don't drag your widget out of its container.
Now that may not mean much now,
but we'll be looking at nested layouts later.
Also, be careful with linear layouts,
because the ordering of the widgets does matter then.
We're going to be looking at nested layouts
and linear layouts later in the course.
Time to suddenly remember that we need two more widgets.
A text view to display the operation
and an edit text to allow new numbers to be entered.
Although you could drag the buttons out of the way
to make more room, there's really no need.
What I'm going to do is place a text view
and assign number in a text in a space below the buttons,
then delete the vertical constraint on button seven.
While I've still got plenty of room on the screen
I'm going to set the left edge of the text view
to be constrained to the left edge of the layout
and it's right edge to the left edge of the edit text.
Let's actually start doing some of this.
So we'll start with the text view, we'll drag one out
and put it down at the bottom of the screen here.
Anywhere, it doesn't really matter.
We also want that sign number in a text we talked about
as well. Just put it down there.
So again, I'm going to set the left edge
of the text view to be constrained
to the left edge of the layout.
So let's start with that,
and the right edge to be to the left edge of the edit text.
I'm also going to constrain the top edge of the text view
to the top of the new edit text.
The top edge is going to be constrained to the top edge
of the edit text, of the new edit text that is.
I'm going to click on that
and you can see that's moved down now.
I want to change the right edge,
and it might involve me moving this fractionally over here
so we can see what we're doing.
We want the right edge of the text view now to be
constrained to the left edge of the edit text.
You can see I've already done that so that's set up.
If I come back and have a look up here in the inspector,
text view here, we've got a constraint on the left edge
of the layout to the right constraint from the text view
is now constrained to the left of the edit view
and the top is also constrained to the top
of the new edit text as well.
We should probably be using the baseline constraint here,
but I've used top so that I can show you another way
to change it later.
I can now constrain the top of this new edit text
to the bottom of the first one we added
called result, and then constrain the top of button seven
to the bottom of this one.
So when I constrain the top of the new edit text
to the bottom of the old one, you can see,
when I do that, the text through an edit text combination
obscure button seven and that makes it difficult
to change the constraint on button seven.
It's certainly possible, but what I'm going to do is
do it the other way around.
So I'm going to undo that change using command z on a Mac
or control z on a PC.
You can see that undoes the last one.
Now what we'll do instead is delete the top constraint
on button seven.
Go over here to button seven and select it then
delete the constraint.
Then what we're going to do is drag a constraint
from the top of button seven to the bottom
of the new edit text.
We're going to do that.
You can see then that the entire square of buttons
moves as a single block and that's
because they're all ultimately constrained to button seven.
So that's pretty cool.
Whatever we constrain button seven to,
the rest of the buttons will follow.
Half of them, or in my case you can see half of them,
are probably off the bottom of the screen,
but don't worry about that.
What we can now do is drag a constraint
from the top of this new edit text to the bottom
of the result edit text
and everything should come back right.
You can see that it's come back.
It should be obvious by now that you don't position widgets
on the screen by dragging them into place.
You do it by creating constraints.
It's these constraints that determine where
the widgets will appear when you run the app.
I should really have assigned more informative IDs
to these two new widgets first,
but I wanted to show you what happens when
you change an ID once the widgets used by something else,
either by constraints in the layout or in code.
I'm going to first start with this new ID,
which I've already got selected,
but click it if it's not selected.
You're going to change the ID of that to new number
New number.
When I press enter I get a dialogue asking if I wanted
to update all xml references and R references,
Java R field references.
Normally I'd answer yes to this,
anywhere the old ID was used it would be
automatically updated with the new ID.
Now that's pretty cool, so why wouldn't you want
to answer yes?
Well if you'd already created the code that used this
layout it would be referring to buttons like
button two or button nine.
Now if you decided to redesign this layout
by deleting all the buttons and recreating them,
button nine may be assigned to the divide button.
When you rename it you don't want Android Studio
updating the references to button nine in your code
to use a new button ID button divide.
So it's a useful feature, but it's also handy
to be able to prevent it from updating everything.
Of course, I could have also avoided any
potential problem by not using names like button nine.
I should probably have abbreviated button to BTN
or something like that so that there was no chance
of a conflict with the default IDs
the Android Studio assigns.
That's worth bearing in mind as it can cause you problems,
so don't start the ID of a widget with the widget name.
I'm going to answer yes to this dialogue.
Then I'm going to go over to the new text view.
We're going to change the ID of that to operation.
Press enter there.
We're almost done at this point.
I'd like the new number edit text widget to be centred
in the layout and the operation text view
to be centred in the space to its left.
Once that's done I'll look at moving all the buttons right
so they're centred in the layout.
First you should really deal with those two text widgets.
Did I say you?
Well that sounds like a mini challenge.
The challenge here is to change the horizontal size
of the new number widget to wrap_content,
if it isn't already,
so that it can expand to store the numbers that are entered,
then set constraints to centre it
horizontally in the layout.
When that's done, centre the operation text view
in the space to the left of new number.
Its size both horizontally and vertically
should be set to wrap_content.
So that's the challenge.
I'm going to end the video here,
so see how you go with that.
In the next video I'll go through and post the solution.
See you in the next video.