1
00:00:00,307 --> 00:00:02,691
(upbeat music)

2
00:00:02,691 --> 00:00:05,657
(typing)

3
00:00:05,657 --> 00:00:07,481
At the end of the previous video,

4
00:00:07,481 --> 00:00:10,130
I left you with a challenge to add a new button

5
00:00:10,130 --> 00:00:12,633
to the calculator to allow negative numbers

6
00:00:12,633 --> 00:00:14,907
to be used in calculations.

7
00:00:14,907 --> 00:00:17,019
Now, I'm not gonna show you the slide again

8
00:00:17,019 --> 00:00:19,352
cause you can refer to the end of the last video,

9
00:00:19,352 --> 00:00:22,269
but essentially the thing missing from the calculator app

10
00:00:22,269 --> 00:00:26,817
is the ability to enter negative numbers for calculations

11
00:00:26,817 --> 00:00:29,118
and we talked about adding a button to negate

12
00:00:29,118 --> 00:00:33,701
the current value of what is actually in the edit text.

13
00:00:34,545 --> 00:00:37,714
So for the solution, I'm going to work the landscape layout

14
00:00:37,714 --> 00:00:40,177
because it's got a bit more room horizontally

15
00:00:40,177 --> 00:00:42,512
and will look better in the video.

16
00:00:42,512 --> 00:00:44,311
Now adding the button itself is easy

17
00:00:44,311 --> 00:00:47,684
but it does mess up the centering of the button array.

18
00:00:47,684 --> 00:00:49,441
That's because there are now five,

19
00:00:49,441 --> 00:00:51,205
or will be five buttons across,

20
00:00:51,205 --> 00:00:52,983
so the guideline would run through

21
00:00:52,983 --> 00:00:55,514
the middle of the button, button nine.

22
00:00:55,514 --> 00:00:57,440
Now I could add the new button by dragging one

23
00:00:57,440 --> 00:01:00,169
onto the blueprint, which would work fine.

24
00:01:00,169 --> 00:01:02,324
And we've seen a few attributes of these types though,

25
00:01:02,324 --> 00:01:05,572
so it would be handy if we could somehow create a new button

26
00:01:05,572 --> 00:01:08,876
with all the same attributes already set.

27
00:01:08,876 --> 00:01:11,389
So it turns out we can actually do that.

28
00:01:11,389 --> 00:01:14,350
So if we right-click one of these buttons,

29
00:01:14,350 --> 00:01:16,035
I'm gonna use 'button divide' here,

30
00:01:16,035 --> 00:01:20,285
so right-click it, and choose 'copy from the menu.'

31
00:01:21,708 --> 00:01:22,857
And next we might, we're going to come over here

32
00:01:22,857 --> 00:01:26,940
and right-click on the layout and choose 'paste.'

33
00:01:28,773 --> 00:01:31,751
Now I consistently had problems doing that in Windows.

34
00:01:31,751 --> 00:01:33,590
If the button doesn't paste,

35
00:01:33,590 --> 00:01:37,206
right-click on the constraint layout in the component tree

36
00:01:37,206 --> 00:01:40,006
and paste there, because that worked every time.

37
00:01:40,006 --> 00:01:42,756
But if I open the component tree,

38
00:01:43,760 --> 00:01:44,703
well the component tree is open,

39
00:01:44,703 --> 00:01:45,712
I'll just open the pallettes

40
00:01:45,712 --> 00:01:47,750
so that we can see down the bottom here.

41
00:01:47,750 --> 00:01:49,473
We have got 'button divide two' here,

42
00:01:49,473 --> 00:01:51,065
so it did actually copy,

43
00:01:51,065 --> 00:01:53,124
but because we've copied the button,

44
00:01:53,124 --> 00:01:55,321
all the details relating to that button

45
00:01:55,321 --> 00:01:57,357
have been copied as well.

46
00:01:57,357 --> 00:01:59,563
So in other words, nothing seemed to happen

47
00:01:59,563 --> 00:02:01,323
but that's because the new button was pasted

48
00:02:01,323 --> 00:02:03,748
on top of the one that we copied.

49
00:02:03,748 --> 00:02:05,893
Now we can drag it out of the way to make it visible

50
00:02:05,893 --> 00:02:08,399
and I like to select it in the component tree first

51
00:02:08,399 --> 00:02:09,976
just to make sure you've got the right one.

52
00:02:09,976 --> 00:02:11,726
So I'm gonna do that.

53
00:02:13,041 --> 00:02:15,514
So first thing I'm gonna do first is now come over here

54
00:02:15,514 --> 00:02:17,471
and I'm gonna delete all the constraints using

55
00:02:17,471 --> 00:02:22,471
the 'delete constraints' button for this particular button.

56
00:02:22,764 --> 00:02:24,883
Then I'm gonna set it's ID to 'button neg.'

57
00:02:24,883 --> 00:02:27,939
At the moment it's called 'button divide two.'

58
00:02:27,939 --> 00:02:31,439
(typing) So 'button neg.'

