1
00:00:01,240 --> 00:00:01,870
Welcome back.

2
00:00:02,170 --> 00:00:09,010
So at this point, we have this beautiful little card with our husky and all the items looking quite

3
00:00:09,010 --> 00:00:09,430
good.

4
00:00:10,030 --> 00:00:16,329
The problem is that what we're using here are a bunch of columns with a bunch of rows, and it can become

5
00:00:16,329 --> 00:00:21,880
quite complex when it comes to more complicated and advanced user interfaces.

6
00:00:21,910 --> 00:00:26,320
So this is a rather simple one, but sometimes things are just more complicated.

7
00:00:26,620 --> 00:00:32,049
And in that case, it really makes sense to use something called the constraint a layout which is also

8
00:00:32,049 --> 00:00:37,060
recommended by Google as the way to build your user interfaces.

9
00:00:37,360 --> 00:00:42,880
So in this video, we're going to restructure this entire user interface using a constraint layout,

10
00:00:43,150 --> 00:00:49,090
and that can help us place composable relative to others on the screen.

11
00:00:49,570 --> 00:00:55,540
And it is really an alternative for our nested row and column box custom layout elements that we have

12
00:00:55,540 --> 00:00:56,330
used so far.

13
00:00:56,860 --> 00:01:03,430
So constraint layouts are really helpful when it comes to larger layouts with complicated alignments.

14
00:01:04,030 --> 00:01:11,320
So the steps that we need to take include creating a reference for each composable in a constraint layout.

15
00:01:11,320 --> 00:01:16,630
So we need to have the name, for example, for this image here, it has to have an I.D. Let's call

16
00:01:16,640 --> 00:01:18,220
a dog image, for example.

17
00:01:18,610 --> 00:01:23,040
Then the text could be called a breed.

18
00:01:23,260 --> 00:01:27,040
This could, for example, be the location where the dog is or whatever.

19
00:01:27,140 --> 00:01:27,550
OK.

20
00:01:27,790 --> 00:01:33,520
So everything has to have a name and then we can find it, and then we can use those modifiers to actually

21
00:01:33,520 --> 00:01:36,580
constrain them to other composable so element.

22
00:01:36,610 --> 00:01:41,920
So, for example, we know that dog image, for example, is above the breed.

23
00:01:43,030 --> 00:01:51,280
OK, and then at the same time, we see that the dog is towards the top, so it's the most top element

24
00:01:51,280 --> 00:01:52,000
that we have.

25
00:01:52,330 --> 00:01:54,780
And then everything can be relative to each other.

26
00:01:54,790 --> 00:02:00,880
So this element here with the text and the followers is next to this one.

27
00:02:00,880 --> 00:02:08,020
So it's towards the left, so towards the bottom of your screen and then or to the card specifically

28
00:02:08,020 --> 00:02:09,759
here and then to the right.

29
00:02:09,759 --> 00:02:15,910
It has this element where it says hello following and then to the right it has 330 posts and so forth,

30
00:02:15,910 --> 00:02:16,150
right?

31
00:02:16,150 --> 00:02:17,890
So we're going to set all of this up.

32
00:02:17,890 --> 00:02:22,870
It sounds quite complicated and it really isn't too uncomplicated, but we're going to be fine.

33
00:02:22,880 --> 00:02:24,340
So let's just have a look at this.

34
00:02:24,760 --> 00:02:31,120
The first thing that we will need to make sure is that we do have an implementation inside of our build.gradle

35
00:02:31,150 --> 00:02:31,960
app file.

36
00:02:31,960 --> 00:02:34,480
So call an app here in the brackets, it's really important.

37
00:02:34,480 --> 00:02:35,500
Otherwise this won't work.

38
00:02:35,920 --> 00:02:41,500
So here in the dependency so you can scroll all the way down, you will find dependencies down here.

39
00:02:41,800 --> 00:02:47,650
Here you are basically saying which kind of packages you want to be available for your project.

40
00:02:47,980 --> 00:02:51,070
And the ones that we have by default is here.

41
00:02:51,070 --> 00:02:54,550
For example, compose UI and you see we're using compose UI.

42
00:02:55,030 --> 00:02:58,000
Then we have the material from compose.

