1
00:00:05,390 --> 00:00:10,490
All right let's solve the challenge that I gave to you right at the end of the last video.

2
00:00:10,730 --> 00:00:14,330
So to start off with what we need to do is constrain the left edge of new number.

3
00:00:14,330 --> 00:00:15,530
I'm going to click on that.

4
00:00:15,550 --> 00:00:20,910
Our EditText newNumber and constrain the left edge of that to the left edge of the layout.

5
00:00:24,530 --> 00:00:28,530
and its right edge to the right edge of the layout

6
00:00:32,509 --> 00:00:36,120
So its sizes in both planes should be set to wrap_content already.

7
00:00:36,160 --> 00:00:37,110
And it is in this case.

8
00:00:37,120 --> 00:00:42,820
But if it's not in your version, make sure you change them. And also want to make sure the three margins

9
00:00:42,820 --> 00:00:48,130
are all set to 8, which they are set here as we can see in the Inspector and finally set the horizontal

10
00:00:48,130 --> 00:00:50,750
slider to be set to 50 if it's not all ready.

11
00:00:50,800 --> 00:00:52,580
But again in my case it is set.

12
00:00:52,950 --> 00:00:56,710
Now the operation TextView should also be set to wrap_content.

13
00:00:56,740 --> 00:01:03,730
When I click on the TextView you can see that's set to wrap_content and the slider should be set to 50 which

14
00:01:03,730 --> 00:01:04,440
it is.

15
00:01:05,019 --> 00:01:08,470
And the left or right margin is set to the same value.

16
00:01:08,540 --> 00:01:15,100
We are using 8 but 16 would be OK as well because it's only displaying a single character which might

17
00:01:15,100 --> 00:01:16,550
look a bit lost.

18
00:01:16,560 --> 00:01:20,890
We're going to use the properties of the right hand side to set the text size to a larger size, to 18

19
00:01:20,940 --> 00:01:29,320
sp and also set the bold button just below that, come down here and click on bold and also change this

20
00:01:29,380 --> 00:01:34,370
as I mentioned to 18 sp. Press enter there.

21
00:01:34,720 --> 00:01:39,710
Now we can't see much change at the moment but as both of the EditText widgets also use a text size of 

22
00:01:39,710 --> 00:01:43,930
18sp, this text field would look better at that size.

23
00:01:43,960 --> 00:01:44,990
Now that's looking pretty good.

24
00:01:45,000 --> 00:01:51,310
But before I forget we also want to allow single with decimal numbers things like negative four point

25
00:01:51,310 --> 00:01:52,670
five six seven.

26
00:01:52,780 --> 00:01:57,310
Now the text we've used allows signed numbers but not decimals.

27
00:01:57,310 --> 00:01:59,870
So we need to or we have a change to make.

28
00:02:00,400 --> 00:02:07,140
So when I select a result widget over in the inputs to the right here input type and you can see it's set to number.

29
00:02:07,390 --> 00:02:11,050
signed, now we also want that to be number decimal.

30
00:02:11,050 --> 00:02:14,320
So I'm going to click on this ellipsis button over here.

31
00:02:14,750 --> 00:02:20,100
And you can see that we get a menu that pops up, and we can we can then tick the options we want.

32
00:02:20,110 --> 00:02:21,320
So after coming down here.

33
00:02:21,330 --> 00:02:27,840
and selecting number decimal by checking the box and clicking on OK we can see now that both those

34
00:02:27,850 --> 00:02:30,100
options are in there there's number signed that was there.

35
00:02:30,130 --> 00:02:33,660
And then there's a pipe character than the number decimal.

36
00:02:33,670 --> 00:02:35,570
I want to do the same name for the new number.

37
00:02:35,580 --> 00:02:42,240
I click on that come over here to the ellipsis and add number decimal, or check number decimal as well.

38
00:02:42,270 --> 00:02:44,350
So it's now set to both values.

39
00:02:44,600 --> 00:02:49,740
And if you don't do that you won't be able to use buttonDot to enter a decimal point into your

40
00:02:49,740 --> 00:02:51,210
numbers.

41
00:02:51,210 --> 00:02:54,570
Now there's one last change I want to make to the result EditText widget.

42
00:02:54,570 --> 00:03:00,880
So I'll select that. Now when we run the button click app the soft keyboard appeared automatically on the

43
00:03:00,880 --> 00:03:04,210
screen and let us type into the EditText widget.

44
00:03:04,210 --> 00:03:09,040
Now we don't want users to be able to type into the result widget, that's just there to display the result

