1
00:00:04,200 --> 00:00:07,300
Welcome back, everyone. In the last two videos,

2
00:00:07,300 --> 00:00:10,000
we had a look at the constraint layout chains

3
00:00:10,500 --> 00:00:13,860
and saw how we can position widgets in the space available.

4
00:00:14,760 --> 00:00:18,360
You'll need to do something very similar for our RecyclerView layout.

5
00:00:19,260 --> 00:00:23,560
Each row of the RecyclerView will display three columns from the database;

6
00:00:24,060 --> 00:00:27,360
the task name, the start date and the duration.

7
00:00:28,020 --> 00:00:31,820
The widgets will need to line up with the headings we've already defined.

8
00:00:32,619 --> 00:00:36,420
Here's a challenge that will give you a chance to practice creating a chain

9
00:00:36,420 --> 00:00:40,620
in the ConstraintLayout. That's right, a challenge.

10
00:00:43,420 --> 00:00:47,320
Create a new layout called task_durations

11
00:00:47,320 --> 00:00:48,920
_items,

12
00:00:48,920 --> 00:00:52,220
using a ConstraintLayout as the root element.

13
00:00:53,120 --> 00:00:55,920
The layout will contain 3 text widgets.

14
00:00:56,520 --> 00:00:58,320
You can give them any IDs you want.

15
00:00:58,920 --> 00:01:02,020
But if you use different IDs to the ones I'm going to use,

16
00:01:02,020 --> 00:01:06,320
you'll need to make sure to use your IDs in the code when we come to write it.

17
00:01:09,320 --> 00:01:12,620
The IDs that I'll be using are, from left to right,

18
00:01:12,980 --> 00:01:16,580
td_name, td_start

19
00:01:16,580 --> 00:01:18,580
and td_duration.

20
00:01:19,580 --> 00:01:22,940
Use a chain to layout the 3 TextViews horizontally,

21
00:01:23,300 --> 00:01:26,700
then set their margins so that they line up with the headings

22
00:01:26,700 --> 00:01:29,900
in our task_durations layout. Hint:

23
00:01:30,560 --> 00:01:34,660
These TextViews will be very similar to the ones we just created.

24
00:01:38,860 --> 00:01:43,120
For my solution, I'm going to start by copying the previous layout file.

25
00:01:43,480 --> 00:01:45,680
I'm going to use it as the basis for this one.

26
00:01:46,080 --> 00:01:49,980
Right click taskdurations.xml, and choose copy.

27
00:01:56,880 --> 00:02:00,780
Then right click the layout folder, and choose paste.

28
00:02:04,080 --> 00:02:06,280
The new name will be task

29
00:02:07,640 --> 00:02:11,740
_durations_items

30
00:02:12,540 --> 00:02:13,440
.xml.

31
00:02:15,940 --> 00:02:19,940
Be careful now, both layouts look identical

32
00:02:20,300 --> 00:02:23,300
and android studio doesn't always open the new file.

33
00:02:23,960 --> 00:02:27,660
Make sure you open task_durations_items

34
00:02:27,660 --> 00:02:28,960
before continuing.

35
00:02:30,760 --> 00:02:33,360
I suggest closing task durations,

36
00:02:34,460 --> 00:02:37,460
so you don't make changes to the wrong file by mistake.

37
00:02:38,340 --> 00:02:41,140
We don't need the RecyclerView in this layout,

38
00:02:41,390 --> 00:02:42,590
so we can delete it.

39
00:02:48,890 --> 00:02:52,990
All the IDs need underscore heading deleting from the end.

40
00:02:53,490 --> 00:02:56,490
But doing that in the design view can be problematic.

41
00:02:57,370 --> 00:03:01,170
Android studio will attempt to rename all occurrences

42
00:03:01,170 --> 00:03:04,170
of td_name_heading

43
00:03:04,170 --> 00:03:05,670
and the other widgets

44
00:03:06,170 --> 00:03:08,970
that includes where they appear in the original file.

45
00:03:09,870 --> 00:03:14,070
If you choose to let it rename them all, the original file will be wrong.

46
00:03:14,670 --> 00:03:16,670
If you don't let it rename them,

47
00:03:16,670 --> 00:03:19,170
the IDs in the constraints will be incorrect.

