(upbeat music)
(typing)
At the end of the previous video,
I left you with a challenge to add a new button
to the calculator to allow negative numbers
to be used in calculations.
Now, I'm not gonna show you the slide again
cause you can refer to the end of the last video,
but essentially the thing missing from the calculator app
is the ability to enter negative numbers for calculations
and we talked about adding a button to negate
the current value of what is actually in the edit text.
So for the solution, I'm going to work the landscape layout
because it's got a bit more room horizontally
and will look better in the video.
Now adding the button itself is easy
but it does mess up the centering of the button array.
That's because there are now five,
or will be five buttons across,
so the guideline would run through
the middle of the button, button nine.
Now I could add the new button by dragging one
onto the blueprint, which would work fine.
And we've seen a few attributes of these types though,
so it would be handy if we could somehow create a new button
with all the same attributes already set.
So it turns out we can actually do that.
So if we right-click one of these buttons,
I'm gonna use 'button divide' here,
so right-click it, and choose 'copy from the menu.'
And next we might, we're going to come over here
and right-click on the layout and choose 'paste.'
Now I consistently had problems doing that in Windows.
If the button doesn't paste,
right-click on the constraint layout in the component tree
and paste there, because that worked every time.
But if I open the component tree,
well the component tree is open,
I'll just open the pallettes
so that we can see down the bottom here.
We have got 'button divide two' here,
so it did actually copy,
but because we've copied the button,
all the details relating to that button
have been copied as well.
So in other words, nothing seemed to happen
but that's because the new button was pasted
on top of the one that we copied.
Now we can drag it out of the way to make it visible
and I like to select it in the component tree first
just to make sure you've got the right one.
So I'm gonna do that.
So first thing I'm gonna do first is now come over here
and I'm gonna delete all the constraints using
the 'delete constraints' button for this particular button.
Then I'm gonna set it's ID to 'button neg.'
At the moment it's called 'button divide two.'
(typing) So 'button neg.'
Then I'm also gonna change the text size property to 12SP
just so it better matches the size of the other buttons.
(typing) So text size over here, 12SP.
And we're gonna change the actual text itself
instead of the slash, it's gonna be 'neg.' (typing)
And that's again why I changed the text size
because we've got multiple letters here,
changing it to a smaller size makes it just sort of blend in
with the other buttons a little bit better
in terms of text size.
So to make it part of the grid, we're gonna set
it's baseline constraint to the divide button,
then also constrain it's left edge
to the right edge of the divide button.
So I'm just gonna move this
out of the way a little bit first.
So again, we're going to constrain
the baseline constraint to the divide button.
So I'm gonna go and do what we've done always
for constraining things by baseline.
And do that on the divide, and then also constrain the right
of the neg button to the ...
Sorry the left of the neg button to the right
of the divide button, like so.
Now the buttons are 48DP wide, so we could try
to centre the grid by using a margin of -24DP
for the left constraint of button nine,
but, unfortunately, that doesn't work,
and that's because negative margins
aren't allowed for constraints.
So let's actually have a look at another way
to centre the grid.
And it turns out it's actually quite easy
because we've already got an array of widgets
that are all constrained to the central button nine.
So instead of trying to centre button nine to the guideline,
I'm just gonna centre it in the layout.
But I'm not going to delete the guideline
because it's used to centre the two edit text widgets.
I'm just going to delete the left-hand constraint
from button nine to the guideline there.
So I can start by coming out to button nine,
delete the left-sided constraint,
which is currently constrained to the guideline,
and even though it's close,
you can see when I hover over that,
the little line is hovering and moving up,
is showing in red, linking up to the guideline
telling me that the constraint is on the guideline.
So I'm gonna delete that.
And to delete it, you may have to move
it slightly over to the right to delete it, like so,
and then move it back again.
Well actually we don't need to move it back again
because we're about to constrain again anyway to centre it.
So I've deleted the left-hand constraint
from button nine to the guideline,
and then I'm gonna constrain the left edge of button nine
to the left edge of the layout,
and its right edge to the right edge of the layout.
So let's go ahead and do that.
So left edge of button nine to the left of the layout.
Then the right edge of button nine
to the right edge of the layout.
And you saw that everything went a little bit weird
when I set the left constraint.
The entire block jumped to the left,
and we seem to have lost half the buttons,
but everything became right
when the right hand constraint was set,
so it's actually fine now, as you can see.
And we can see that the nine, six, three, and equal signs
are perfectly in the middle of the layout.
So setting the right-hand constraint first
gives the same behaviour, by the way.
The buttons to the right seem to disappear
off to the right edge of the screen in some cases,
but now that you've seen it
and know that you needn't worry about it.
Now that may or may not happen for you,
you might find that some of your buttons do disappear
on the left or right hand edge of the screen depending
on which side of the constraints you're setting first.
But if that does happen, just continue by setting
the other constraint on the other side of the widget
and things will come right, as they are for me now.
Alright, so now that's caused the entire grid to be centred
as long as the horizontal slider is at 50%,
and obviously we set that to that previously,
so it is on 50%.
And you can't easily see where that's 50% by the way.
We'll click it back so it's on the percentage,
that'll come back again there when you can see
that we're setting on 50%, so that's good to go.
And again, all the other buttons follow what we did
because they're constrained to button nine.
The last thing I'm going to do here
is now drag 'button neg' just to be consistent,
and we want that to be below 'button divide.'
So we're gonna come down here
and just put that below 'button divide.'
That's really where it is in our layout.
Alright, so that's the layout done.
I'm gonna reformat the code before I end the video.
Often it won't need anything changes
but just to be consistent, I'm going to do that.
You can see no lines were needed to be changed there.
And go back to the design tab.
So the XML is now nicely laid out, and again,
the reason I'm doing that, even though in most cases,
Android Studio's doing a good job of keeping reformatted,
is just in case you want to compare your code to mine.
Alright, so in the next lecture what we're gonna do
is create the code to make the neg button work.
See you in the next video.