1
00:00:04,600 --> 00:00:05,600
Welcome back.

2
00:00:06,200 --> 00:00:09,560
We're going to use a RecyclerView to display our report.

3
00:00:10,220 --> 00:00:12,520
And we'll need a layout to display the data.

4
00:00:13,320 --> 00:00:15,920
It's worth reviewing what we're trying to create

5
00:00:15,920 --> 00:00:17,920
before we go ahead and write the code.

6
00:00:19,020 --> 00:00:23,480
You wouldn't normally have the finished report like the one I'm showing in this slide,

7
00:00:23,980 --> 00:00:28,380
but you will have some sort of specification for how the report should look.

8
00:00:29,180 --> 00:00:32,610
Here we're displaying the total timings for each task by day.

9
00:00:32,970 --> 00:00:36,630
The column headings are also clickable,

10
00:00:37,230 --> 00:00:41,030
and users can tap them to sort the data by the different columns.

11
00:00:42,690 --> 00:00:44,190
The report will be scrollable

12
00:00:44,890 --> 00:00:47,890
because there could be more tasks than will fit in a single screen.

13
00:00:48,590 --> 00:00:50,590
We've seen screens like this before,

14
00:00:51,250 --> 00:00:54,450
using either a list view or a RecyclerView.

15
00:00:54,950 --> 00:00:56,950
We'll use a RecyclerView here.

16
00:00:57,750 --> 00:00:59,850
One thing the RecyclerView lacks

17
00:01:00,250 --> 00:01:02,850
is a simple way to include a header row,

18
00:01:03,210 --> 00:01:06,310
that's our clickable TextViews at the top of the report.

19
00:01:07,810 --> 00:01:12,010
There are ways to add a header by passing different views back from the adapter.

20
00:01:12,310 --> 00:01:16,310
I'm going to take a different approach because the constraint layout

21
00:01:16,310 --> 00:01:19,510
now has a cool feature, called chains.

22
00:01:19,910 --> 00:01:23,110
This is a great layout for seeing how useful they can be

23
00:01:23,410 --> 00:01:24,610
so that's what we'll do.

24
00:01:25,270 --> 00:01:29,670
We're fitting a lot of data on the screen, and it won't all fit in portrait.

25
00:01:31,070 --> 00:01:33,870
The portrait view will leave out the task description,

26
00:01:34,470 --> 00:01:37,970
so we'll need to create a portrait version of the layout as well.

27
00:01:38,470 --> 00:01:41,070
Now, when you're doing something like this,

28
00:01:41,470 --> 00:01:44,470
I recommend creating the landscape layout first.

29
00:01:44,970 --> 00:01:48,570
It's much easier to remove widgets rather than trying to add them,

30
00:01:48,970 --> 00:01:51,270
and that's especially true when using chains.

31
00:01:51,930 --> 00:01:54,230
If you start with the Landscape layout,

32
00:01:54,230 --> 00:01:56,530
you can just delete the Description widget,

33
00:01:56,970 --> 00:02:00,670
then fix up the constraints from the task name to the date.

34
00:02:01,570 --> 00:02:05,870
That's the easy way. So of course, we're not going to do it that way.

35
00:02:07,670 --> 00:02:09,370
We need two different layouts,

36
00:02:09,370 --> 00:02:11,970
with a portrait and landscape version of each.

37
00:02:12,630 --> 00:02:16,630
The main layout will contain the header row and a RecyclerView.

38
00:02:17,620 --> 00:02:20,620
We also need a layout for the RecyclerView to use.

39
00:02:21,020 --> 00:02:23,320
It'll contain the same widgets as the header,

40
00:02:23,680 --> 00:02:27,280
but without the RecyclerView. Let's get started.

41
00:02:29,530 --> 00:02:32,530
Right click on the res layout directory

42
00:02:37,030 --> 00:02:39,690
and create a new layout resource file.

43
00:02:42,990 --> 00:02:46,190
Call it task_durations

44
00:02:50,690 --> 00:02:53,990
and make sure the root element is a constraint layout

45
00:02:53,990 --> 00:02:55,490
before clicking okay.

46
00:03:05,790 --> 00:03:09,890
In the portrait, we're going to display the task name start date

47
00:03:09,890 --> 00:03:10,890
and duration.

48
00:03:11,390 --> 00:03:13,890
In landscape, we'll also have the description,

49
00:03:14,290 --> 00:03:16,690
but we're starting off with the portrait layout.

50
00:03:16,690 --> 00:03:19,490
I'll close the project pane just so we've got a bit more room.

51
00:03:21,490 --> 00:03:25,090
Drag three TextView widgets onto the layout.

52
00:03:34,450 --> 00:03:38,810
Because these TextViews will respond to being tapped, they're going to need IDs.

53
00:03:39,210 --> 00:03:41,610
From left to right, the IDs are

54
00:03:44,610 --> 00:03:47,610
td_

55
00:03:48,210 --> 00:03:50,010
name_heading

56
00:03:55,810 --> 00:03:59,170
td_start

57
00:03:59,830 --> 00:04:01,430
_heading

58
00:04:05,790 --> 00:04:06,690
and

59
00:04:08,490 --> 00:04:09,290
td

60
00:04:10,890 --> 00:04:12,490
_duration

61
00:04:13,150 --> 00:04:15,150
_heading.

62
00:04:16,649 --> 00:04:19,649
To create the type of chain we want horizontally,

63
00:04:19,649 --> 00:04:24,350
the layout width must be set to match constraint for all three widgets.

64
00:04:25,010 --> 00:04:28,370
You can set them all at the same time by selecting all three

65
00:04:28,370 --> 00:04:31,870
in the component tree then changing the attribute.

66
00:04:38,970 --> 00:04:41,850
While we've got all three widgets selected,

