1
00:00:04,400 --> 00:00:09,000
Welcome back. We've got the two portrait layouts that we'll need for our report.

2
00:00:09,600 --> 00:00:12,100
Now we need to create the landscape versions.

3
00:00:13,100 --> 00:00:16,100
I'll work through changing task durations

4
00:00:16,350 --> 00:00:19,350
and leave task durations items as an exercise.

5
00:00:19,950 --> 00:00:23,450
I won't go through it in this video, because it's just more of the same.

6
00:00:23,950 --> 00:00:27,250
I will, however, include the layout and the source code for this app

7
00:00:27,450 --> 00:00:28,800
in case you have any problems.

8
00:00:30,300 --> 00:00:33,900
Okay. Working with the task durations layout,

9
00:00:34,300 --> 00:00:36,500
we create a landscape variant

10
00:00:36,500 --> 00:00:39,060
using the second button in the menu bar,

11
00:00:39,060 --> 00:00:41,560
the one that looks like a phone being rotated.

12
00:00:43,560 --> 00:00:47,560
Use the drop down and choose the option create landscape

13
00:00:47,560 --> 00:00:48,560
variation.

14
00:00:50,060 --> 00:00:54,360
This layout is going to have an extra text view to show the task description.

15
00:00:55,360 --> 00:00:57,960
Drag another text view into the layout.

16
00:00:58,360 --> 00:01:00,860
It's often easier to drag it to the component tree,

17
00:01:00,860 --> 00:01:03,860
in cases like this where the layout's already full.

18
00:01:09,460 --> 00:01:13,360
Set its ID to td_description

19
00:01:13,360 --> 00:01:14,560
_heading,

20
00:01:21,060 --> 00:01:25,260
and create a new string resource called td_text_

21
00:01:25,260 --> 00:01:28,260
description with the value Description.

22
00:01:45,620 --> 00:01:47,980
Now things can get a bit messy,

23
00:01:48,640 --> 00:01:52,840
and I suggest you don't even try to set the constraints by dragging the handles around

24
00:01:53,240 --> 00:01:55,740
deleting a text view would have been easier.

25
00:01:56,340 --> 00:01:59,840
Which is why I suggested you should create the landscape layout first.

26
00:02:00,340 --> 00:02:03,640
Removing the description widget to create a portrait version

27
00:02:03,940 --> 00:02:06,240
would have been easier than adding it here.

28
00:02:06,640 --> 00:02:09,940
But you may well have to do something like this. So let's have a go.

29
00:02:10,600 --> 00:02:13,900
The component tree is much easier to work with.

30
00:02:14,260 --> 00:02:16,560
Select the td_name_heading widget,

31
00:02:18,820 --> 00:02:21,180
then go to all attributes

32
00:02:21,840 --> 00:02:24,200
and expand layout constraints.

33
00:02:30,000 --> 00:02:32,200
The End_toStartOf

34
00:02:32,560 --> 00:02:35,360
constraint has to go to a new widget

35
00:02:35,360 --> 00:02:37,240
instead of to the start widget,

36
00:02:37,840 --> 00:02:41,840
that's because we're inserting the description between the name and the start date.

37
00:02:42,840 --> 00:02:46,640
I'll copy the current value to save how you type it later.

38
00:02:47,300 --> 00:02:50,100
Type in @+

39
00:02:50,100 --> 00:02:54,400
id/td_description

40
00:02:56,600 --> 00:02:57,900
_heading

41
00:02:58,700 --> 00:03:00,900
for the End_toStartOf constraint.

42
00:03:02,400 --> 00:03:05,400
Ignore the design, it's still going to look weird for a while.

43
00:03:06,700 --> 00:03:09,300
Okay. Select the td_description_heading

44
00:03:12,070 --> 00:03:13,670
in the component tree

45
00:03:13,670 --> 00:03:16,970
and set its Start_toEndOf constraint

46
00:03:23,670 --> 00:03:27,370
to @+id/

47
00:03:27,730 --> 00:03:30,330
td_name

48
00:03:31,690 --> 00:03:33,190
_heading.

49
00:03:34,180 --> 00:03:36,680
Set its End_toStartOf

50
00:03:37,560 --> 00:03:40,560
constraint to td

51
00:03:40,560 --> 00:03:44,550
_start_heading, which is the one that we already have in the clipboard.

52
00:03:46,430 --> 00:03:48,830
It also needs a baseline constraint

53
00:03:48,830 --> 00:03:52,190
So set Baseline_ toBaselineOf

54
00:03:52,550 --> 00:03:56,750
to @+id/

55
00:03:56,950 --> 00:04:00,450
td_name_heading.

56
00:04:03,330 --> 00:04:05,130
It's filling its layout at the moment.

57
00:04:05,530 --> 00:04:08,530
So set the layout constraint horizontal weight to 2.

58
00:04:12,130 --> 00:04:15,330
To complete the chain,

59
00:04:15,730 --> 00:04:18,730
select td_start_heading

60
00:04:21,029 --> 00:04:24,030
and set its Start_toEndOf constraint

61
00:04:29,530 --> 00:04:32,830
to id td_

62
00:04:33,730 --> 00:04:35,730
description_heading.

63
00:04:39,730 --> 00:04:42,090
It now looks a lot tidier.