48
00:03:19,830 --> 00:03:23,190
It's much easier to make changes to the xml

49
00:03:23,190 --> 00:03:25,390
rather than working in the layout designer.

50
00:03:25,750 --> 00:03:28,750
So click the text tab to view the xml.

51
00:03:31,110 --> 00:03:34,910
We can use the search and replace function to replace

52
00:03:34,910 --> 00:03:37,110
underscore heading with nothing.

53
00:03:37,770 --> 00:03:40,570
That will fix up the IDs in the constraints as well.

54
00:03:41,170 --> 00:03:43,370
So edit,

55
00:03:44,870 --> 00:03:45,870
find,

56
00:03:47,370 --> 00:03:51,030
replace then enter _heading

57
00:03:51,830 --> 00:03:53,230
in the top search box,

58
00:03:54,130 --> 00:03:57,930
make sure the replace box is empty, and then click

59
00:03:57,930 --> 00:03:58,930
replace all.

60
00:03:59,930 --> 00:04:03,730
Also, look out for things like the words box being ticked,

61
00:04:04,280 --> 00:04:07,580
that will only match whole words, which obviously wouldn't work here.

62
00:04:07,880 --> 00:04:09,550
Okay, back in design mode.

63
00:04:11,050 --> 00:04:12,410
That's looking pretty good.

64
00:04:13,010 --> 00:04:15,010
We don't want the text to be bold

65
00:04:15,010 --> 00:04:18,370
and we need to remove the background attribute from all three widgets.

66
00:04:26,730 --> 00:04:30,930
Remove the bold attribute. And in all attributes,

67
00:04:32,530 --> 00:04:33,730
delete the background.

68
00:04:35,120 --> 00:04:38,020
The only other change is to the text attribute,

69
00:04:38,520 --> 00:04:41,120
and we have to change each widget separately.

70
00:04:41,620 --> 00:04:43,420
Select td_name.

71
00:04:45,410 --> 00:04:47,410
There's another change for this widget.

72
00:04:47,810 --> 00:04:50,110
We need to remove the top margin

73
00:04:50,110 --> 00:04:52,810
or the rows will be spaced out too much in the report,

74
00:04:53,060 --> 00:04:55,360
so set the top margin to 0.

75
00:05:03,860 --> 00:05:06,220
We don't want any text to appear

76
00:05:06,220 --> 00:05:10,320
that will come from the adapter when we're using this layout in our RecyclerView.

77
00:05:10,920 --> 00:05:13,420
To make the layout easy to work with though,

78
00:05:13,420 --> 00:05:16,220
we'll put some text into the tools text attribute.

79
00:05:16,470 --> 00:05:17,770
The one with the spanner.

80
00:05:21,270 --> 00:05:23,930
Cut the entry for the text attribute,

81
00:05:26,830 --> 00:05:29,230
and paste it into the tools text attribute.

82
00:05:30,830 --> 00:05:34,930
Remember to press enter or click back in the text attribute

83
00:05:34,930 --> 00:05:37,530
or android studio might undo the change.

84
00:05:37,780 --> 00:05:39,480
Do the same for the other two widgets.

85
00:05:54,780 --> 00:05:56,580
That's the layout just about done.

86
00:05:57,460 --> 00:06:01,340
There's an easy way to check how it works without having to run the app

87
00:06:01,340 --> 00:06:02,740
each time we change anything.

88
00:06:03,240 --> 00:06:06,040
Open up the task_durations layout

89
00:06:06,040 --> 00:06:08,140
and select the RecyclerView widget.

90
00:06:16,540 --> 00:06:19,340
This has a tools attribute called list item.

91
00:06:23,440 --> 00:06:26,740
If we set that to the task durations items layout,

92
00:06:34,440 --> 00:06:38,240
the RecyclerView will show that layout inside this one.

93
00:06:39,120 --> 00:06:41,420
Use the symbol, and then select task_

94
00:06:41,420 --> 00:06:43,620
durations_items in the dialog.

95
00:06:44,280 --> 00:06:48,080
That's neat. And it makes life a lot easier when you're creating layouts

96
00:06:48,080 --> 00:06:49,880
that have to work together like this.

97
00:06:50,680 --> 00:06:52,680
Our widgets appear to line up perfectly,

98
00:06:53,340 --> 00:06:57,700
that's why we set the recycle view margins on the left and right to 0.