67
00:04:41,850 --> 00:04:45,450
make sure layout height is set to wrap_content.

68
00:04:45,950 --> 00:04:50,550
Okay. To create a chain, keep all three widgets selected

69
00:04:50,850 --> 00:04:52,650
then right click any one of them.

70
00:04:57,050 --> 00:05:01,650
I prefer to right click them in the component tree but you can use the design instead.

71
00:05:02,250 --> 00:05:05,550
From the context menu that appears choose chains,

72
00:05:05,950 --> 00:05:07,450
create horizontal chain.

73
00:05:12,650 --> 00:05:16,250
The constraints now appear as chains between the widgets.

74
00:05:16,850 --> 00:05:19,510
You probably won't be able to see them at the moment

75
00:05:19,510 --> 00:05:22,510
because all three widgets are butted up against each other.

76
00:05:22,710 --> 00:05:24,910
Don't worry, we'll sort that out next.

77
00:05:25,790 --> 00:05:28,290
Even though we can't see them in the designer,

78
00:05:28,290 --> 00:05:31,590
we've now got constraints from the name heading widget

79
00:05:31,590 --> 00:05:35,250
to the start heading widget and another constraint back

80
00:05:35,250 --> 00:05:38,250
from the start heading widget to the name heading widget.

81
00:05:38,750 --> 00:05:42,650
And the same between the start heading widget and duration heading widget.

82
00:05:43,550 --> 00:05:46,150
The chain is just two-way constraints,

83
00:05:46,550 --> 00:05:50,550
which we can see by selecting the td_start_heading

84
00:05:50,550 --> 00:05:51,550
TextView

85
00:05:55,050 --> 00:05:57,650
and expanding the declared attributes.

86
00:06:01,550 --> 00:06:04,450
It's a good idea to make the attributes pane wider,

87
00:06:04,450 --> 00:06:06,650
so you can see the full name of the constraints.

88
00:06:10,750 --> 00:06:15,110
That's got a layout_constraintEnd_toStartOf

89
00:06:15,510 --> 00:06:18,810
constraint to td_duration_heading

90
00:06:19,410 --> 00:06:23,910
and a start_toEndOf constraint

91
00:06:23,910 --> 00:06:25,710
to td_name_heading.

92
00:06:25,710 --> 00:06:29,310
Select td_name_heading, and that's also got a constraint

93
00:06:32,670 --> 00:06:37,230
and that's also got a constraint end_tostartof

94
00:06:37,230 --> 00:06:38,830
to td_start heading.

95
00:06:39,490 --> 00:06:43,890
You can't create these two-way constraints by dragging the constraint handles.

96
00:06:44,590 --> 00:06:47,890
You have to use the chain option on that context menu.

97
00:06:48,550 --> 00:06:52,810
Alternatively, you can set them all manually here in the attributes.

98
00:06:53,810 --> 00:06:55,110
We're not quite done.

99
00:06:55,510 --> 00:06:59,110
But I'm going to finish this video by looking at the documentation

100
00:06:59,410 --> 00:07:01,810
to see what google has to say about chains.

101
00:07:03,170 --> 00:07:05,970
The first link is a training document at

102
00:07:06,470 --> 00:07:14,470
developer.android.com/training.constraint-layout/index.html.

103
00:07:16,170 --> 00:07:19,470
The second to last section near the end of the document is

104
00:07:19,470 --> 00:07:21,970
Control linear groups with a chain.

105
00:07:23,170 --> 00:07:25,070
The diagram show what's going on

106
00:07:25,070 --> 00:07:28,670
and also explain the four different types of chains that we can create.

107
00:07:29,470 --> 00:07:32,070
The examples are using horizontal chains

108
00:07:32,370 --> 00:07:34,370
but you can create vertical chains as well.

109
00:07:35,030 --> 00:07:38,630
In fact, you can create a grid by using a combination

110
00:07:38,630 --> 00:07:40,630
of vertical and horizontal chains.

111
00:07:41,430 --> 00:07:44,630
We could have done that for the button grid in the calculator app.

112
00:07:45,130 --> 00:07:47,630
If you want to experiment with that, have a go.

113
00:07:48,180 --> 00:07:50,780
Make a copy of the layout in the calculator app

114
00:07:51,030 --> 00:07:54,730
and create horizontal chains for each row of buttons.

115
00:07:54,980 --> 00:07:58,970
Then create a vertical chain of buttons in the left-hand column.

116
00:07:59,670 --> 00:08:03,270
The button at the top left will be the head of two chains.

117
00:08:03,770 --> 00:08:06,970
It's not obvious that you can do that, but it does work.

118
00:08:07,520 --> 00:08:12,220
The head by the way is the left most widget in a horizontal chain

119
00:08:12,580 --> 00:08:15,580
or the topmost widget if the chain's vertical.

120
00:08:16,240 --> 00:08:19,440
The document mentions that just after number four.

121
00:08:20,840 --> 00:08:24,840
Okay. The other link is a reference for ConstraintLayout.

122
00:08:25,140 --> 00:08:30,040
It's at developer.android.com/reference/android/support

123
00:08:30,040 --> 00:08:34,640
/constraint/constraintlayout.html.

124
00:08:35,840 --> 00:08:39,840
Chain is described about halfway down the document with different diagrams.

125
00:08:48,640 --> 00:08:51,040
I'll leave you to read both documents

126
00:08:51,040 --> 00:08:53,940
and work out what kind of chain we're going to need.

127
00:08:54,440 --> 00:08:57,240
In the next video, we'll finish this layout and create

128
00:08:57,240 --> 00:09:00,440
another one for the RecyclerView to use.

129
00:09:00,940 --> 00:09:02,240
I'll see you in that one.