45
00:03:09,070 --> 00:03:10,810
of the calculation.

46
00:03:10,810 --> 00:03:15,020
Now the way to prevent that behavior is to use the focusable attributes.

47
00:03:15,340 --> 00:03:19,720
So when I actually expand the list of attributes and scroll down

48
00:03:23,090 --> 00:03:28,200
See here we've got focusable as well as focusInTouchMode.

49
00:03:28,540 --> 00:03:33,830
Now the reason for two properties is that mobile devices can have different input methods.

50
00:03:33,870 --> 00:03:38,940
For example you can have a phone that only works in touch mode, and a tablet that has a physical keyboard

51
00:03:38,940 --> 00:03:42,190
connected, in which case it's not in touch mode.

52
00:03:42,510 --> 00:03:48,810
Actually most modern Android phones support USB On The Go (or USB OTG) so that you can connect an external

53
00:03:48,810 --> 00:03:52,360
keyboard and/or mouse to them. If you do that

54
00:03:52,420 --> 00:03:54,710
they'll actually no longer being touch mode either.

55
00:03:54,990 --> 00:04:01,230
And when a device is in touch mode widgets are not focusable. But there is an exception for widgets that

56
00:04:01,230 --> 00:04:04,920
are designed for text input, like the EditText that we're using.

57
00:04:05,010 --> 00:04:10,340
So we need to set both of these attributes to false to prevent the soft keyboard from appearing when the

58
00:04:10,340 --> 00:04:14,120
user taps the widget or clicks on it with an external mouse.

59
00:04:14,130 --> 00:04:18,140
So I come over here now to focusable and select the dropdown.

60
00:04:18,149 --> 00:04:21,920
You can see that the focusable attribute only shows true and

61
00:04:22,029 --> 00:04:22,680
auto.

62
00:04:22,860 --> 00:04:29,880
So we need to actually type in false for this one. Im going to type in false, press enter but on the other hand

63
00:04:29,880 --> 00:04:34,710
focusableInTouchMode if I click into there I'm just going to expand this out on a bit more so we

64
00:04:34,710 --> 00:04:36,100
can see a little bit better.

65
00:04:37,180 --> 00:04:40,040
Now focusableInTouchMode, you can see that I'm actually clicking here,

66
00:04:41,330 --> 00:04:46,950
uses a tri-state check box and it can be sent to one of three states: a dash means it's set to

67
00:04:46,950 --> 00:04:50,040
the default which it is now; a tick means it's set to true;

68
00:04:50,040 --> 00:04:52,230
and if it's empty, that's false.

69
00:04:52,320 --> 00:04:54,470
But unfortunately as you can see here it doesn't work.

70
00:04:54,480 --> 00:04:55,810
It's actually a bug.

71
00:04:56,210 --> 00:05:00,390
Now it's a bug that's been present for quite a while actually since Android studio 2.3.

72
00:05:00,630 --> 00:05:05,370
And by the way I have mentioned a few bugs so far, but don't let that put you off Android Studio.

73
00:05:05,580 --> 00:05:10,170
Remember that this layout designer is just a convenience so that you don't have to top in loads of XML

74
00:05:10,170 --> 00:05:16,640
In the first version of this, course a few years ago, that's how we created the layouts - by typing in the XML.

75
00:05:16,650 --> 00:05:20,410
So things have certainly come a long way and obviously over a time will get even better.

76
00:05:20,790 --> 00:05:23,530
But in our case now, what can we do about this bug?

77
00:05:23,750 --> 00:05:24,610
Well the work.

78
00:05:24,630 --> 00:05:27,930
the work around is to use the tools property instead.

79
00:05:27,930 --> 00:05:32,070
Now you may have noticed that some of these attributes seem to appear twice, with one version having

80
00:05:32,070 --> 00:05:35,300
a spanner (or wrench, in American) next to them.

81
00:05:35,610 --> 00:05:41,610
One example is the text attribute, which we can see when I collapse the attributes. We've got text and we've

82
00:05:41,610 --> 00:05:46,120
got this one with the spanner or the wrench, of the same name.

83
00:05:46,140 --> 00:05:50,060
So these are tool attributes, that only apply inside the layout designer.

84
00:05:50,280 --> 00:05:54,930
So that means that changing these, the ones with the wrench or the spanner, they've got no effect

85
00:05:54,930 --> 00:05:56,030
when you run the app.

86
00:05:56,120 --> 00:06:02,570
So just to show you what I mean: in the text you can type in say negative eight seven six five point

