1
00:00:04,660 --> 00:00:06,720
Alright so in the last video we created

2
00:00:06,720 --> 00:00:10,000
two interfaces, or two layouts. We added

3
00:00:10,000 --> 00:00:13,150
our main TaskTimer application layout

4
00:00:13,150 --> 00:00:15,940
as well as one for the Task List Items.

5
00:00:15,940 --> 00:00:18,490
So it's now time to add the constraints

6
00:00:18,490 --> 00:00:21,369
to our Task List Items layout. Now

7
00:00:21,369 --> 00:00:23,259
there are many ways to do this, but as

8
00:00:23,259 --> 00:00:24,579
long as everything stays where you put

9
00:00:24,579 --> 00:00:26,860
it and survives changes in the screen

10
00:00:26,860 --> 00:00:29,259
size and orientation, then really there's

11
00:00:29,259 --> 00:00:30,820
no one way that's better than any other.

12
00:00:30,820 --> 00:00:32,710
What I'm going to do though, is start by

13
00:00:32,710 --> 00:00:37,000
constraining the top of the tli_edit to

14
00:00:37,000 --> 00:00:39,700
the top of tli_delete so

15
00:00:39,700 --> 00:00:41,260
that may appear level. So I'm going to

16
00:00:41,260 --> 00:00:43,480
select that, and I'm also going to make

17
00:00:43,480 --> 00:00:46,210
sure that the margin is set to zero so

18
00:00:46,210 --> 00:00:48,610
that they appear level. Next we want to

19
00:00:48,610 --> 00:00:51,340
constrain the right of tli_edit to the

20
00:00:51,340 --> 00:00:54,400
left of tli_delete, the right of tli_edit

21
00:00:54,400 --> 00:00:57,790
to the left of tli_delete, and all

22
00:00:57,790 --> 00:00:59,890
margins will be 8dp unless the

23
00:00:59,890 --> 00:01:02,020
constraint is lining something up

24
00:01:02,020 --> 00:01:04,209
vertically. So next the top and right of

25
00:01:04,209 --> 00:01:05,530
tli_delete will be

26
00:01:05,530 --> 00:01:07,270
constrained to the top and right of the

27
00:01:07,270 --> 00:01:09,909
layout. But it's easy to actually do the

28
00:01:09,909 --> 00:01:12,189
right constraint first so the buttons

29
00:01:12,189 --> 00:01:14,289
don't jump up and overlay the TextViews.

30
00:01:14,289 --> 00:01:16,450
So tli_delete, constrain it to the

31
00:01:16,450 --> 00:01:19,780
right, and then we want to constrain it

32
00:01:19,780 --> 00:01:23,560
to the top, like so.

33
00:01:23,560 --> 00:01:26,530
Alright so that's the buttons done. Now

34
00:01:26,530 --> 00:01:28,840
it's time for the TextViews. Now

35
00:01:28,840 --> 00:01:31,539
tli_name, that's going to be

36
00:01:31,539 --> 00:01:33,280
constrained to the left and top of the

37
00:01:33,280 --> 00:01:35,969
layout. Let's do that first -

38
00:01:35,969 --> 00:01:42,100
left then top. And we also want this

39
00:01:42,100 --> 00:01:44,829
right edge constrained to the left edge

40
00:01:44,829 --> 00:01:46,450
of tli_edit, so let's do that

41
00:01:46,450 --> 00:01:50,350
as well. And we also want to make sure

42
00:01:50,350 --> 00:01:52,719
that all margins have been set to 8dp,

43
00:01:52,719 --> 00:01:54,759
and you can see that, in this case here,

44
00:01:54,759 --> 00:01:56,709
we've got all three set to 8dp. So

45
00:01:56,709 --> 00:01:57,459
moving on now,

46
00:01:57,459 --> 00:01:59,859
tli_description, that needs to have its

47
00:01:59,859 --> 00:02:02,859
top edge constrained to the bottom of tli_

48
00:02:02,859 --> 00:02:05,380
name with a margin of 8, so let's do that.

49
00:02:05,380 --> 00:02:08,949
So the top of tli_description

50
00:02:08,949 --> 00:02:11,370
to the bottom of tli_name,

51
00:02:11,370 --> 00:02:13,750
making sure they've got 8dp, which they've