43
00:02:58,000 --> 00:03:04,540
We have the tooling preview so that we can preview our compose layout and so forth.

44
00:03:05,050 --> 00:03:09,400
OK, so now here we need to add the following line Let me paste it in here.

45
00:03:10,150 --> 00:03:17,170
It's going to be this Android constraint layout column constraint layout minus compose colon 1.0 dot

46
00:03:17,230 --> 00:03:19,330
zero minus RC zero one.

47
00:03:19,330 --> 00:03:24,310
This is going to be the version that I'm going to use here specifically, and this will now allow us

48
00:03:24,310 --> 00:03:25,740
to use constraint layouts.

49
00:03:25,750 --> 00:03:29,640
Therefore, we need to make sure to sync it, so click on sync now.

50
00:03:29,650 --> 00:03:31,810
Otherwise this won't work, obviously.

51
00:03:32,080 --> 00:03:40,330
So now, once the sinking is done, we can go back to our profile page and now use constraint layouts

52
00:03:40,330 --> 00:03:41,560
inside of here.

53
00:03:42,070 --> 00:03:42,520
OK.

54
00:03:42,880 --> 00:03:45,670
So let's convert this entire page.

55
00:03:46,270 --> 00:03:50,890
So the profile page to use instead of columns are constraint layouts.

56
00:03:51,280 --> 00:03:57,730
Now, unfortunately, if I do that, then all of this other stuff will cause some errors for now.

57
00:03:58,090 --> 00:03:59,050
But let's have a look.

58
00:03:59,230 --> 00:04:04,870
So I'm going to use constraint layout here.

59
00:04:05,830 --> 00:04:08,830
OK, so this one right here, constraint layout.

60
00:04:09,040 --> 00:04:16,180
Now, obviously, I get some errors here because we need to, as I said, define the IDs.

61
00:04:16,209 --> 00:04:19,890
So for example, the image needs to know what name it has and so forth.

62
00:04:19,899 --> 00:04:25,600
So we need to create references and let's do that for every single composable.

63
00:04:28,050 --> 00:04:33,900
So therefore, I'm inside of our constraint layout, and as this constraint layout is not a column,

64
00:04:33,900 --> 00:04:41,040
but it is something different, we don't need to define properties in it so we can get rid of that.

65
00:04:41,170 --> 00:04:45,870
You see now the arrows disappeared, but this by itself will not fix our issues.

66
00:04:46,170 --> 00:04:52,080
So we need to create a reference ID for the image composable, for example, so we can just go ahead

67
00:04:52,350 --> 00:04:58,020
and create a value which will be of type image and will define it as create arrests.

68
00:04:58,530 --> 00:05:02,040
So we create the reference IDs here.

69
00:05:02,580 --> 00:05:07,410
For now, we can add a reference to our image.

70
00:05:07,650 --> 00:05:10,800
So you see we have this modifier for our image.

71
00:05:11,160 --> 00:05:11,360
OK?

72
00:05:11,400 --> 00:05:19,410
This modifier has size to clip the border, and now we can add a constraint s so here constraint as

73
00:05:19,830 --> 00:05:21,500
and give it the name.

74
00:05:21,510 --> 00:05:24,570
So I'm just going to constrain it as image.

75
00:05:27,290 --> 00:05:33,710
When we use constraint as, however, we also need to define how something is positioned.

76
00:05:33,950 --> 00:05:39,080
So for example, the image is going to be connected towards the top.

77
00:05:39,620 --> 00:05:44,030
OK, so we use here Top Dot a link to.

78
00:05:44,930 --> 00:05:47,210
So we're linking it to an anchor.

79
00:05:47,780 --> 00:05:52,070
And here we can just go to Parent Dot Top.

80
00:05:52,370 --> 00:05:54,660
So we're linking it to the top of the parent.

81
00:05:54,680 --> 00:06:02,030
Now it is linked to basically its parent, which is the card itself where it is inside of.

82
00:06:02,480 --> 00:06:08,630
So this image is inside of the constraint layout, which is connected to the card, which is now going

83
00:06:08,630 --> 00:06:09,530
towards the top.

84
00:06:10,310 --> 00:06:16,100
And then we need to define that it will be at the link left side as well.

