1
00:00:04,689 --> 00:00:06,400
Alright, so let's go through the

2
00:00:06,400 --> 00:00:08,770
solution to the problem that we talked

3
00:00:08,770 --> 00:00:11,040
about at the end of the last video.

4
00:00:11,040 --> 00:00:13,900
So the widgets grown as much as it needed,

5
00:00:13,900 --> 00:00:16,000
and that's because there's no constraint

6
00:00:16,000 --> 00:00:18,460
to prevent it from doing so, and because

7
00:00:18,460 --> 00:00:21,070
also it's set to wrap_content. Now if we

8
00:00:21,070 --> 00:00:22,270
didn't have the buttons on the screen,

9
00:00:22,270 --> 00:00:24,580
that would probably be OK because we

10
00:00:24,580 --> 00:00:26,650
could make it scrollable, but we really

11
00:00:26,650 --> 00:00:28,300
don't want it going behind the buttons

12
00:00:28,300 --> 00:00:30,910
as it's doing right now. So to fix it, we

13
00:00:30,910 --> 00:00:33,460
need to constrain its' bottom edge. Now

14
00:00:33,460 --> 00:00:35,770
ideally, I'd have done that first and

15
00:00:35,770 --> 00:00:37,719
that's because now I can't constrain the

16
00:00:37,719 --> 00:00:40,149
bottom edge to the buttons. The edit text

17
00:00:40,149 --> 00:00:42,609
widget's in the way. Now it's sometimes

18
00:00:42,609 --> 00:00:44,289
possible if the bottom constraint

19
00:00:44,289 --> 00:00:46,329
handles visible, but even then it's very

20
00:00:46,329 --> 00:00:49,179
fiddly. So it's generally a good idea to

21
00:00:49,179 --> 00:00:52,120
set constraints before adding content. It

22
00:00:52,120 --> 00:00:54,129
may be possible to resize it by dragging

23
00:00:54,129 --> 00:00:56,859
the resize handles up the screen, but

24
00:00:56,859 --> 00:00:58,719
sometimes the resize handle isn't

25
00:00:58,719 --> 00:01:00,729
available either - they're off the bottom

26
00:01:00,729 --> 00:01:03,370
of the screen. So what I suggest you do

27
00:01:03,370 --> 00:01:06,159
here, is to delete the text, set the

28
00:01:06,159 --> 00:01:08,650
constraint, then paste the text back in,

29
00:01:08,650 --> 00:01:11,020
and that would ordinarily be the easiest

30
00:01:11,020 --> 00:01:13,840
way to sort this out. However, it doesn't

31
00:01:13,840 --> 00:01:15,730
let me demonstrate how match_constraint

32
00:01:15,730 --> 00:01:17,860
works quite as effectively as what I'm

33
00:01:17,860 --> 00:01:19,810
going to do. So in other words, I'm not

34
00:01:19,810 --> 00:01:21,790
going to do it the easy way. So what I'm

35
00:01:21,790 --> 00:01:23,050
going to do instead, is change the

36
00:01:23,050 --> 00:01:25,780
vertical sizing to fixed. So I'm making sure

37
00:01:25,780 --> 00:01:28,720
the editText is selected. I'm going to

38
00:01:28,720 --> 00:01:30,370
click on these vertical lines until the

39
00:01:30,370 --> 00:01:32,020
straight lines appear, on the inner lines

40
00:01:32,020 --> 00:01:34,300
I should say, til the vertical lines

41
00:01:34,300 --> 00:01:36,220
appear, or the straight lines appear,

42
00:01:36,220 --> 00:01:39,550
which is fixed, and if it doesn't shrink

43
00:01:39,550 --> 00:01:41,530
enough, which it hasn't in my case, you

44
00:01:41,530 --> 00:01:43,840
need to also change the layout_width. So

45
00:01:43,840 --> 00:01:47,080
if we change our layout_height to 200 dp,

46
00:01:47,080 --> 00:01:49,600
that should be enough for us to do what

47
00:01:49,600 --> 00:01:52,720
we need to do, and press Enter. And you

48
00:01:52,720 --> 00:01:54,340
can see now that we've got some space

49
00:01:54,340 --> 00:01:56,260
between the bottom of the editText and

