1
00:00:00,860 --> 00:00:01,630
Welcome back.

2
00:00:01,700 --> 00:00:07,610
And this video, you are going to learn how to use the constraint layout with a decoupled API that can

3
00:00:07,610 --> 00:00:12,800
help us build different designs for the portrait and the landscape orientation.

4
00:00:13,220 --> 00:00:19,190
So we're simply going to decouple the constraints from the layout they apply to by creating different

5
00:00:19,190 --> 00:00:21,710
constraints sets for each orientation.

6
00:00:22,160 --> 00:00:24,290
So what does that even mean and why would you bother?

7
00:00:24,680 --> 00:00:29,180
So the thing is we have our screen as it looks like this right now.

8
00:00:29,660 --> 00:00:35,330
And if we want to rotate it or if the user wants to use it in landscape mode, we want to see something

9
00:00:35,330 --> 00:00:41,450
like this where we have the image on the left hand side with the text of Siberian husky in Germany underneath

10
00:00:41,450 --> 00:00:41,600
it.

11
00:00:42,020 --> 00:00:46,490
But then we have also the followers following and posed in a different way.

12
00:00:46,520 --> 00:00:49,700
OK, so basically this is the design that I want to have in the end.

13
00:00:50,000 --> 00:00:54,170
So of course, you could say there should be less of a distance here at the bottom or something like

14
00:00:54,170 --> 00:00:54,410
that.

15
00:00:54,680 --> 00:00:56,300
So that's really up to you.

16
00:00:56,480 --> 00:01:01,880
Or if you want to have some more space here at the bottom to then add more items later on, that's good

17
00:01:01,880 --> 00:01:02,270
as well.

18
00:01:02,570 --> 00:01:05,510
But the thing is, we don't get this behavior as of now.

19
00:01:05,510 --> 00:01:07,250
We have to define this specifically.

20
00:01:07,250 --> 00:01:11,300
We need to specifically define where every single item needs to be.

21
00:01:11,600 --> 00:01:16,730
For the portrait mode, which we have defined in the last video, as well as for the landscape mode,

22
00:01:16,730 --> 00:01:24,020
which we are going to do in this video, but therefore we will need to make a big change to our application,

23
00:01:24,020 --> 00:01:25,040
to our code base.

24
00:01:25,550 --> 00:01:29,030
So let's go ahead and change our code up quite a bit here.

25
00:01:29,420 --> 00:01:36,920
Therefore, what we are going to start with is going to be something called a constraint set.

26
00:01:37,520 --> 00:01:41,270
OK, so I'm going to create this private function called portrait.

27
00:01:42,850 --> 00:01:43,750
Constraints.

28
00:01:44,410 --> 00:01:49,300
OK, so here I will pass in the margin that I want to use throughout the entire.

29
00:01:51,520 --> 00:01:52,030
Method.

30
00:01:52,270 --> 00:01:52,590
Okay.

31
00:01:52,990 --> 00:01:58,330
You need to import DP here for it to work, and it should return a constrained set.

32
00:01:58,720 --> 00:02:01,510
So this method, when it's called it, will return a constraints set.

33
00:02:02,200 --> 00:02:04,480
So let's go ahead and return a constraint set.

34
00:02:05,230 --> 00:02:06,400
So constraint.

35
00:02:08,020 --> 00:02:09,130
Set this one here.

36
00:02:09,699 --> 00:02:16,480
So now we need to say what we want to have in this constraints that so how do we want to constraint

37
00:02:17,110 --> 00:02:19,030
all of our items here?

38
00:02:19,060 --> 00:02:27,040
So for example, we have this constraint for our image and I'm going to close Samsung Dex because it's

39
00:02:27,040 --> 00:02:29,170
going to you constantly want something from me.

40
00:02:29,440 --> 00:02:35,650
So here we have the constraint, as with the image and the top link to start linked to and and link

41
00:02:35,660 --> 00:02:35,950
to.

42
00:02:36,490 --> 00:02:39,010
And this is linked to the guideline and so forth.

43
00:02:39,020 --> 00:02:43,570
But now let's look at how we can set this up inside of our constraints set here.