59
00:02:33,407 --> 00:02:36,943
Then I'm also gonna change the text size property to 12SP

60
00:02:36,943 --> 00:02:39,495
just so it better matches the size of the other buttons.

61
00:02:39,495 --> 00:02:43,678
(typing) So text size over here, 12SP.

62
00:02:43,678 --> 00:02:45,839
And we're gonna change the actual text itself

63
00:02:45,839 --> 00:02:50,630
instead of the slash, it's gonna be 'neg.' (typing)

64
00:02:50,630 --> 00:02:52,354
And that's again why I changed the text size

65
00:02:52,354 --> 00:02:54,594
because we've got multiple letters here,

66
00:02:54,594 --> 00:02:58,972
changing it to a smaller size makes it just sort of blend in

67
00:02:58,972 --> 00:03:00,291
with the other buttons a little bit better

68
00:03:00,291 --> 00:03:02,211
in terms of text size.

69
00:03:02,211 --> 00:03:04,099
So to make it part of the grid, we're gonna set

70
00:03:04,099 --> 00:03:07,064
it's baseline constraint to the divide button,

71
00:03:07,064 --> 00:03:08,587
then also constrain it's left edge

72
00:03:08,587 --> 00:03:10,956
to the right edge of the divide button.

73
00:03:10,956 --> 00:03:11,789
So I'm just gonna move this

74
00:03:11,789 --> 00:03:15,388
out of the way a little bit first.

75
00:03:15,388 --> 00:03:17,012
So again, we're going to constrain

76
00:03:17,012 --> 00:03:20,259
the baseline constraint to the divide button.

77
00:03:20,259 --> 00:03:22,018
So I'm gonna go and do what we've done always

78
00:03:22,018 --> 00:03:24,978
for constraining things by baseline.

79
00:03:24,978 --> 00:03:28,354
And do that on the divide, and then also constrain the right

80
00:03:28,354 --> 00:03:30,943
of the neg button to the ...

81
00:03:30,943 --> 00:03:32,356
Sorry the left of the neg button to the right

82
00:03:32,356 --> 00:03:34,784
of the divide button, like so.

83
00:03:34,784 --> 00:03:38,020
Now the buttons are 48DP wide, so we could try

84
00:03:38,020 --> 00:03:41,795
to centre the grid by using a margin of -24DP

85
00:03:41,795 --> 00:03:44,338
for the left constraint of button nine,

86
00:03:44,338 --> 00:03:46,980
but, unfortunately, that doesn't work,

87
00:03:46,980 --> 00:03:48,563
and that's because negative margins

88
00:03:48,563 --> 00:03:50,571
aren't allowed for constraints.

89
00:03:50,571 --> 00:03:52,643
So let's actually have a look at another way

90
00:03:52,643 --> 00:03:54,170
to centre the grid.

91
00:03:54,170 --> 00:03:56,132
And it turns out it's actually quite easy

92
00:03:56,132 --> 00:03:58,122
because we've already got an array of widgets

93
00:03:58,122 --> 00:04:01,872
that are all constrained to the central button nine.

94
00:04:01,872 --> 00:04:05,287
So instead of trying to centre button nine to the guideline,

95
00:04:05,287 --> 00:04:07,893
I'm just gonna centre it in the layout.

96
00:04:07,893 --> 00:04:09,327
But I'm not going to delete the guideline

97
00:04:09,327 --> 00:04:12,512
because it's used to centre the two edit text widgets.

98
00:04:12,512 --> 00:04:14,688
I'm just going to delete the left-hand constraint

99
00:04:14,688 --> 00:04:17,904
from button nine to the guideline there.

100
00:04:17,904 --> 00:04:20,031
So I can start by coming out to button nine,

101
00:04:20,031 --> 00:04:21,447
delete the left-sided constraint,

102
00:04:21,447 --> 00:04:23,723
which is currently constrained to the guideline,

103
00:04:23,723 --> 00:04:24,941
and even though it's close,

104
00:04:24,941 --> 00:04:26,324
you can see when I hover over that,

105
00:04:26,324 --> 00:04:29,261
the little line is hovering and moving up,

106
00:04:29,261 --> 00:04:32,372
is showing in red, linking up to the guideline

107
00:04:32,372 --> 00:04:33,917
telling me that the constraint is on the guideline.

108
00:04:33,917 --> 00:04:36,000
So I'm gonna delete that.

109
00:04:37,376 --> 00:04:38,654
And to delete it, you may have to move

110
00:04:38,654 --> 00:04:42,723
it slightly over to the right to delete it, like so,

111
00:04:42,723 --> 00:04:44,369
and then move it back again.

112
00:04:44,369 --> 00:04:45,202
Well actually we don't need to move it back again

113
00:04:45,202 --> 00:04:49,763
because we're about to constrain again anyway to centre it.

114
00:04:49,763 --> 00:04:50,948
So I've deleted the left-hand constraint

115
00:04:50,948 --> 00:04:53,228
from button nine to the guideline,

116
00:04:53,228 --> 00:04:56,442
and then I'm gonna constrain the left edge of button nine