85
00:06:16,130 --> 00:06:18,980
So we link it towards the left side of the parent.

86
00:06:19,130 --> 00:06:20,720
So parent dot start.

87
00:06:21,020 --> 00:06:25,250
So start is left to the left side and and is the right side.

88
00:06:25,370 --> 00:06:30,320
So and that link to and here parent thought and.

89
00:06:33,150 --> 00:06:38,680
OK, now we need to define a dis modifier with those constraints for our text as well.

90
00:06:38,700 --> 00:06:46,350
So for the Siberian Husky So Modifier and I'm going to use modifier and this has to be separated by

91
00:06:46,350 --> 00:06:46,860
a comma.

92
00:06:47,340 --> 00:06:53,190
OK, so modifier dots and we can use the constraint as here as well.

93
00:06:53,490 --> 00:06:58,790
So now we need to say what the reference name for this text will be.

94
00:06:58,800 --> 00:07:02,790
So how are we going to call this text and I'm going to call this text name text?

95
00:07:03,270 --> 00:07:08,280
And now I can connect it to my top.

96
00:07:09,340 --> 00:07:12,340
Of the bottom of the image.

97
00:07:12,550 --> 00:07:14,650
So what is going on here?

98
00:07:14,680 --> 00:07:15,670
Let's have a look at this.

99
00:07:16,090 --> 00:07:20,380
So what I'm saying here is the top of this name text.

100
00:07:20,620 --> 00:07:27,400
So the Siberian husky should be connected to the bottom of the image, so it should be underneath the

101
00:07:27,400 --> 00:07:29,800
image and the image is this one here?

102
00:07:30,580 --> 00:07:39,190
So now I can go ahead and also make sure that the left is linked to the left hand side of the screen

103
00:07:39,460 --> 00:07:46,410
by connecting it to the parent, and the right is linked to the right hand side of the screen.

104
00:07:46,420 --> 00:07:48,100
So parent and.

105
00:07:50,080 --> 00:07:59,110
OK, so now for us to test this, let's comment everything else out all the way up to the bottom row.

106
00:07:59,140 --> 00:08:02,950
OK, so I'm going to commend all of those parts out and I still get an error.

107
00:08:03,220 --> 00:08:08,930
So here now I have a reference to my image, but I don't have a reference to my name.

108
00:08:08,950 --> 00:08:09,350
Text.

109
00:08:09,730 --> 00:08:12,370
So I need to add that reference here as well.

110
00:08:12,640 --> 00:08:15,340
So let me add the name text here as well.

111
00:08:17,060 --> 00:08:20,060
And I realized that this should be called create rifts.

112
00:08:20,390 --> 00:08:23,150
Like so and then the arrow will disappear as well.

113
00:08:23,630 --> 00:08:28,370
So now let's run this real quick to see if our UI is still going to work.

114
00:08:28,370 --> 00:08:31,550
At this point, we should only get the image and the text.

115
00:08:31,760 --> 00:08:34,880
So the name of the dog breed?

116
00:08:37,720 --> 00:08:38,559
So there we are.

117
00:08:38,590 --> 00:08:41,250
We have the image and we have the text.

118
00:08:41,530 --> 00:08:46,210
But now we're using the approach that Google wants us to use.

119
00:08:46,480 --> 00:08:46,700
Yeah.

120
00:08:46,720 --> 00:08:47,110
All right.

121
00:08:47,500 --> 00:08:52,110
So this is how we added the name text now as a little challenge for you.

122
00:08:52,120 --> 00:08:54,640
Can you add this text here?

123
00:08:54,640 --> 00:09:00,200
So this text, which says Germany, where the dog currently is situated or lives currently?

124
00:09:00,580 --> 00:09:06,640
Can you make sure that this will also be on the screen, but will be underneath this text here, which

125
00:09:06,640 --> 00:09:12,820
says Siberian Husky, so you will need to create a modifier and you will need to change those things

126
00:09:12,820 --> 00:09:14,410
up just a tiny bit.

127
00:09:14,800 --> 00:09:17,140
OK, so please go ahead and try this for yourself.

128
00:09:18,250 --> 00:09:18,560
All right.