44
00:02:44,080 --> 00:02:46,690
Therefore, we need to have a reference to our image.

45
00:02:47,110 --> 00:02:52,330
So let's give it a reference by calling the Create RAV4 method.

46
00:02:52,900 --> 00:02:58,120
And here we need to pass in the idea that we want to use, and I'm going to give it the idea of image.

47
00:02:58,810 --> 00:03:02,260
So now I can create a constraint for my image.

48
00:03:02,680 --> 00:03:07,090
So here I present the image and I can define what I want to have.

49
00:03:07,300 --> 00:03:12,880
So let me just copy the constraint that I have for my image from here.

50
00:03:14,480 --> 00:03:17,910
So copy it and pasted in here.

51
00:03:18,680 --> 00:03:21,290
Even though the guideline, of course, now does not exist.

52
00:03:22,130 --> 00:03:23,580
I'm just going to.

53
00:03:23,720 --> 00:03:27,860
Well, keep it simple and say that it should be linked to the parent top.

54
00:03:28,700 --> 00:03:32,870
So now let's do the same thing for our next item on the list.

55
00:03:33,320 --> 00:03:34,880
So what would be the next item?

56
00:03:34,910 --> 00:03:37,280
Well, I'd say it's the name text.

57
00:03:37,760 --> 00:03:42,830
So let's go ahead and create a reference for the name text like so.

58
00:03:43,900 --> 00:03:47,290
And now we need to add the constraint for that main text.

59
00:03:47,470 --> 00:03:50,200
So here, main text should have the constraint.

60
00:03:50,500 --> 00:03:56,950
And now let's see what constraints we have for the text and it was this one here we call that name text.

61
00:03:56,950 --> 00:03:59,650
So here you see modifier constraint as name text.

62
00:03:59,920 --> 00:04:05,190
So let's just copy this part out and put it in here for the name text.

63
00:04:06,160 --> 00:04:11,170
And now we need to do the same thing for all of the other items as well, even though here we just copy

64
00:04:11,170 --> 00:04:14,920
and pasting because we had the constraints set up for the portrait mode.

65
00:04:15,240 --> 00:04:19,060
But now we want to have them for the landscape mode as well.

66
00:04:19,420 --> 00:04:23,620
So let's, first of all, finish the portrait mode and then go over to the landscape mode.

67
00:04:23,860 --> 00:04:30,400
So I'm just going to simplify this and set up all of the properties that we're going to need here.

68
00:04:30,880 --> 00:04:35,890
So all of the variables, the contrary, text the raw stats, and I'm going to call them raw stats.

69
00:04:35,890 --> 00:04:38,860
Like this button follow button message and guideline.

70
00:04:39,340 --> 00:04:42,670
OK, so now let's go ahead and create the constraints for them.

71
00:04:43,330 --> 00:04:44,920
So we have the name text.

72
00:04:45,100 --> 00:04:50,110
Now let's go ahead and add the country text, which will just be.

73
00:04:51,190 --> 00:04:57,310
To the bottom of the name text, so it's topped the country text top will be linked to the bottom of

74
00:04:57,310 --> 00:04:58,930
the name text, so it will be underneath it.

75
00:04:59,290 --> 00:05:01,690
It will be towards the left of the parent.

76
00:05:01,720 --> 00:05:06,010
What's left will be at the left of the parent and the right will be at the right of the parent, which

77
00:05:06,010 --> 00:05:06,700
will drag it.

78
00:05:07,210 --> 00:05:10,630
So we will get it like where the text is in the middle.

79
00:05:10,720 --> 00:05:14,050
So that's what we get by dragging it towards both sides.

80
00:05:14,260 --> 00:05:14,470
Okay.

81
00:05:14,530 --> 00:05:15,130
What the contrary.

82
00:05:15,130 --> 00:05:15,490
Text.

83
00:05:15,940 --> 00:05:18,100
Now let's add the row stats as well.

84
00:05:19,270 --> 00:05:26,500
So where we have the stats in one room, as well as the button to follow, and here we have something

85
00:05:27,130 --> 00:05:29,050
I misread that we have the width as well.

86
00:05:29,080 --> 00:05:34,480
Yeah, so basically we have the same approach, only that the margin now will be defined as the margin