50
00:01:56,260 --> 00:01:59,080
the buttons. In other words, the bottom

51
00:01:59,080 --> 00:02:01,270
constraint handle's now visible. Alright,

52
00:02:01,270 --> 00:02:03,490
so at this point we can set the bottom

53
00:02:03,490 --> 00:02:05,590
constraint of the editText to the top

54
00:02:05,590 --> 00:02:07,810
of the buttons. Now it doesn't really

55
00:02:07,810 --> 00:02:09,878
matter which button we choose, but it

56
00:02:09,878 --> 00:02:11,769
sort of seems logical to use the Cancel

57
00:02:11,769 --> 00:02:14,260
button. Now the OK button's already

58
00:02:14,260 --> 00:02:16,630
constrained to Cancel, so that sort of

59
00:02:16,630 --> 00:02:18,250
makes the Cancel button a,

60
00:02:18,250 --> 00:02:20,380
sort of, key widget. So for that reason,

61
00:02:20,380 --> 00:02:22,090
I'm going to constrain the bottom of the

62
00:02:22,090 --> 00:02:24,160
edit text widget to the top of the

63
00:02:24,160 --> 00:02:26,770
Cancel button. Now remember that you have

64
00:02:26,770 --> 00:02:29,230
to drag to the constraint handle on the

65
00:02:29,230 --> 00:02:31,810
destination widget. In previous versions

66
00:02:31,810 --> 00:02:33,430
of Android Studio you could just drag to

67
00:02:33,430 --> 00:02:35,440
a point anywhere along the edge, but

68
00:02:35,440 --> 00:02:37,270
that's no longer the case. So I'm just

69
00:02:37,270 --> 00:02:38,530
going to drag from the bottom of the

70
00:02:38,530 --> 00:02:41,770
edit text, drag over to the top of the

71
00:02:41,770 --> 00:02:44,080
Cancel button, and you can see that our

72
00:02:44,080 --> 00:02:47,680
edit text has now moved. Now that I've

73
00:02:47,680 --> 00:02:49,360
done that, it's easier to see why I had a

74
00:02:49,360 --> 00:02:51,250
problem, why I had problems a minute ago.

75
00:02:51,250 --> 00:02:53,620
I set the height of the edit text widget

76
00:02:53,620 --> 00:02:55,780
to wrap_content and as soon as I set it

77
00:02:55,780 --> 00:02:58,650
back to wrap_content again,

78
00:02:58,650 --> 00:03:01,510
we end up having the same problem and

79
00:03:01,510 --> 00:03:03,190
that's because the widget now grows down

80
00:03:03,190 --> 00:03:05,830
past the buttons again. Now I've

81
00:03:05,830 --> 00:03:07,330
mentioned earlier in this section that

82
00:03:07,330 --> 00:03:09,730
the match_constraints setting was like

83
00:03:09,730 --> 00:03:12,280
match_parent, but that it's different

84
00:03:12,280 --> 00:03:15,100
because it respects constraints. Now as

85
00:03:15,100 --> 00:03:16,570
you can see with what I've done, wrap

86
00:03:16,570 --> 00:03:19,170
_content doesn't respect constraints.

87
00:03:19,170 --> 00:03:21,730
What we really want here is match

88
00:03:21,730 --> 00:03:24,190
_constraint instead. Now I'm going to

89
00:03:24,190 --> 00:03:25,780
click on the vertical inner lines twice

90
00:03:25,780 --> 00:03:27,489
to set the height to match_constraint,

91
00:03:27,489 --> 00:03:29,560
or I could just as easily have

92
00:03:29,560 --> 00:03:30,790
come here and selected match

93
00:03:30,790 --> 00:03:31,959
_constraint. But I'm going to do that

94
00:03:31,959 --> 00:03:34,750
by clicking that twice, from fix and then back

95
00:03:34,750 --> 00:03:37,000
to match_constraint and notice that when

96
00:03:37,000 --> 00:03:39,640
I've done that, we've now got some space

97
00:03:39,640 --> 00:03:42,730
between the bottom of our widget and the

98
00:03:42,730 --> 00:03:45,160
top of the buttons. Now I also want to

99
00:03:45,160 --> 00:03:47,079
make sure now that the width itself is