129
00:09:18,580 --> 00:09:19,630
I hope you tried it.

130
00:09:20,050 --> 00:09:23,440
So I'm going to commit this in so common.

131
00:09:23,440 --> 00:09:30,190
This uncommon this, so to speak, and then I will need to add the modifier in here.

132
00:09:30,190 --> 00:09:30,850
And you know what?

133
00:09:30,850 --> 00:09:37,150
I'm just going to copy this modifier here and just make sure that the name that I give this.

134
00:09:37,780 --> 00:09:43,930
So the ID, so to speak for my location texts will be different.

135
00:09:44,440 --> 00:09:48,280
So I'm just going to call this one, for example, country text.

136
00:09:48,970 --> 00:09:51,760
OK, so this will be country text.

137
00:09:51,760 --> 00:09:53,110
Where is the dog?

138
00:09:53,470 --> 00:09:58,420
So obviously, the country text doesn't exist, so we need to create the reference up here.

139
00:09:59,140 --> 00:10:03,070
So let's add the reference country text now.

140
00:10:04,060 --> 00:10:09,730
Let's make sure that it will be underneath, not the image, but underneath the name text.

141
00:10:10,270 --> 00:10:18,340
So here we can say that the top of this text here, which says Germany, which has the name of country

142
00:10:18,340 --> 00:10:25,270
text or the idea of country text, should be at the bottom of the name texts, which means just underneath

143
00:10:25,270 --> 00:10:25,360
it.

144
00:10:25,780 --> 00:10:27,250
So let's have a look at this.

145
00:10:27,400 --> 00:10:29,230
Let's see how this is going to pan out.

146
00:10:29,500 --> 00:10:30,190
And there we are.

147
00:10:30,190 --> 00:10:33,700
So we have the Siberian Husky and underneath we have Germany.

148
00:10:34,300 --> 00:10:36,340
So how do we now add the other one?

149
00:10:36,340 --> 00:10:38,710
So let's add the role, for example, here.

150
00:10:39,130 --> 00:10:43,600
Let's start with the first row before we add all of the other rows.

151
00:10:43,810 --> 00:10:44,200
OK.

152
00:10:44,320 --> 00:10:49,960
So inside of this role, we have the profile stats which are linked together, which is still OK so

153
00:10:49,960 --> 00:10:55,180
we can still use composable as we have done here, where we use a column and it's connected.

154
00:10:55,450 --> 00:10:58,090
But as you see, we are use a column.

155
00:10:58,390 --> 00:11:02,470
And before that, we use the column within a row within a column.

156
00:11:02,860 --> 00:11:08,890
And that's really something you should try to avoid because all of this nesting of columns and rows

157
00:11:09,610 --> 00:11:14,170
at a certain point is just becoming inefficient when it comes to performance.

158
00:11:14,620 --> 00:11:19,570
So that's why we are even bothering to set up this constraint layout.

159
00:11:19,720 --> 00:11:20,260
OK.

160
00:11:20,320 --> 00:11:23,440
So this is really something you should take into consideration.

161
00:11:24,310 --> 00:11:24,800
All right.

162
00:11:24,850 --> 00:11:28,990
So now that we have this managed, let's go ahead and add the row.

163
00:11:30,450 --> 00:11:30,780
So.

164
00:11:32,370 --> 00:11:35,290
We have a modifier for the role already, so that's cool.

165
00:11:35,310 --> 00:11:39,570
So now can just add our constraint us and.

166
00:11:40,860 --> 00:11:41,550
Give it the name.

167
00:11:42,000 --> 00:11:46,300
I'm going to call this one row stats and then I'm going to link it.

168
00:11:46,590 --> 00:11:52,260
OK, so top link to and here I can just go ahead and link it to the country.

169
00:11:52,260 --> 00:11:54,750
Text so country text like so.

170
00:11:56,230 --> 00:12:03,580
Add to its bottom to be more precise, so I want this role to be underneath our country text and I want

171
00:12:03,580 --> 00:12:04,990
it to be called rogue stats.

172
00:12:05,470 --> 00:12:10,810
And obviously, I need to add the raw stats to my references that we need to create.