87
00:05:34,480 --> 00:05:37,950
that we are passing to the portray constraints method.

88
00:05:37,960 --> 00:05:42,610
So this parameter that we have here will just be used here.

89
00:05:43,480 --> 00:05:43,840
All right.

90
00:05:43,910 --> 00:05:52,030
Now the same thing for the message button, OK, button message will be linked to the row stats bottom.

91
00:05:52,450 --> 00:05:58,720
It will be to the right hand side of the button fellow.

92
00:05:59,110 --> 00:06:03,010
So it's left would be to the right of the button follow.

93
00:06:03,820 --> 00:06:07,690
OK, so that's what we're saying, and there's a right will be to the end of the screen.

94
00:06:07,690 --> 00:06:13,030
So to the parent and to the right hand side of the screen, and we're wrapping the content for the width.

95
00:06:13,510 --> 00:06:18,370
So now if we do that, we can go ahead and use this portrait constraint.

96
00:06:18,850 --> 00:06:25,510
But therefore we need to make sure that our constrained layout will be inside of something called a

97
00:06:26,170 --> 00:06:28,450
box with constraints.

98
00:06:28,990 --> 00:06:35,470
So let's create this BOF box with constraints, and now we can create the constraints in here.

99
00:06:35,650 --> 00:06:39,580
So constraints which will be defined using an if statement.

100
00:06:39,880 --> 00:06:45,250
So if the men with will be 600 density pixels.

101
00:06:46,630 --> 00:06:52,000
So if the width of the screen that we have available will be 600 density pixels, then please use my

102
00:06:52,000 --> 00:06:59,110
portrait constraints with a margin of 16 density pixels and then otherwise.

103
00:06:59,890 --> 00:07:03,820
So in the LS block, set up the landscape mode.

104
00:07:03,940 --> 00:07:09,040
So here to do call landscape constraints.

105
00:07:10,120 --> 00:07:14,500
So we need to, of course, set up the landscape constraints method, which will be pretty much the

106
00:07:14,500 --> 00:07:19,800
same thing as our trade constraints method, but has different values assigned to it.

107
00:07:19,810 --> 00:07:20,980
So different constraints.

108
00:07:21,730 --> 00:07:27,160
So now we just need to tell our constraint layout that it should use this constraints variable.

109
00:07:27,760 --> 00:07:35,120
So I should really modify its appearance based on the settings that we have defined.

110
00:07:35,130 --> 00:07:41,710
So here can and should call this one constraints like so then it makes sense.

111
00:07:42,310 --> 00:07:47,290
So now if I use these constraints, you see, suddenly all of this stuff doesn't work anymore, so create

112
00:07:47,290 --> 00:07:48,790
rifts doesn't work anymore.

113
00:07:49,120 --> 00:07:54,700
The image with its constraint s doesn't work anymore, so we need to get rid of this stuff altogether.

114
00:07:55,270 --> 00:07:57,070
So let me delete this.

115
00:07:59,260 --> 00:08:05,620
And the same goes for there's create references and guidelines because we cannot use it anymore.

116
00:08:07,910 --> 00:08:10,730
So let's do the same thing with our.

117
00:08:11,750 --> 00:08:15,230
Well, for the tax, we don't need the modifier to define it here anymore.

118
00:08:16,600 --> 00:08:17,620
Same goes here.

119
00:08:19,980 --> 00:08:22,490
So let's get rid of this thing.

120
00:08:22,590 --> 00:08:24,600
It even goes all the way up to here.

121
00:08:28,820 --> 00:08:30,770
And the same goes for this modifier.

122
00:08:30,800 --> 00:08:33,140
Well, actually only for the constraints, because here.

123
00:08:34,520 --> 00:08:41,210
We want to keep the rest as we had it, and we used to modify only for constraints either.

124
00:08:41,299 --> 00:08:46,040
So let's get rid of the entire modifier and same goes here.

125
00:08:49,900 --> 00:08:54,070
Even though I just realized that we will need to use the modifier to assign an ID.

126
00:08:54,400 --> 00:08:58,450
So now let's assign IDs to each of those items.