87
00:06:02,570 --> 00:06:09,320
four three, and you can see that immediately shows up in the actual field itself in the result Edit

88
00:06:09,310 --> 00:06:11,770
EditText.  If I actually delete that

89
00:06:11,870 --> 00:06:21,160
again, and come down here to the text one, with the spanner or wrench, and Press enter, that's still shows.

90
00:06:21,160 --> 00:06:27,110
But the difference here is that the number in the second one, in this second field - the one with the

91
00:06:27,140 --> 00:06:30,860
wrench or the spanner, that won't appear when we run the app.

92
00:06:30,900 --> 00:06:33,970
So it's basically there to help you with a visual display.

93
00:06:33,990 --> 00:06:41,100
So we go back to the focusableInTouchMode attribute in the extended list, we can come up here and

94
00:06:41,110 --> 00:06:45,760
we can click on this little spanner to the right hand side, and you can see when I've done that, that's

95
00:06:45,760 --> 00:06:50,790
opened up another one but just below. Now this one doesn't suffer from the same bug.

96
00:06:50,820 --> 00:06:55,170
I mean come down here we can click on this and you can see that works you've got a checkbox.

97
00:06:55,170 --> 00:06:59,470
Now and we want to turn it off to make it false.

98
00:06:59,700 --> 00:07:03,290
So this one doesn't suffer as you can see from the same bug.

99
00:07:03,760 --> 00:07:04,260
We're able to tick it

100
00:07:04,260 --> 00:07:08,980
And obviously because it's the wrench or the spanner version it's not going to have any effect when

101
00:07:08,980 --> 00:07:10,140
we run the app.

102
00:07:10,140 --> 00:07:13,710
But what we can do is come over here and click on the text tab.

103
00:07:14,920 --> 00:07:21,520
And you see we've got tools colon focusableInTouchMode equals false. I can change that to Android.

104
00:07:21,520 --> 00:07:26,100
So in other words I'm up here and change that to Android.

105
00:07:26,790 --> 00:07:30,460
We're going to come over here and set that to true as well.

106
00:07:31,060 --> 00:07:37,020
could have left that as it was. I'm going to take the opportunity now to just delete the text as well, because we don't need

107
00:07:37,020 --> 00:07:38,860
that anymore.

108
00:07:40,060 --> 00:07:46,080
Alright so now that we've done that though, I could come back to design you can see we've now got a check box in the

109
00:07:46,080 --> 00:07:51,570
focusableInTouchMode, in the first one not in the tools one, and I can actually tick that again now and turn

110
00:07:51,570 --> 00:07:54,410
the effect off and actually make it false.

111
00:07:54,450 --> 00:07:57,490
So that's a quick way to work around this particular bug.

112
00:07:57,540 --> 00:08:02,630
And by the way if I click it the third time, you get the dash back again and you won't be able to change

113
00:08:02,650 --> 00:08:06,800
back again without using the tools attribute again, so on that now you can say that it's not working.

114
00:08:07,610 --> 00:08:10,980
But then I can do the same thing here and come back under the tools version of it.

115
00:08:12,610 --> 00:08:21,270
back into design, into text rather, then change tools to Android, and leave it at false, because that's ultimately

116
00:08:21,270 --> 00:08:29,060
what we want it set to be, and that's now working. then I can come over here and close down the tools version.

117
00:08:29,070 --> 00:08:29,340
All right.

118
00:08:29,340 --> 00:08:34,740
So at this point now we've disabled both focusable and focusedableInTouchMode for the result

119
00:08:34,940 --> 00:08:36,270
EditText.

120
00:08:36,330 --> 00:08:41,490
Now we could do the same with the newNumber EditText widget. Whether to allow the soft keyboard to be used

121
00:08:41,510 --> 00:08:46,720
with is the sort of design decision you have to make when creating your user interface.

122
00:08:46,740 --> 00:08:51,990
In other words does it make sense to restrict the entry of numbers to our buttons only. Possibly would

123
00:08:51,990 --> 00:08:52,550
be the answer.

124
00:08:52,560 --> 00:08:59,010
But if someone is using an external keyboard, they would probably be a bit upset, if they went to, if they have

125
00:08:59,010 --> 00:09:01,350
to touch the screen to use our calculator.

126
00:09:01,530 --> 00:09:04,160
So focusable should almost certainly be set for this widget.

127
00:09:04,160 --> 00:09:10,910
This is the newNumber widget and I've also decided to allow numbers to be entered using a soft keyboard