52
00:02:13,750 --> 00:02:15,880
got there. So next I'm going to constrain

53
00:02:15,880 --> 00:02:18,200
its left hand side to

54
00:02:18,200 --> 00:02:22,370
the left of the layout, like so, and for

55
00:02:22,370 --> 00:02:24,530
the right-hand side I'm going to set that

56
00:02:24,530 --> 00:02:27,230
to the left edge of tli_edit. So I'm going to

57
00:02:27,230 --> 00:02:28,879
select this one here, the right edge of

58
00:02:28,879 --> 00:02:31,760
our tli_description. I'm going to set

59
00:02:31,760 --> 00:02:34,519
that to the left edge of our tli_

60
00:02:34,519 --> 00:02:36,440
edit. Now the last thing we need

61
00:02:36,440 --> 00:02:38,540
to do is set the widths of both Text

62
00:02:38,540 --> 00:02:40,730
Views to match_constraint in their

63
00:02:40,730 --> 00:02:42,560
heights to wrap_content. so let's do that.

64
00:02:42,560 --> 00:02:46,040
So tli_name first. The width, we want to

65
00:02:46,040 --> 00:02:49,940
set that to match_constraint, and then we

66
00:02:49,940 --> 00:02:51,410
want to set out the layout height to be

67
00:02:51,410 --> 00:02:53,930
wrap_content, which it is. And

68
00:02:53,930 --> 00:02:55,970
for tli_description,

69
00:02:55,970 --> 00:02:58,690
width needs to be match_constraint and

70
00:02:58,690 --> 00:03:01,459
also our layout_height needs to be set

71
00:03:01,459 --> 00:03:04,519
to wrap_content, which it is. And the other

72
00:03:04,519 --> 00:03:06,140
thing I haven't done here is change the

73
00:03:06,140 --> 00:03:08,030
margin. We want to make sure that all our

74
00:03:08,030 --> 00:03:10,069
margins were set to 8dp. That's

75
00:03:10,069 --> 00:03:11,840
currently set to 0 on the right hand

76
00:03:11,840 --> 00:03:13,760
side. Let's change that to 8dp as well,

77
00:03:13,760 --> 00:03:15,680
and we're basically pretty well done

78
00:03:15,680 --> 00:03:17,870
here. Now all the widgets are constrained

79
00:03:17,870 --> 00:03:20,540
now, vertically and horizontally, and it's

80
00:03:20,540 --> 00:03:22,069
a good idea to check at the top of the

81
00:03:22,069 --> 00:03:24,019
design to make sure there's no warnings,

82
00:03:24,019 --> 00:03:27,680
up here. Now if you leave something

83
00:03:27,680 --> 00:03:29,389
unconstrained you'll get a warning there,

84
00:03:29,389 --> 00:03:31,519
and it'll be showing red and you can fix it

85
00:03:31,519 --> 00:03:32,840
before you run the app and then wonder

86
00:03:32,840 --> 00:03:34,910
why things look out of place. Now just to

87
00:03:34,910 --> 00:03:36,079
show you this I'm going to delete the

88
00:03:36,079 --> 00:03:38,660
right-hand constraint of tli_

89
00:03:38,660 --> 00:03:42,739
delete, up here, just to show you what I

90
00:03:42,739 --> 00:03:43,130
mean.

91
00:03:43,130 --> 00:03:44,690
And notice this comes up with an error

92
00:03:44,690 --> 00:03:47,150
and click on that, and if this doesn't

93
00:03:47,150 --> 00:03:50,720
show then we can come down here and we

94
00:03:50,720 --> 00:03:51,799
can make this a bit bigger so that we

95
00:03:51,799 --> 00:03:53,989
can actually read. Expand it there and

96
00:03:53,989 --> 00:03:55,670
you can see that we've got a message

97
00:03:55,670 --> 00:03:57,590
there - the warning: This view is not

98
00:03:57,590 --> 00:03:59,209
constrained horizontally: at runtime

99
00:03:59,209 --> 00:04:01,400
it'll jump to the left unless you add

100
00:04:01,400 --> 00:04:03,349
a horizontal constraint. So I'll leave

101
00:04:03,349 --> 00:04:06,139
that open temporarily. If I add the constraint