100
00:03:47,079 --> 00:03:48,670
set to match_constraint as well, so I'm

101
00:03:48,670 --> 00:03:50,910
going to go ahead and do that here,

102
00:03:50,910 --> 00:03:53,140
because that's what we want here. In

103
00:03:53,140 --> 00:03:55,360
landscape mode, the edit text can get

104
00:03:55,360 --> 00:03:58,360
wider rather than being a fixed width. So

105
00:03:58,360 --> 00:04:00,190
as you can see here, the match

106
00:04:00,190 --> 00:04:02,920
_constraint has fixed this problem. Now if

107
00:04:02,920 --> 00:04:05,079
you hadn't already guessed, I used wrap

108
00:04:05,079 --> 00:04:06,280
_content there

109
00:04:06,280 --> 00:04:08,650
deliberately. So if you're used to the

110
00:04:08,650 --> 00:04:10,989
earlier layouts in Android, then you'll

111
00:04:10,989 --> 00:04:13,030
automatically set wrap_content

112
00:04:13,030 --> 00:04:15,310
out of habit. It's a very descriptive name

113
00:04:15,310 --> 00:04:17,529
for what it does and frankly, old habits

114
00:04:17,529 --> 00:04:18,478
die hard.

115
00:04:18,478 --> 00:04:20,649
Alright so it's coming along nicely

116
00:04:20,649 --> 00:04:22,750
and it's taking far longer to explain

117
00:04:22,750 --> 00:04:25,390
than it would take to do it, but

118
00:04:25,390 --> 00:04:27,010
hopefully it all makes sense and you can

119
00:04:27,010 --> 00:04:29,740
see how the constraints work. As long as

120
00:04:29,740 --> 00:04:31,849
you're patient and wait a second for the handles

121
00:04:31,849 --> 00:04:34,159
to flash, dragging the constraints where you

122
00:04:34,159 --> 00:04:38,270
want them is quite easy. Alright, so

123
00:04:38,270 --> 00:04:39,740
I've tried to show all the constraints

124
00:04:39,740 --> 00:04:42,080
on this next slide, so that you can pause

125
00:04:42,080 --> 00:04:43,879
the video and check that you have

126
00:04:43,879 --> 00:04:46,399
something similar. Now on the left are

127
00:04:46,399 --> 00:04:48,619
screenshots of the inspector pane for

128
00:04:48,619 --> 00:04:50,779
the four widgets, and on the right is how

129
00:04:50,779 --> 00:04:52,399
the designer should appear with all the

130
00:04:52,399 --> 00:04:55,129
constraints showing. Now your widgets may

131
00:04:55,129 --> 00:04:57,499
have different IDs. On these screens my

132
00:04:57,499 --> 00:04:59,240
buttons are called button2 and button

133
00:04:59,240 --> 00:05:01,219
3 but the numbers are assigned

134
00:05:01,219 --> 00:05:03,649
automatically. Now if you've added and

135
00:05:03,649 --> 00:05:06,080
deleted widgets, then the IDs may differ

136
00:05:06,080 --> 00:05:07,939
slightly. Everything else should look the

137
00:05:07,939 --> 00:05:10,249
same, though. Now if you're getting

138
00:05:10,249 --> 00:05:12,169
problems changing the value of any of

139
00:05:12,169 --> 00:05:14,779
the margins, ignore that for now. Just
,
140

140
00:05:14,779 --> 00:05:16,399
leave the margin to whatever it's set

141
00:05:16,399 --> 00:05:19,249
to. I'm going to be discussing a bug that

142
00:05:19,249 --> 00:05:21,529
sometimes causes that problem and show

143
00:05:21,529 --> 00:05:24,439
you what to do about it. Alright, so

144
00:05:24,439 --> 00:05:26,449
we've still got the image to add, but

145
00:05:26,449 --> 00:05:27,949
what I'm going to do is finish the video

146
00:05:27,949 --> 00:05:30,409
here, and in the next video we'll add

147
00:05:30,409 --> 00:05:32,509
that image but prior to that, we'll run the

148
00:05:32,509 --> 00:05:34,879
program just to see how it behaves. So

149
00:05:34,879 --> 00:05:37,869
I'll see you in the next video.