128
00:09:11,330 --> 00:09:16,260
that way users can use its backspace key to correct typing errors if they want to.

129
00:09:16,490 --> 00:09:22,130
So I'm also going to leave focusable and focusableInTouchMode unchanged for this widget.

130
00:09:22,400 --> 00:09:27,100
And if you don't want to allow the on-screen keyboard to be used you now know how to disable it.

131
00:09:27,150 --> 00:09:33,920
Right now we just need to line up the buttons. So to do that what we need to do is delete the left constraint

132
00:09:34,220 --> 00:09:39,050
for button7, then set it to the left edge of newNumber instead.

133
00:09:39,590 --> 00:09:45,950
So I can come over here and get this constraint for number 7, our digit 7, and just go back to our normal mode there

134
00:09:45,960 --> 00:09:50,340
we can see that we've got the left constraint, which is to the left screen left of the layout.

135
00:09:50,600 --> 00:09:52,670
So I'm going to delete that.

136
00:09:53,000 --> 00:09:58,320
And then what we want to do is set the left constraint to the left edge of newNumber instead.

137
00:09:58,310 --> 00:09:59,420
So let's go ahead and do that.

138
00:10:02,360 --> 00:10:08,490
Like so. And the other thing we want to do is make sure that we change the margin, the left margin

139
00:10:08,490 --> 00:10:12,390
now, for button7 to zero. We'll go ahead and do that.

140
00:10:12,390 --> 00:10:13,670
Otherwise it's going to be a little bit off.

141
00:10:13,710 --> 00:10:17,340
You can say now that it's fitting in quite nicely.

142
00:10:17,340 --> 00:10:20,840
Now for this particular layout that's all we need to do.

143
00:10:20,850 --> 00:10:26,280
We haven't really centered the button array, but as it's constrained to something that is centered and it

144
00:10:26,280 --> 00:10:27,420
is the same width.

145
00:10:27,630 --> 00:10:29,130
It all works fine.

146
00:10:29,140 --> 00:10:36,000
Now if I switch the layout to landscape it'll still look fine - well fine horizontally, It's not as good vertically

147
00:10:36,030 --> 00:10:37,650
but we'll come back to that later.

148
00:10:38,740 --> 00:10:44,370
And again, just having a look to see what this looks like and come up here and switch to landscape.

149
00:10:45,000 --> 00:10:47,430
So we can see that it does still look OK.

150
00:10:47,650 --> 00:10:52,870
Well I guess, to be fair, fine horizontally, as I mentioned, not so good vertically but whe'll actually

151
00:10:52,870 --> 00:10:57,350
come back to that. I'm just going to go back to portrait again.

152
00:10:58,300 --> 00:11:02,840
We haven't centered the array of buttons as I've said. Now because we've only got four buttons across

153
00:11:02,850 --> 00:11:07,980
it works fine, but if we added more columns of buttons then it wouldn't be centered any longer.

154
00:11:07,980 --> 00:11:12,940
I'm going to come back to that at the end of this section, and look at how to center groups of widgets.

155
00:11:12,970 --> 00:11:18,640
Now though, there is just one more thing I want to discuss before we move on to writing the code for the calculator.

156
00:11:18,810 --> 00:11:23,070
Now in the previous videos we removed the text from the text view in code.

157
00:11:23,140 --> 00:11:27,580
It's easy to do, as you saw, and it's often a good idea to leave text in the layout.

158
00:11:27,970 --> 00:11:33,950
But in this one I'm going to clear the text in operation, then try to change its vertical constraint.

159
00:11:34,000 --> 00:11:36,150
So it's aligned on its baseline.

160
00:11:36,190 --> 00:11:43,530
It does look a little bit high when aligned to the top there. I'm going to come over here to our TextView. This

161
00:11:43,530 --> 00:11:45,860
is for our operation widget.

162
00:11:45,970 --> 00:11:47,510
We're going to delete the text, as I mention

163
00:11:51,110 --> 00:11:53,440
and you can see that once I press enter there.

164
00:11:53,660 --> 00:11:59,230
And the same thing would happen if I click back in the design, in the design or blueprint, the widgets shrinks

165
00:11:59,240 --> 00:12:01,970
and that's because it's set to wrap_content.

166
00:12:01,970 --> 00:12:03,940
In fact there isn't any content.

167
00:12:04,130 --> 00:12:10,710
So I'm going to start by deleting the vertical vertical constraint and you can say that it disappeared

168
00:12:10,710 --> 00:12:14,750
from the inspector at the right, and I could have deleted it from there as well.