64
00:04:42,090 --> 00:04:45,690
We still need to set the padding and the margins for the new description widget.

65
00:04:45,990 --> 00:04:48,290
The padding will be 4dp for all,

66
00:05:05,790 --> 00:05:10,150
and the layout start and end margins should be 4dp.

67
00:05:21,350 --> 00:05:24,350
Set the background attribute to colorButtonNormal,

68
00:05:37,710 --> 00:05:40,210
use the ellipsis, and remember that we don't

69
00:05:40,210 --> 00:05:42,810
want the android name space version,

70
00:05:43,410 --> 00:05:46,910
and finish it off by setting the text to bold

71
00:05:48,610 --> 00:05:50,610
and the text alignment to left.

72
00:05:51,310 --> 00:05:53,310
We can get rid of the attributes now

73
00:05:53,810 --> 00:05:56,110
to give us more space to admire our layout.

74
00:05:57,110 --> 00:05:58,470
That wasn't too bad.

75
00:05:58,470 --> 00:06:00,470
It would have been very frustrating

76
00:06:00,470 --> 00:06:03,470
to try doing that by dragging the constraint handles.

77
00:06:04,170 --> 00:06:07,830
Fixing up the constraints in the attributes pane instead is much easier.

78
00:06:08,380 --> 00:06:11,680
If the ordering in the component tree isn't right,

79
00:06:11,980 --> 00:06:15,980
drag td_description_heading up to just below the name heading.

80
00:06:19,780 --> 00:06:21,580
Although you may have put it there to begin with.

81
00:06:22,380 --> 00:06:26,480
Okay. Are we happy with the landscape layout? Well, almost.

82
00:06:27,280 --> 00:06:30,380
We set the horizontal weight of the new description widget to 2,

83
00:06:30,930 --> 00:06:34,530
which means it should be the same width as the task_name_heading,

84
00:06:35,230 --> 00:06:37,830
but it isn't. That's easy to miss.

85
00:06:37,830 --> 00:06:42,030
It's mentioned in the documentation we looked at, but it's easy to overlook.

86
00:06:42,630 --> 00:06:45,230
The weights, horizontal or vertical,

87
00:06:45,230 --> 00:06:48,330
only have an effect when the widget's set to

88
00:06:48,330 --> 00:06:51,030
match constraint in the appropriate direction.

89
00:06:52,130 --> 00:06:55,030
To make the horizontal weight work for the description,

90
00:06:55,030 --> 00:06:58,730
we need to make sure its layout width is set to

91
00:06:58,730 --> 00:07:00,030
match constraint.

92
00:07:08,930 --> 00:07:10,930
The other headings shrink to make room,

93
00:07:11,330 --> 00:07:13,830
and now the layout looks the way we want it to.

94
00:07:14,930 --> 00:07:18,130
Finally, make sure you set the constraint layouts,

95
00:07:18,130 --> 00:07:21,330
layout height attribute to match parent,

96
00:07:21,530 --> 00:07:22,830
if it isn't already.

97
00:07:28,530 --> 00:07:33,230
Okay. Creating a landscape version of task durations items

98
00:07:33,230 --> 00:07:34,830
is exactly the same.

99
00:07:34,830 --> 00:07:37,330
Use the button to create a landscape version,

100
00:07:37,730 --> 00:07:40,730
then follow these same steps to add the description.

101
00:08:01,330 --> 00:08:05,330
Then follow the same steps as before to add the description.

102
00:08:05,730 --> 00:08:09,230
Its id will be td_description,

103
00:08:09,230 --> 00:08:11,430
so you can use the same id as I have.

104
00:08:12,030 --> 00:08:13,730
But I'm going to leave that as an exercise,

105
00:08:13,730 --> 00:08:15,530
so you can practice what we've just done.

106
00:08:15,830 --> 00:08:19,830
I won't be going over it in the video. Watch this one again if you get stuck.

107
00:08:21,130 --> 00:08:23,830
I will add the layout to the source code for this video,

108
00:08:24,190 --> 00:08:27,190
so it's available if you want to compare yours to mine.

109
00:08:27,990 --> 00:08:32,289
When you're finished, everything should line up in the portrait and landscape layouts.

110
00:08:33,289 --> 00:08:35,490
There's a pattern to the margins and padding.

111
00:08:36,039 --> 00:08:38,030
In task durations layouts,

112
00:08:38,030 --> 00:08:42,929
all the widgets should have their start and end margins set to 4dp.

113
00:08:43,530 --> 00:08:47,330
The head of the chain, the name heading in TextView on the far left,

114
00:08:47,580 --> 00:08:50,580
should have its top margin set to 8dp

115
00:08:50,580 --> 00:08:53,380
and the padding should be set to 4dp for all.

116
00:08:54,180 --> 00:08:56,680
In the task durations, items layout

117
00:08:57,080 --> 00:09:00,380
all the widgets should have start and end margins of 4dp

118
00:09:00,740 --> 00:09:03,940
and the start and end padding should also be 4dp.

119
00:09:04,540 --> 00:09:07,340
Any other settings and things probably won't line up.

120
00:09:08,340 --> 00:09:12,340
In the next video, we'll create the RecyclerView adapter

121
00:09:12,640 --> 00:09:15,640
to provide data for the report. I'll see you there.