127
00:08:59,140 --> 00:09:06,190
OK, so we have those IDs that we have here, you see, create reference ID for the image, for the

128
00:09:06,190 --> 00:09:08,950
name, text for the country takes the role, stats and so forth.

129
00:09:09,340 --> 00:09:09,670
Right.

130
00:09:09,670 --> 00:09:16,120
So now we need to say that, for example, the image at the top will have that particular ID.

131
00:09:16,780 --> 00:09:19,150
So let's assign this ID to it.

132
00:09:19,480 --> 00:09:24,490
Therefore, I'm going to add the layout ID here, and this one will be the image.

133
00:09:25,920 --> 00:09:29,280
Then we need to add an ID to my text.

134
00:09:29,550 --> 00:09:36,360
So let's use the modifier, the odd layout ID and call this one what they would call the name text,

135
00:09:36,360 --> 00:09:37,530
I think name text.

136
00:09:38,700 --> 00:09:43,860
And the same goes for this one here, separate with a comma.

137
00:09:43,890 --> 00:09:51,210
Add the modifier and actually modifier should be the modifier as well as modifier should be the modifier

138
00:09:51,210 --> 00:09:51,540
here.

139
00:09:51,810 --> 00:09:53,940
And this one will be their country.

140
00:09:54,960 --> 00:09:55,410
Text.

141
00:09:57,070 --> 00:09:59,170
So now the role needs an ID as well.

142
00:09:59,290 --> 00:10:05,770
So let's add in layout ID, and I think we call the role stats row stats.

143
00:10:07,530 --> 00:10:08,340
The button here.

144
00:10:09,960 --> 00:10:20,100
Modifier and not this, but modifier like so with the modifier layout I.D. and this one was the follow

145
00:10:20,100 --> 00:10:20,550
button.

146
00:10:20,760 --> 00:10:21,660
How do we call it?

147
00:10:21,930 --> 00:10:22,680
Button follow.

148
00:10:22,770 --> 00:10:23,230
OK.

149
00:10:26,180 --> 00:10:30,560
And she will need to do the same thing with Button.

150
00:10:32,810 --> 00:10:34,790
And what was that message?

151
00:10:39,110 --> 00:10:44,870
So now, obviously, all of our constraint layout should be inside of this box with constraints, so

152
00:10:44,870 --> 00:10:48,590
let's make sure that we add the closing bracket in here.

153
00:10:50,150 --> 00:10:55,190
And now our constraint layout will use the box with constraints.

154
00:10:58,220 --> 00:11:01,310
And after having done that just for.

155
00:11:02,330 --> 00:11:08,330
Testing purposes, let's add this portrait constraints in here as well, because otherwise those constraints

156
00:11:08,330 --> 00:11:14,060
would be empty and you cannot pass in an empty constraints setting for the constraint layout.

157
00:11:14,330 --> 00:11:16,100
So we're just saying, OK, constraint there.

158
00:11:16,100 --> 00:11:22,250
Please use the following settings the constraints set that we have created for you.

159
00:11:22,530 --> 00:11:28,490
OK, so you can see constraints is of type constraint set, which is exactly what the constraints will

160
00:11:28,490 --> 00:11:35,690
return or will be of type because the trade constraints method is returning a constraint set.

161
00:11:36,320 --> 00:11:43,190
So we have set up all of this set items and now we can use it for our application.

162
00:11:43,460 --> 00:11:49,970
So now currently, because we don't have the other constraints set, which would be the landscape constraints

163
00:11:49,970 --> 00:11:52,970
set, this will not do anything for it.

164
00:11:52,970 --> 00:11:58,070
So this will basically be the same thing as we had it before, where the application is going to look

165
00:11:58,070 --> 00:12:03,470
the same, no matter which way we are using it, on which format we're using it.

166
00:12:04,130 --> 00:12:08,510
So let me open up Dex again to display this.

167
00:12:10,070 --> 00:12:11,180
OK, so there we are.

168
00:12:11,390 --> 00:12:13,340
So we don't have this distance to the top.

169
00:12:13,550 --> 00:12:14,930
We are going to fix that later.

170
00:12:15,230 --> 00:12:18,230
But you see that this is currently what we're getting.