102
00:04:06,139 --> 00:04:08,510
back now, the right of tli_delete

103
00:04:08,510 --> 00:04:10,930
to the right of the layout,

104
00:04:10,930 --> 00:04:13,489
notice that the error automatically

105
00:04:13,489 --> 00:04:15,079
disappears and we've got nothing red

106
00:04:15,079 --> 00:04:16,820
showing up here in the top right hand

107
00:04:16,820 --> 00:04:18,950
corner. And again, be sure that now

108
00:04:18,950 --> 00:04:21,349
you've done that that we have got 8dp as

109
00:04:21,349 --> 00:04:22,849
the margin for the right-hand side still,

110
00:04:22,849 --> 00:04:24,620
which we have here. Alright so that's

111
00:04:24,620 --> 00:04:26,990
the layout finished, and it would almost work

112
00:04:26,990 --> 00:04:28,970
as well. Before I finish the video

113
00:04:28,970 --> 00:04:31,340
though, here's a quick challenge for you.

114
00:04:31,340 --> 00:04:32,720
The challenge is that when you use this

115
00:04:32,720 --> 00:04:34,730
layout in the app as is at the moment,

116
00:04:34,730 --> 00:04:36,650
you'll only see one task at a time

117
00:04:36,650 --> 00:04:39,080
in the RecyclerView. So your challenge

118
00:04:39,080 --> 00:04:40,940
here is to work out why you'd only see

119
00:04:40,940 --> 00:04:43,580
the one item, and as a hint check the

120
00:04:43,580 --> 00:04:45,800
properties on the constraint layout

121
00:04:45,800 --> 00:04:48,650
itself. So pause the video now and just try 

122
00:04:48,650 --> 00:04:49,850
that challenge - see if you can figure it

123
00:04:49,850 --> 00:04:51,470
out - and when you're ready to come back

124
00:04:51,470 --> 00:04:53,390
I'll show you the solution. So pause the

125
00:04:53,390 --> 00:04:56,819
video now.

126
00:04:56,819 --> 00:04:59,080
Okay so welcome back. Hopefully you managed

127
00:04:59,080 --> 00:05:02,080
to solve it. The solution here, is firstly

128
00:05:02,080 --> 00:05:04,030
to click on our constraint layout and

129
00:05:04,030 --> 00:05:06,159
not an individual widget. So the layout

130
00:05:06,159 --> 00:05:08,500
_height of the layout, you can see

131
00:05:08,500 --> 00:05:10,030
at the moment, layout_

132
00:05:10,030 --> 00:05:12,220
height, that's set to match_

133
00:05:12,220 --> 00:05:13,930
parent. So it's going to take up the full

134
00:05:13,930 --> 00:05:16,060
screen when it's displayed. All we need

135
00:05:16,060 --> 00:05:17,680
to do is change the layout_

136
00:05:17,680 --> 00:05:19,960
height on the constraint layout to be

137
00:05:19,960 --> 00:05:22,270
equal to wrap_content. As soon as I did

138
00:05:22,270 --> 00:05:23,979
that, the line moves right up to just

139
00:05:23,979 --> 00:05:24,909
below the widgets.

140
00:05:24,909 --> 00:05:26,919
Now when that appeared at the bottom of

141
00:05:26,919 --> 00:05:29,169
the screen, we had a visual indication of

142
00:05:29,169 --> 00:05:29,860
what would happen.

143
00:05:29,860 --> 00:05:31,690
So that's easily overlooked, so

144
00:05:31,690 --> 00:05:33,610
hopefully by making it a challenge you

145
00:05:33,610 --> 00:05:35,289
won't waste too much time on this in the

146
00:05:35,289 --> 00:05:37,210
future. Alright so let's just format

147
00:05:37,210 --> 00:05:39,759
the XML, select it and format it as we

148
00:05:39,759 --> 00:05:43,889
normally do.

149
00:05:43,889 --> 00:05:46,239
And I'll end the video here, and in the

150
00:05:46,239 --> 00:05:47,979
next one we're going to create the

151
00:05:47,979 --> 00:05:50,049
layout that we'll be used to add and edit

152
00:05:50,049 --> 00:05:52,689
the task details. So I'll see you in

153
00:05:52,689 --> 00:05:55,199
the next video.