99
00:06:58,690 --> 00:07:01,490
You may prefer to give it margins of 8dp

100
00:07:01,490 --> 00:07:04,790
and set the task name left margin to 0 instead.

101
00:07:05,490 --> 00:07:08,290
That's something you can play around with once you've got the app running.

102
00:07:08,950 --> 00:07:10,850
We're using a toolbar in the app,

103
00:07:10,850 --> 00:07:13,650
so remember to select the constraint layout

104
00:07:13,650 --> 00:07:17,850
in the component tree and set layout behavior attribute

105
00:07:18,050 --> 00:07:20,590
to app bar scrolling view behavior.

106
00:07:32,590 --> 00:07:36,580
Using the symbol and selecting from the list is much easier than typing it in.

107
00:07:37,240 --> 00:07:39,140
It's very easy to forget that step.

108
00:07:39,940 --> 00:07:43,500
If your layouts overlay the toolbar,go back into them

109
00:07:43,500 --> 00:07:46,300
and set that attribute on the outermost layout.

110
00:07:46,900 --> 00:07:51,260
Another mistake that's easy to make is to forget to set the layout

111
00:07:51,260 --> 00:07:52,460
to wrap content.

112
00:07:53,360 --> 00:07:57,020
We'll be using our task_durations_itemslayout to display items

113
00:07:57,020 --> 00:07:58,320
in a RecyclerView.

114
00:07:58,980 --> 00:08:01,280
If we leave the height set to match parent,

115
00:08:01,580 --> 00:08:04,080
each row of data will fill the screen.

116
00:08:04,480 --> 00:08:06,580
The display gives an indication of that.

117
00:08:06,780 --> 00:08:09,660
Notice, we've only got a single item

118
00:08:09,660 --> 00:08:11,160
appearing in the RecyclerView.

119
00:08:11,860 --> 00:08:15,060
Switch back to task durationitems.xml

120
00:08:15,760 --> 00:08:19,760
and change the layout height attribute of the ConstraintLayout

121
00:08:20,260 --> 00:08:21,560
to wrap content.

122
00:08:30,920 --> 00:08:35,020
Back in the task_durations layout, we get several items appearing.

123
00:08:37,020 --> 00:08:41,020
Once you know to look for that, you're less likely to forget to change the layout.

124
00:08:41,419 --> 00:08:43,520
Of course, as you can see here,

125
00:08:43,520 --> 00:08:45,880
you may not see the change straight off.

126
00:08:46,680 --> 00:08:51,080
You may have to restart android studio after making the change.

127
00:08:51,880 --> 00:08:55,870
That's a bit annoying. But the good news is, you'll never see several items

128
00:08:55,870 --> 00:08:57,470
when it's set to match parent.

129
00:08:58,130 --> 00:09:01,930
So it's still a good reminder even if it's a bit buggy at the moment.

130
00:09:12,130 --> 00:09:14,930
Okay. That's the portrait layouts finished.

131
00:09:15,290 --> 00:09:19,290
There's one other thing I want to show you in task_durations_items.

132
00:09:19,490 --> 00:09:21,490
This layout doesn't stand alone.

133
00:09:24,090 --> 00:09:26,790
It's going to be displayed in a RecyclerView

134
00:09:26,790 --> 00:09:28,990
in the task_durations layout.

135
00:09:29,980 --> 00:09:34,340
We can get the designer to reflect that by adding another tools attribute

136
00:09:34,340 --> 00:09:35,700
to the constraint layout.

137
00:09:36,580 --> 00:09:38,280
In all attributes,

138
00:09:39,780 --> 00:09:42,780
find the show in tools attribute,

139
00:09:45,880 --> 00:09:49,780
and use the symbol to choose the task_durations layout.

140
00:09:58,380 --> 00:10:01,740
The designer will render this layout as it will appear

141
00:10:01,740 --> 00:10:03,040
inside the other one.

142
00:10:03,440 --> 00:10:05,840
That can be useful, but be careful.

143
00:10:06,240 --> 00:10:09,540
Both layouts now look almost identical again,

144
00:10:09,540 --> 00:10:13,140
and it can be very easy to start making changes to the wrong one.

145
00:10:14,040 --> 00:10:18,270
In the next video, we'll create the landscape versions. See you there.