171
00:12:18,240 --> 00:12:21,230
So it's not exactly the design that I showed you earlier.

172
00:12:21,680 --> 00:12:23,200
It's still fine.

173
00:12:23,210 --> 00:12:26,270
It should be OK, but it's not really the design that I want to have.

174
00:12:26,600 --> 00:12:31,190
So I would like to design it in a way where these parts here.

175
00:12:31,490 --> 00:12:36,410
So the followers following and posts will be to the right hand side of the Siberian Husky.

176
00:12:36,830 --> 00:12:38,240
So let's set this up now.

177
00:12:38,810 --> 00:12:45,560
Therefore, we will need to create an extra method which will be similar to this portrait constraints.

178
00:12:45,980 --> 00:12:48,860
So let's go ahead and set it up private fun.

179
00:12:49,430 --> 00:12:51,890
And this one will be a landscape.

180
00:12:53,740 --> 00:12:54,430
Constraints.

181
00:12:56,770 --> 00:13:02,200
Which will use a margin of density pixels, and it will return a constraint set.

182
00:13:03,100 --> 00:13:07,720
So now let's return the constraints that once again constraints set.

183
00:13:09,370 --> 00:13:13,210
Like so and now we need to say how this constrains that should look like.

184
00:13:13,420 --> 00:13:17,260
Therefore, we will need to have the references to all of the items as well.

185
00:13:17,290 --> 00:13:19,420
So let's get those references in there.

186
00:13:20,590 --> 00:13:24,450
And now we can start defining how the constraint should look like.

187
00:13:24,460 --> 00:13:27,220
So let's start with the constraint for our image.

188
00:13:28,030 --> 00:13:31,900
OK, so the image, how do we want the image to be positioned?

189
00:13:32,260 --> 00:13:36,730
So I want to link it to the parent's top.

190
00:13:37,330 --> 00:13:39,670
And then I want to have a little bit of a margin as well.

191
00:13:40,030 --> 00:13:48,910
So I'm going to set the margin to be the margin, and the start of it should be linked to the parent

192
00:13:48,910 --> 00:13:49,280
thought.

193
00:13:49,310 --> 00:13:54,310
Start with the margin being the margin that we defined up here.

194
00:13:54,430 --> 00:13:58,000
OK, so this margin, this is what this margin here is.

195
00:13:58,810 --> 00:14:00,430
OK, so this is just the image.

196
00:14:00,430 --> 00:14:04,620
For now, we don't have any constraints for all of the other items.

197
00:14:04,990 --> 00:14:10,540
So let's look at how this is going to do on our device, so we turn it around.

198
00:14:11,200 --> 00:14:13,300
And while it's not using this constraint set yet.

199
00:14:13,540 --> 00:14:15,010
So let's set this up real quick.

200
00:14:15,010 --> 00:14:16,090
And where would that be?

201
00:14:16,210 --> 00:14:17,970
I hope you can figure it out.

202
00:14:17,980 --> 00:14:19,270
It's this part here.

203
00:14:19,630 --> 00:14:24,100
So let's use the landscape constraints again, where the margin of 16 density pixels.

204
00:14:24,550 --> 00:14:29,020
So now we're going to use these other constraints of this other set up that we have started, but they

205
00:14:29,020 --> 00:14:29,860
haven't finished yet.

206
00:14:30,130 --> 00:14:33,220
And for now, we only have defined where the image should be positioned.

207
00:14:33,610 --> 00:14:40,180
So let's turn around our device and you can see the image is positioned here and everything else is

208
00:14:40,180 --> 00:14:43,870
just crammed towards the top left side because it doesn't know where it has to be.

209
00:14:43,960 --> 00:14:50,530
It doesn't have any constraints, which is why we get this weird look in our application, so we can't

210
00:14:50,530 --> 00:14:56,860
even see the name of the dog, as well as the other buttons and so forth, because they are all on top

211
00:14:56,860 --> 00:14:58,780
of each other, all towards the left.

212
00:14:58,780 --> 00:14:59,750
So let's fix that.

213
00:15:00,370 --> 00:15:06,220
Therefore, let's go ahead and design how our landscape constraints should be looking.