173
00:12:10,990 --> 00:12:15,310
OK, so here at the beginning of the constraint layout, we have our image, the name text.

174
00:12:15,310 --> 00:12:21,100
The country takes the road stats right now, so let's check it out and see how this is going to pan

175
00:12:21,100 --> 00:12:21,490
out.

176
00:12:21,490 --> 00:12:25,810
And we see we have our role with the followers following and posts.

177
00:12:26,380 --> 00:12:27,790
OK, so that seemed to work.

178
00:12:27,970 --> 00:12:28,690
That's perfect.

179
00:12:29,350 --> 00:12:34,810
So now we have our profile stats beautifully, and you see, we didn't have to add this, that it's

180
00:12:34,810 --> 00:12:40,240
linked to the left or to the right would just say it's underneath the existing text.

181
00:12:40,690 --> 00:12:46,000
And now you might think you could have gotten rid of these two other lines here as well.

182
00:12:46,000 --> 00:12:47,100
But let's check it out.

183
00:12:47,110 --> 00:12:48,880
Let's see how this is going to work out.

184
00:12:48,880 --> 00:12:54,220
And you see now Germany as all the way to the left because we didn't say that it should be linked to

185
00:12:54,220 --> 00:13:00,070
the left and to the right, because if we link it towards the left and to the right, it will be direct

186
00:13:00,070 --> 00:13:06,130
towards both directions, which will end up pulling it directly into the center where we want it to

187
00:13:06,130 --> 00:13:08,980
be like, we have it with the Siberian Husky.

188
00:13:09,550 --> 00:13:13,000
OK, so let me get rid of those two lines and run it again.

189
00:13:14,890 --> 00:13:15,460
There we are.

190
00:13:15,880 --> 00:13:17,530
So why do we not needed for the role?

191
00:13:17,860 --> 00:13:23,950
Well, this role by default, is going to fill the max with as we have defined it here.

192
00:13:24,150 --> 00:13:28,150
OK, so we defined that it should take the entire with possible.

193
00:13:28,150 --> 00:13:30,970
So we don't need to define that it should be linked to the left and right.

194
00:13:31,870 --> 00:13:37,660
All right now at to underneath of it, we have our role with the buttons.

195
00:13:38,020 --> 00:13:42,850
OK, so now we don't need to put an extra role for the buttons.

196
00:13:42,850 --> 00:13:45,580
What we can do is we can position the buttons directly.

197
00:13:46,030 --> 00:13:49,990
So let me get rid of all of this unnecessary code.

198
00:13:50,410 --> 00:13:54,820
But obviously we need to add modifiers to our buttons.

199
00:13:55,030 --> 00:14:02,500
So the modifiers where we put them, what we put them at the bottom or button a level at its.

200
00:14:03,530 --> 00:14:07,610
Parametres here, so we are defining that we need a modifier here.

201
00:14:08,960 --> 00:14:14,300
So let me put that in a second roll or line modifier dots.

202
00:14:15,320 --> 00:14:16,520
And here.

203
00:14:17,480 --> 00:14:21,800
What we need to do is to use constrain us, so do we have a director here?

204
00:14:22,100 --> 00:14:24,200
Well, you see, there are so many different methods, right?

205
00:14:24,620 --> 00:14:28,820
So let's just tip it out, constrain past that.

206
00:14:28,820 --> 00:14:29,240
We are.

207
00:14:29,810 --> 00:14:31,720
So now we need to give it a name.

208
00:14:31,730 --> 00:14:35,690
So let's give this a name of button follow.

209
00:14:36,080 --> 00:14:37,490
So this will be the follow button.

210
00:14:37,580 --> 00:14:43,580
And obviously, once we create this ID, we need to add it up here as well.

211
00:14:44,870 --> 00:14:50,870
OK, so let me put that in a second role for it to be still readable very well, and then we can go

212
00:14:50,870 --> 00:14:53,930
ahead and define where this button should be.

213
00:14:54,890 --> 00:15:03,860
And I'm going to say that it should be linked to the role stats dot bottom.

214
00:15:05,090 --> 00:15:10,670
And then I can also directly define a margin, for example, so I want to have a little bit of a distance