117
00:04:56,442 --> 00:04:58,273
to the left edge of the layout,

118
00:04:58,273 --> 00:05:00,272
and its right edge to the right edge of the layout.

119
00:05:00,272 --> 00:05:02,029
So let's go ahead and do that.

120
00:05:02,029 --> 00:05:07,029
So left edge of button nine to the left of the layout.

121
00:05:07,082 --> 00:05:09,471
Then the right edge of button nine

122
00:05:09,471 --> 00:05:12,389
to the right edge of the layout.

123
00:05:12,389 --> 00:05:14,653
And you saw that everything went a little bit weird

124
00:05:14,653 --> 00:05:16,381
when I set the left constraint.

125
00:05:16,381 --> 00:05:18,429
The entire block jumped to the left,

126
00:05:18,429 --> 00:05:20,632
and we seem to have lost half the buttons,

127
00:05:20,632 --> 00:05:22,484
but everything became right

128
00:05:22,484 --> 00:05:24,056
when the right hand constraint was set,

129
00:05:24,056 --> 00:05:26,332
so it's actually fine now, as you can see.

130
00:05:26,332 --> 00:05:29,437
And we can see that the nine, six, three, and equal signs

131
00:05:29,437 --> 00:05:32,606
are perfectly in the middle of the layout.

132
00:05:32,606 --> 00:05:34,538
So setting the right-hand constraint first

133
00:05:34,538 --> 00:05:36,024
gives the same behaviour, by the way.

134
00:05:36,024 --> 00:05:37,925
The buttons to the right seem to disappear

135
00:05:37,925 --> 00:05:40,282
off to the right edge of the screen in some cases,

136
00:05:40,282 --> 00:05:41,346
but now that you've seen it

137
00:05:41,346 --> 00:05:44,045
and know that you needn't worry about it.

138
00:05:44,045 --> 00:05:45,415
Now that may or may not happen for you,

139
00:05:45,415 --> 00:05:48,031
you might find that some of your buttons do disappear

140
00:05:48,031 --> 00:05:50,865
on the left or right hand edge of the screen depending

141
00:05:50,865 --> 00:05:54,111
on which side of the constraints you're setting first.

142
00:05:54,111 --> 00:05:56,398
But if that does happen, just continue by setting

143
00:05:56,398 --> 00:05:59,173
the other constraint on the other side of the widget

144
00:05:59,173 --> 00:06:02,278
and things will come right, as they are for me now.

145
00:06:02,278 --> 00:06:05,399
Alright, so now that's caused the entire grid to be centred

146
00:06:05,399 --> 00:06:09,276
as long as the horizontal slider is at 50%,

147
00:06:09,276 --> 00:06:10,564
and obviously we set that to that previously,

148
00:06:10,564 --> 00:06:12,895
so it is on 50%.

149
00:06:12,895 --> 00:06:15,563
And you can't easily see where that's 50% by the way.

150
00:06:15,563 --> 00:06:17,734
We'll click it back so it's on the percentage,

151
00:06:17,734 --> 00:06:19,086
that'll come back again there when you can see

152
00:06:19,086 --> 00:06:22,615
that we're setting on 50%, so that's good to go.

153
00:06:22,615 --> 00:06:24,739
And again, all the other buttons follow what we did

154
00:06:24,739 --> 00:06:27,132
because they're constrained to button nine.

155
00:06:27,132 --> 00:06:28,401
The last thing I'm going to do here

156
00:06:28,401 --> 00:06:32,318
is now drag 'button neg' just to be consistent,

157
00:06:33,784 --> 00:06:38,107
and we want that to be below 'button divide.'

158
00:06:38,107 --> 00:06:38,940
So we're gonna come down here

159
00:06:38,940 --> 00:06:41,886
and just put that below 'button divide.'

160
00:06:41,886 --> 00:06:44,356
That's really where it is in our layout.

161
00:06:44,356 --> 00:06:46,028
Alright, so that's the layout done.

162
00:06:46,028 --> 00:06:49,230
I'm gonna reformat the code before I end the video.

163
00:06:49,230 --> 00:06:50,839
Often it won't need anything changes

164
00:06:50,839 --> 00:06:53,174
but just to be consistent, I'm going to do that.

165
00:06:53,174 --> 00:06:54,862
You can see no lines were needed to be changed there.

166
00:06:54,862 --> 00:06:57,822
And go back to the design tab.

167
00:06:57,822 --> 00:07:00,418
So the XML is now nicely laid out, and again,

168
00:07:00,418 --> 00:07:02,864
the reason I'm doing that, even though in most cases,

169
00:07:02,864 --> 00:07:06,972
Android Studio's doing a good job of keeping reformatted,

170
00:07:06,972 --> 00:07:09,841
is just in case you want to compare your code to mine.

171
00:07:09,841 --> 00:07:11,281
Alright, so in the next lecture what we're gonna do

172
00:07:11,281 --> 00:07:14,321
is create the code to make the neg button work.

173
00:07:14,321 --> 00:07:16,488
See you in the next video.