214
00:15:06,850 --> 00:15:13,360
So I'm going to add the constraint to the name text, and I'm going to paste them in here and talk through

215
00:15:13,360 --> 00:15:13,780
what's up.

216
00:15:14,260 --> 00:15:17,650
So the name text should be to the.

217
00:15:18,690 --> 00:15:26,400
Image says start so to the left hand side of the image, and it should be underneath, so it's top the

218
00:15:26,400 --> 00:15:28,890
in then-Texas top should be underneath the image.

219
00:15:29,310 --> 00:15:32,430
So what I want with this is it should be at the left.

220
00:15:33,120 --> 00:15:36,900
On the eve of the image, you will see how this is going to look like now.

221
00:15:36,900 --> 00:15:38,800
Let's do the same thing with the contrary text.

222
00:15:39,030 --> 00:15:43,470
OK, so the country text, however, should be underneath our name text.

223
00:15:43,480 --> 00:15:44,850
So it's top.

224
00:15:45,000 --> 00:15:49,170
So it's country text top should be at the bottom of the name text.

225
00:15:49,830 --> 00:15:53,730
It should be to the left of the name text and to the right of the name text.

226
00:15:54,210 --> 00:15:57,800
So this is a little confusing, you might say.

227
00:15:57,810 --> 00:16:05,460
But what this will do is it will just position it exactly underneath and a centered manner.

228
00:16:05,730 --> 00:16:08,370
OK, so this is what these two constraints will do for us.

229
00:16:08,730 --> 00:16:11,910
So let's run this and see how this is actually going to do.

230
00:16:14,570 --> 00:16:20,600
So let's turn it around, and you see that we have the Siberian Husky and Germany underneath our image.

231
00:16:21,050 --> 00:16:22,160
So that seems to work.

232
00:16:22,520 --> 00:16:29,150
Now let's at the other constraints that's at the role constraint, and I want the role to be linked

233
00:16:29,150 --> 00:16:35,240
to the image, to the top of the image, but also to the a right of the image.

234
00:16:35,240 --> 00:16:38,780
So the images end, which is the images right side should be.

235
00:16:40,310 --> 00:16:48,170
The start of the left hand side of our row stats and our stats, you might recall is this entire roll

236
00:16:48,170 --> 00:16:49,630
thingy that we set up here.

237
00:16:49,640 --> 00:16:56,330
So the profile stats which are inside of this roll, which has three profile stats with the followers

238
00:16:56,330 --> 00:16:57,240
the following and posts.

239
00:16:58,100 --> 00:16:58,970
OK, so now.

240
00:17:01,440 --> 00:17:08,190
I want also to link the end to the parents, and so I want to say go all the way to the end of the right

241
00:17:08,190 --> 00:17:09,900
hand side of the parent.

242
00:17:10,880 --> 00:17:14,180
OK, so it's right, should be on the right of the screen.

243
00:17:14,720 --> 00:17:16,119
So let's run this again.

244
00:17:18,790 --> 00:17:23,560
And turn it around, and we see now the posts seem to work fine.

245
00:17:24,010 --> 00:17:26,140
So now we need to take care of the two buttons, right?

246
00:17:26,770 --> 00:17:29,080
So let's go ahead and add those constraints as well.

247
00:17:31,090 --> 00:17:32,320
And the button.

248
00:17:33,940 --> 00:17:42,490
Follow should be so it's top, so it's top corner or top edge should be linked to the bottom of the

249
00:17:42,490 --> 00:17:48,130
raw stats, so it should be underneath the raw stats with a little bit of margin and it's left hand

250
00:17:48,130 --> 00:17:51,130
side should be to the left hand side of the rosters.

251
00:17:51,370 --> 00:17:57,190
And there's right hand side should be at the left hand side of the button message.

252
00:17:57,550 --> 00:17:59,110
So we don't have the button message yet.

253
00:17:59,440 --> 00:18:00,520
Let's set that up as well.

254
00:18:00,880 --> 00:18:04,570
And its bottom, it should be linked to the country texts bottom.

255
00:18:05,590 --> 00:18:08,050
So this country texts bottom.