215
00:15:10,670 --> 00:15:15,890
to it, so I'm going to add a margin of 16 density pixels to it.

216
00:15:19,450 --> 00:15:24,010
Now, at this point, it created a little bit too many brackets for me.

217
00:15:24,490 --> 00:15:30,970
Then I want to make sure that it is linked to the left hand side so linked to the parents start.

218
00:15:32,760 --> 00:15:41,280
And to the well, the end will only work once we have the button that we want to have right next to

219
00:15:41,280 --> 00:15:41,460
it.

220
00:15:41,790 --> 00:15:49,560
So let's run this real quick just to see without this button here, let me cut it out for a second.

221
00:15:52,350 --> 00:15:54,540
So you see, this is a way to follow user will be.

222
00:15:55,050 --> 00:15:56,970
Let's just add this additional button.

223
00:15:57,330 --> 00:15:59,550
The second one, and I'm just going to.

224
00:16:01,560 --> 00:16:03,690
Copy this part here and put it in here.

225
00:16:04,920 --> 00:16:07,230
So this one would be the button message.

226
00:16:08,180 --> 00:16:09,200
So let's rename it.

227
00:16:09,290 --> 00:16:10,460
Button message.

228
00:16:12,050 --> 00:16:15,560
Let's make sure to add it as well here to our.

229
00:16:18,620 --> 00:16:19,280
References.

230
00:16:20,370 --> 00:16:25,710
And now we can use the button message, and I want it to be also underneath the raw stats.

231
00:16:26,890 --> 00:16:34,360
And I wanted to not be at the parent start, but towards the button follow.

232
00:16:34,540 --> 00:16:39,250
So it's left side should be to the right of the button follow.

233
00:16:40,000 --> 00:16:44,880
And this means that we need to say and so button follows end.

234
00:16:45,250 --> 00:16:50,710
So it's the right hand side should be to the left hand side of our button message.

235
00:16:51,460 --> 00:16:52,660
That's what I'm defining here.

236
00:16:53,440 --> 00:17:01,150
And at the same time, it should be linked to the right hand side of the entire screen or to its parent

237
00:17:01,150 --> 00:17:02,140
to be more precise.

238
00:17:02,200 --> 00:17:05,319
So here I'm going to define it as the parent.

239
00:17:07,140 --> 00:17:11,160
So let's see how this is going to pan out.

240
00:17:13,750 --> 00:17:18,640
You see, now the button is connected to what is to the right of the follow user.

241
00:17:19,270 --> 00:17:25,359
Now let's also make sure that there is a relationship in both directions, so I'm going to link this

242
00:17:25,359 --> 00:17:31,060
right hand side also to the button message how I call it right.

243
00:17:31,570 --> 00:17:38,410
So to its left site, so to its start, which means we need to use a link to method.

244
00:17:39,070 --> 00:17:43,960
So now the width is something that I'm going to define as well.

245
00:17:44,380 --> 00:17:48,250
What I'm going to say that they mention should be rep content.

246
00:17:48,670 --> 00:17:56,050
So it should only be as white this button as the content requires, which this content does for us.

247
00:17:56,650 --> 00:18:02,200
So it's not going to be wider than it needs to be basically based on the text that we have inside of

248
00:18:02,200 --> 00:18:02,380
it.

249
00:18:03,040 --> 00:18:04,540
OK, so let's check it out.

250
00:18:04,540 --> 00:18:12,190
And you see now our buttons are perfectly linked to each other because we have specifically set the

251
00:18:12,190 --> 00:18:13,270
constraints now.

252
00:18:13,930 --> 00:18:18,370
But now we have one a little problem and that is our Huskey here at the top.

253
00:18:18,400 --> 00:18:22,750
It's directly linked to the card, so there's no more space at the top.

254
00:18:23,140 --> 00:18:24,970
Let's take care of that as well.

255
00:18:25,450 --> 00:18:30,400
Therefore, we will need to use something called a.

256
00:18:32,640 --> 00:18:38,370
And therefore, we will need to use something called a guideline, and guidelines are invisible lines

257
00:18:38,640 --> 00:18:44,160
for positioning elements to a particular point on the screen from different axes.

258
00:18:44,550 --> 00:18:47,610
So now we want to create a guideline from the top.