169
00:12:14,790 --> 00:12:21,050
In fact now that it's so small, it's probably easier to use the inspector to delete the constraints.

170
00:12:21,330 --> 00:12:27,870
But creating a baseline constraint that we want now is just about impossible. And it is possible, but it's

171
00:12:27,870 --> 00:12:34,740
pretty hard to try and get over there and get to touch the the baseline button now, which of course makes

172
00:12:34,740 --> 00:12:36,040
the handle appear.

173
00:12:36,220 --> 00:12:41,420
Now I could resize the widget, or put some text in temporarily, to make it wide enough, or I could

174
00:12:41,430 --> 00:12:43,130
even edit the XML.

175
00:12:43,290 --> 00:12:48,180
There was another way though. It's not necessarily easier than putting some text in temporarily but it's

176
00:12:48,180 --> 00:12:49,770
useful to know about it.

177
00:12:50,250 --> 00:12:55,680
Now the constraints appear in the attributes, so I can expand the attributes using the double arrow.

178
00:12:55,770 --> 00:13:01,770
As I've been doing in the course, and then I can expand ... back up to the top of the list and I

179
00:13:01,770 --> 00:13:07,740
can expand constraints as you can say here. Remember that the list is alphabetical, but properties that

180
00:13:07,740 --> 00:13:10,220
have been used are shuffled to the top of the list.

181
00:13:10,350 --> 00:13:16,110
So it might help if I make this still a little bit wider, so that we can see the names of all of these

182
00:13:16,530 --> 00:13:22,680
basically the full names of each constraint. The one we want is the baseline_toBaselineOf

183
00:13:23,190 --> 00:13:26,830
this one here, baseline_toBaselineOf.

184
00:13:26,890 --> 00:13:28,600
Now the names are very descriptive.

185
00:13:28,650 --> 00:13:31,250
So we can see the constraints that we've already set.

186
00:13:31,500 --> 00:13:34,390
So the left one, start, is set to the left of the layout.

187
00:13:34,460 --> 00:13:40,460
This one here, start set to parent. And the right one, and it's constrained to the left of the new numbers.

188
00:13:40,470 --> 00:13:41,700
as you can see up here.

189
00:13:41,700 --> 00:13:47,780
Now we want line the baseline of the textView to the baseline of new number.

190
00:13:48,030 --> 00:13:53,690
So you could just put its ID, @+id/newNumber, as the widget to constrain the baseline

191
00:13:53,820 --> 00:13:55,530
to, and even easier.

192
00:13:55,770 --> 00:13:58,320
You just select newNumber from the list. So we can come over here

193
00:14:02,550 --> 00:14:08,560
select newNumber, and you can see immediately the alignment actually kicked in straight away.

194
00:14:08,600 --> 00:14:11,510
And we saw that being drawn up on the screen.

195
00:14:11,640 --> 00:14:14,740
So the two new widgets have been added to the bottom of the component tree, by the way.

196
00:14:14,730 --> 00:14:17,000
So I'm going to come back over here and make a bit more space

197
00:14:22,690 --> 00:14:24,260
I'm going to drag them up

198
00:14:24,320 --> 00:14:27,950
So they appear in the list in the order matching the placement in the layout.

199
00:14:28,130 --> 00:14:29,860
That should really be a result.

200
00:14:30,260 --> 00:14:36,030
Operation.

201
00:14:36,180 --> 00:14:46,880
And then you newNumber. Like so. Get back into the landscape now just have a bit of a look.

202
00:14:47,180 --> 00:14:51,360
You can see that the buttons are far too close to the bottom of the screen.

203
00:14:51,440 --> 00:14:56,690
There's a fair bit of space between the widgets vertically, so we could start shuffling them up or reducing

204
00:14:56,690 --> 00:14:58,100
their top margins.

205
00:14:58,100 --> 00:15:03,620
Now sometimes you might have to do that, but Android's got another solution and it's possible to create

206
00:15:03,620 --> 00:15:09,770
separate layouts for different screen sizes; and landscape counts as a different screen size to portrait.

207
00:15:10,140 --> 00:15:10,560
Right.

208
00:15:10,560 --> 00:15:12,150
Let's finish the video here.

209
00:15:12,350 --> 00:15:17,420
Now that we've identified that these buttons are too close, in the next video we'll spend a bit of time fixing

210
00:15:17,420 --> 00:15:23,320
that problem, so that things look right for this interface; both in portrait and landscape mode.

211
00:15:23,320 --> 00:15:24,500
So see you in the next video.