256
00:18:09,760 --> 00:18:15,190
So what it will do is it will make sure that the button doesn't overlap.

257
00:18:15,820 --> 00:18:21,760
OK, now the button follow will only make sense if we also have the button message because they are

258
00:18:21,760 --> 00:18:22,870
both important here.

259
00:18:22,870 --> 00:18:24,280
So let's look at the button message.

260
00:18:24,580 --> 00:18:31,600
Its top should be also to the bottom of the roll stance, as we had with our button follow.

261
00:18:32,900 --> 00:18:35,540
Then it starts should be linked to the button follow.

262
00:18:36,410 --> 00:18:40,760
So to the end of the button follow, so it should be to the right of the button follow.

263
00:18:41,540 --> 00:18:44,060
And it's and should be linked to the parent ENT.

264
00:18:44,540 --> 00:18:50,210
And then finally, the bottom of the button should be linked to the contrary text bottom as well.

265
00:18:50,720 --> 00:18:53,630
So let's rerun this and see this in action.

266
00:18:54,590 --> 00:18:59,230
So let's turn it around and we see that we get our little husky.

267
00:18:59,240 --> 00:19:05,360
We have our followers and then we have the follow user as well as direct message positioned in the format

268
00:19:05,360 --> 00:19:07,280
that I wanted it to be.

269
00:19:08,270 --> 00:19:13,160
OK, so now you could, of course, play around with the values here for your constraints, for your

270
00:19:13,160 --> 00:19:14,920
landscape constraints set up.

271
00:19:15,380 --> 00:19:22,940
So now you know how you can make sure to have different layouts or how to define those different layouts

272
00:19:22,940 --> 00:19:25,190
inside of your jetpack compose application.

273
00:19:25,730 --> 00:19:29,450
So basically, what you need to do is you need to set up the constraint sets.

274
00:19:29,660 --> 00:19:36,290
You could have also done it, of course, directly here, but I recommend to create extra methods decoupling

275
00:19:36,290 --> 00:19:36,440
it.

276
00:19:36,740 --> 00:19:42,950
And then we have the box with constraints in which we can then use our constrained layout with the constraints

277
00:19:42,950 --> 00:19:43,820
that we had set up.

278
00:19:45,170 --> 00:19:45,620
OK.

279
00:19:45,830 --> 00:19:51,860
And this is because the men with of 600 is not given for our application.

280
00:19:51,860 --> 00:19:54,830
If we turn it and then it goes into the landscape constraint mode.

281
00:19:57,480 --> 00:20:00,330
And I know constraints are really a pain in the butt.

282
00:20:00,540 --> 00:20:01,860
At least that's my opinion.

283
00:20:02,250 --> 00:20:03,140
I'm not a big fan of it.

284
00:20:03,150 --> 00:20:08,670
I would have preferred to use the column stuff, but it's just not as performance, which is why we

285
00:20:08,670 --> 00:20:11,040
just have to get used to it and use it.

286
00:20:11,550 --> 00:20:16,320
And once you get the hang of it, you are going to have no problems at all with it.

287
00:20:16,680 --> 00:20:21,480
And one thing that I didn't mention that you, of course, also always need to set up are going to be

288
00:20:21,480 --> 00:20:22,650
the layout IDs.

289
00:20:22,770 --> 00:20:27,960
So you need to set up those IDs to be exactly the same as we have set them up here.

290
00:20:29,180 --> 00:20:37,010
So now, of course, you could say use the guideline here for the top link to for the image if you want

291
00:20:37,010 --> 00:20:38,960
to use it in their constrained mode.

292
00:20:39,260 --> 00:20:45,530
OK, so 0.3 or maybe 0.1 and this should look a little better, I guess.

293
00:20:47,670 --> 00:20:54,210
So let's run it, and you see, now we have this distance towards the top 0.3 will give us significantly

294
00:20:54,210 --> 00:20:56,340
more distance towards the top.

295
00:20:57,090 --> 00:21:00,300
Like so in the World Center, our doggie.

296
00:21:00,930 --> 00:21:01,320
All right.

297
00:21:01,530 --> 00:21:02,790
So that's it for this video.

298
00:21:02,910 --> 00:21:03,780
See you in the next one.