259
00:18:48,480 --> 00:18:49,650
Let's go ahead and assign it.

260
00:18:50,130 --> 00:18:52,290
Therefore, let me go up a little bit.

261
00:18:53,800 --> 00:18:56,320
So here what I'm creating my reference.

262
00:18:58,840 --> 00:19:01,090
I'm also going to create my guideline.

263
00:19:04,440 --> 00:19:11,100
So guide a line, as I'm going to call it, and this one will be called Create Guide Line or we call

264
00:19:11,100 --> 00:19:12,570
the method guideline.

265
00:19:14,040 --> 00:19:15,420
From the top.

266
00:19:16,410 --> 00:19:23,070
OK, so here I'm creating a guideline of zero point three.

267
00:19:23,260 --> 00:19:23,610
If.

268
00:19:26,160 --> 00:19:31,590
And I need to make sure that I'm not using Capitol Hill here, so the method was predefined.

269
00:19:32,070 --> 00:19:39,930
So what this will do is it will create a distance of a third towards the top, so it will go down a

270
00:19:39,930 --> 00:19:40,170
bit.

271
00:19:41,100 --> 00:19:49,170
So now, instead of making sure that my image is going to be here towards the top of the parent, which

272
00:19:49,170 --> 00:19:53,160
is currently the case, you see it's directly connected to the parent.

273
00:19:53,490 --> 00:19:55,170
I wanted to use the guideline.

274
00:19:55,590 --> 00:20:01,260
So here I'm not going to say stop, but that basically just the guideline here.

275
00:20:01,260 --> 00:20:03,030
So link to the guideline.

276
00:20:03,390 --> 00:20:06,280
Let's rerun this and see how this is going to pan out.

277
00:20:06,300 --> 00:20:09,990
And you see now it created all of this distance for us.

278
00:20:10,000 --> 00:20:13,650
So it's at the second, third, so to speak of the screen.

279
00:20:13,890 --> 00:20:17,240
So that's how you can define the guideline.

280
00:20:17,250 --> 00:20:18,600
So let's play around with this.

281
00:20:19,290 --> 00:20:25,440
Let's say we set this to zero thought one, and now you see that there is significantly less of the

282
00:20:25,440 --> 00:20:29,790
distance, so you could play around with this and see what fits your requirements.

283
00:20:32,040 --> 00:20:32,510
OK.

284
00:20:32,550 --> 00:20:40,710
And that's pretty much how we can rebuild our UI that we have built before in a constrained layout,

285
00:20:40,710 --> 00:20:43,500
which, as I said, is the best practice approach.

286
00:20:43,800 --> 00:20:47,520
And while now, you know, so the structure is always the same.

287
00:20:47,970 --> 00:20:54,540
Make sure that you create the references with the name that you don't want to use in your constraint

288
00:20:54,540 --> 00:20:55,800
as as a parameter.

289
00:20:56,100 --> 00:21:03,620
And then in curly brackets, you do the linking to either the parent and start means left and means

290
00:21:03,630 --> 00:21:04,200
right.

291
00:21:04,410 --> 00:21:10,620
Top means that the top of obviously and bottom at the bottom of whatever you are linking it to.

292
00:21:10,980 --> 00:21:17,100
So our image is now linked towards the guideline that we created, which just pushes that that a little

293
00:21:17,100 --> 00:21:22,830
further down, that is linked to the left hand side and it is linked to the right hand side of its parent,

294
00:21:22,830 --> 00:21:23,880
which is this card.

295
00:21:24,150 --> 00:21:31,440
Because if we look at it, our constraint layout is inside of this card and it's going to be a little

296
00:21:31,440 --> 00:21:34,500
more obvious once I connect those two like so.

297
00:21:34,800 --> 00:21:36,470
So now it's obvious.

298
00:21:36,480 --> 00:21:40,470
It's a constraint layout is directly inside of the card, which is inside of the profile page.

299
00:21:41,460 --> 00:21:46,890
OK, so that's it for this video and the next video, we're going to look at how we can use constraint

300
00:21:46,890 --> 00:21:48,810
layouts with decoupled API.

301
00:21:48,970 --> 00:21:49,740
So see you there.