1
00:00:00,970 --> 00:00:01,720
Welcome back.

2
00:00:01,990 --> 00:00:07,960
And this video, we are going to finalize our little dialogue here, you can see that off the divider,

3
00:00:07,960 --> 00:00:13,300
there is quite something to still appear on one hand two more accounts that they want to display, as

4
00:00:13,300 --> 00:00:19,480
well as well this ad, another account and accounts on this device, as well as another divider with

5
00:00:19,480 --> 00:00:21,700
the Privacy Policy and the terms of service.

6
00:00:22,000 --> 00:00:25,150
So that's what we're going to add in this video.

7
00:00:25,480 --> 00:00:26,390
So let's get started.

8
00:00:27,130 --> 00:00:31,660
And by the way, I highly recommend that you tried this yourself, at least some parts of it.

9
00:00:31,660 --> 00:00:34,370
So this first part is something you should be able to do.

10
00:00:34,390 --> 00:00:39,910
You see, if we don't have an icon or an image, then we would just want to use the first letter of

11
00:00:39,910 --> 00:00:40,510
the name.

12
00:00:40,870 --> 00:00:45,610
And then, yeah, the rest is basically just rows with icons.

13
00:00:45,760 --> 00:00:48,730
So you should be able to implement the rest by yourself.

14
00:00:48,730 --> 00:00:53,500
So really take some time to try to implement this and then go to the end.

15
00:00:53,800 --> 00:00:59,920
Once you have finished is to also be able to get rid of this dialogue once you click on the cross,

16
00:00:59,920 --> 00:01:00,550
for example.

17
00:01:02,120 --> 00:01:09,470
OK, so first of all, we will need something that is going to be an account because we did use accounts

18
00:01:09,470 --> 00:01:13,590
or similar to accounts already for our emails and for this account.

19
00:01:13,610 --> 00:01:18,950
So what I'm going to do is I'm just going to create a data class which will have an icon that will be

20
00:01:18,950 --> 00:01:23,270
another bill so it can have an integer or it cannot have an integer with the integer would just be the

21
00:01:23,270 --> 00:01:24,770
resource for the image.

22
00:01:25,100 --> 00:01:26,720
Then we have a username.

23
00:01:26,990 --> 00:01:30,590
We have the email and then the unread email amount.

24
00:01:30,830 --> 00:01:35,230
So this integer that will display how many emails we have not yet.

25
00:01:36,050 --> 00:01:38,520
OK, so let's go ahead and create a new model for that.

26
00:01:38,540 --> 00:01:44,330
Therefore, I'm going to create a new data class, which I'm going to call accounts like so.

27
00:01:44,900 --> 00:01:52,730
So this data class will have, as I just said, an icon, which will be an integer Nullarbor, and it

28
00:01:52,730 --> 00:01:57,260
will be null by default, then a username which will be of type string.

29
00:01:57,770 --> 00:02:01,550
And then the email, which will also be a type string.

30
00:02:01,910 --> 00:02:05,510
And finally, as I said, the amount of unread emails.

31
00:02:06,020 --> 00:02:08,570
So this is our little account model.

32
00:02:08,810 --> 00:02:13,910
As you see, whenever we are working with some kind of data structure, we need to create a model.

33
00:02:14,120 --> 00:02:15,980
We had that with our mail data.

34
00:02:16,280 --> 00:02:19,940
We had that with our draw menu data and so forth.

35
00:02:19,950 --> 00:02:21,810
So you see, the mail data is similar.

36
00:02:21,830 --> 00:02:22,940
We also have a username.

37
00:02:23,840 --> 00:02:24,110
What?

38
00:02:24,110 --> 00:02:26,780
We have a subject here who we just had the email.

39
00:02:26,780 --> 00:02:30,950
Well, there is one the item that is the same, so to speak.

40
00:02:32,360 --> 00:02:35,540
Now we will need to have a list of dummy data.

41
00:02:35,990 --> 00:02:43,320
So let's just go ahead to our mock or mock data and create a list of accounts.

42
00:02:43,340 --> 00:02:48,650
So I'm going to call this one account a list, which will just be a list of accounts.

43
00:02:48,950 --> 00:02:52,880
So of account class, and therefore it's going to be like this.

44
00:02:53,240 --> 00:02:53,400
OK.

45
00:02:53,900 --> 00:02:59,070
And let's import account, which will be our own account, not the Android accounts, but our model

46
00:02:59,360 --> 00:02:59,810
account.

47
00:03:00,350 --> 00:03:02,570
And now let's add the account items.

48
00:03:03,050 --> 00:03:05,360
So I'm just going to add them in here.

49
00:03:05,360 --> 00:03:08,330
I'm going to paste in here and then talk over what's up.

50
00:03:08,720 --> 00:03:13,640
So we have the first account which actually has an icon and it's our tutorials icon.

51
00:03:14,540 --> 00:03:20,690
Then we have the username, which is tutorials you and then we have the email as well as the unread

52
00:03:20,690 --> 00:03:21,260
emails.

53
00:03:22,130 --> 00:03:26,840
And then we have an account where we don't have an icon, which is fine because Icon is a Nullarbor,

54
00:03:26,850 --> 00:03:29,840
so it can be null and can be empty, so to speak.

55
00:03:30,290 --> 00:03:35,900
Then we have the user name Kristie and email of Christian email dot com and unread emails is going to

56
00:03:35,900 --> 00:03:36,560
be 80.

57
00:03:37,400 --> 00:03:41,540
OK, so this will be our account list or mock data, so to speak.

58
00:03:41,780 --> 00:03:44,660
Usually you would get that from a database.

59
00:03:44,660 --> 00:03:47,030
So usually from, let's say.

60
00:03:48,750 --> 00:03:57,630
Firebase or A.W. or something like that, and then we need to go over to our accounts dialog and create

61
00:03:57,630 --> 00:03:59,550
individual account items.

62
00:03:59,580 --> 00:04:05,610
OK, now you could, of course, go ahead and say you're going to create this account item composable

63
00:04:05,610 --> 00:04:10,140
outside of your accounts dialog, but we're only going to use it inside of here, so we don't need to

64
00:04:10,140 --> 00:04:17,279
create an extra component file for it, even though you could do that once you need it later on, for

65
00:04:17,279 --> 00:04:17,820
example.

66
00:04:18,329 --> 00:04:22,800
So what we're going to do is here and create a new compile zobel.

67
00:04:24,590 --> 00:04:26,460
And then this will be fun.

68
00:04:27,190 --> 00:04:28,490
Count item.

69
00:04:30,520 --> 00:04:35,050
So we need to have an account in here which will be of type accounts.

70
00:04:35,170 --> 00:04:41,170
So whenever we want to display an account item, we need to have details about the account that we want

71
00:04:41,170 --> 00:04:41,830
to display.

72
00:04:42,400 --> 00:04:48,970
So if the account contains an icon, set the image element with the icon and if not, set a card and

73
00:04:48,970 --> 00:04:53,600
a text within it to show the first character of the user name.

74
00:04:53,680 --> 00:04:55,360
So as you see here, it's this one.

75
00:04:55,660 --> 00:05:00,100
So we have used this functionality before you see here.

76
00:05:00,220 --> 00:05:03,670
We had also the first letter, so it will be something very similar.

77
00:05:04,090 --> 00:05:06,760
But generally speaking, how does an account item look like?

78
00:05:07,450 --> 00:05:08,490
It has the icon.

79
00:05:08,500 --> 00:05:15,580
It has the text on top of the email address and then it has the numbers so we can really just replace

80
00:05:15,580 --> 00:05:22,810
it or copy it from our accounts dialog UI, because that's where we used to do this entire thing, right?

81
00:05:25,430 --> 00:05:31,840
Then we had this role, which contained the image with the text and so forth.

82
00:05:31,880 --> 00:05:33,650
So this entire part here.

83
00:05:34,810 --> 00:05:40,390
So let's take this and put it in there into the account item.

84
00:05:41,110 --> 00:05:43,360
Now we need to make some changes to this.

85
00:05:44,260 --> 00:05:45,370
So first of all.

86
00:05:47,140 --> 00:05:51,580
Let's go ahead and set the modifier, so the thing is, we're not passing the modifier right here,

87
00:05:51,940 --> 00:05:56,710
so we need to do it like this modifier dot and then fill max with and so forth.

88
00:05:58,190 --> 00:06:05,270
OK, so we fill the mix with we have a padding, then we have our image and the image will only be displayed

89
00:06:05,270 --> 00:06:06,530
if we have an account.

90
00:06:06,830 --> 00:06:08,690
Otherwise, we want to do something else.

91
00:06:08,990 --> 00:06:20,240
So here I need to see if the account that icon is not null then showed the image, so then showed this

92
00:06:20,240 --> 00:06:27,860
image with the modifier here being modifier dot, I done size and so forth.

93
00:06:28,430 --> 00:06:31,300
So not do not take the draw.

94
00:06:31,670 --> 00:06:35,150
That will be our tutorials icon, but a count that I can.

95
00:06:36,890 --> 00:06:43,040
So whatever icon is inside of where it was stored inside of the account, so here I can, which is an

96
00:06:43,040 --> 00:06:45,420
integer, but integers are just resources.

97
00:06:45,440 --> 00:06:48,170
So the direction, what resources, so to speak?

98
00:06:48,830 --> 00:06:49,190
OK.

99
00:06:49,910 --> 00:06:50,330
So then.

100
00:06:51,350 --> 00:06:58,790
We have our image, and now if we don't have the image on the block, we need to create a card which

101
00:06:58,790 --> 00:07:00,160
will take the user name.

102
00:07:00,170 --> 00:07:01,610
So where did we have that?

103
00:07:02,810 --> 00:07:04,910
So we have that in the immense right.

104
00:07:04,910 --> 00:07:08,540
So in May, who took over?

105
00:07:08,900 --> 00:07:10,370
We had it in our.

106
00:07:11,390 --> 00:07:15,020
It should be our mail list, right where we displayed it.

107
00:07:15,350 --> 00:07:23,630
So every single mail item had the first letter like, so this was the card that we used.

108
00:07:24,110 --> 00:07:31,640
So let's just use this card once again, and let's go back to our file that we were at before, which

109
00:07:31,640 --> 00:07:32,870
was the account's dialogue.

110
00:07:33,320 --> 00:07:38,990
So down the block, we can use this card and this will be modifier like so.

111
00:07:39,230 --> 00:07:44,450
And instead of using the mail data, we are going to use to account that username.

112
00:07:45,110 --> 00:07:49,070
And here it's just going to be the modifier like so modified to petty.

113
00:07:49,970 --> 00:07:50,360
OK.

114
00:07:50,600 --> 00:07:54,650
So this will create our image or this icon.

115
00:07:55,040 --> 00:08:00,950
And then we have this modifier equals modifier.

116
00:08:02,090 --> 00:08:03,710
So this should fix this problem.

117
00:08:04,370 --> 00:08:10,760
There we are displaying the details about the while the way to the start.

118
00:08:10,840 --> 00:08:12,140
I think all of that is fine.

119
00:08:12,260 --> 00:08:18,290
And now, instead of showing you, we will actually need to use the username, of course, and instead

120
00:08:18,290 --> 00:08:24,590
of showing them, yeah, my email address or the email address that we use their email.

121
00:08:25,040 --> 00:08:33,590
And obviously, the text should also not display 19:9, but instead it should use a dollar sign with

122
00:08:33,590 --> 00:08:39,470
the opening and closing brackets where we get the unread emails count.

123
00:08:39,950 --> 00:08:41,600
And now you could add plus.

124
00:08:41,780 --> 00:08:50,090
So you could also add like an if statement if unread emails is above 99, then used to plus and otherwise

125
00:08:50,090 --> 00:08:50,360
known.

126
00:08:50,360 --> 00:08:52,370
But I'm not going to bother for this case.

127
00:08:52,370 --> 00:08:58,220
So even though we have this 80 plus what is 80 plus, is it 81 or what is it now?

128
00:08:58,220 --> 00:09:02,080
You could of course, modify this, and I would recommend that you try this.

129
00:09:02,090 --> 00:09:03,770
So this is a little change for you.

130
00:09:04,070 --> 00:09:06,080
Go ahead and create an if statement here.

131
00:09:06,080 --> 00:09:11,240
Will you check the amount of unread emails and add the plus if it's above 99 and if it's lower than

132
00:09:11,240 --> 00:09:14,480
99, don't add it all came.

133
00:09:15,710 --> 00:09:20,990
So that should pretty much be how an account item is going to look like.

134
00:09:21,320 --> 00:09:25,460
Now what I'm going to do is I'm going to display the account items.

135
00:09:27,000 --> 00:09:32,700
So here and our Akon's dialogue, we used all of this, right?

136
00:09:32,880 --> 00:09:33,480
So.

137
00:09:35,380 --> 00:09:36,880
Think it was this one here?

138
00:09:38,630 --> 00:09:42,470
All the way up to there, or was it this, yes, it was that part.

139
00:09:42,980 --> 00:09:51,260
So now we can replace this with our account item where we passed the account to be account list at the

140
00:09:51,260 --> 00:09:52,400
position of zero.

141
00:09:52,460 --> 00:09:57,740
So our first item from our account list, this was the account list, which what this what is this I

142
00:09:57,740 --> 00:09:59,300
can draw bill and so forth.

143
00:10:00,290 --> 00:10:06,320
So if we did everything correctly, we should still see our account item.

144
00:10:06,320 --> 00:10:07,820
So the number one, the first one?

145
00:10:08,930 --> 00:10:10,630
So let's see and we still see it.

146
00:10:10,640 --> 00:10:11,340
So that's great.

147
00:10:11,360 --> 00:10:16,660
We know that we didn't make a mistake there, but you can actually test it with the mock data even further.

148
00:10:16,670 --> 00:10:22,610
You could go ahead and add three here, for example, and run it again and see if it changes to three

149
00:10:22,610 --> 00:10:23,000
plus.

150
00:10:24,290 --> 00:10:25,010
And there we are.

151
00:10:25,130 --> 00:10:27,190
So that seemed to work perfect.

152
00:10:27,500 --> 00:10:33,230
So we have a gazillion emails and unread emails, and now it's going to show probably.

153
00:10:33,980 --> 00:10:36,650
Uh, yeah, it's going to show a lot of emails.

154
00:10:36,980 --> 00:10:40,580
So that's how we're going to go about it.

155
00:10:41,180 --> 00:10:41,630
Okay.

156
00:10:43,610 --> 00:10:49,160
Now, let's go ahead and add the other items underneath, so like we had it here where we had Chris

157
00:10:49,160 --> 00:10:53,690
and Chris Moody and Christie Jane.

158
00:10:54,440 --> 00:10:57,390
So let's add those two, which is just a column, right?

159
00:10:57,410 --> 00:10:59,060
So this is a column of items.

160
00:10:59,690 --> 00:11:02,540
So item one and account item two.

161
00:11:03,820 --> 00:11:08,650
OK, so let's go ahead and build that in our account, a dialogue.

162
00:11:09,100 --> 00:11:14,740
So we had all of our rows, then we had the divider, and here I'm just going to add the column underneath.

163
00:11:15,100 --> 00:11:20,770
So we are inside of our Collins dialogue to we see the method here Collins dialogue UI.

164
00:11:20,830 --> 00:11:28,240
OK, so here we need to go ahead and add the account items.

165
00:11:28,420 --> 00:11:34,870
So account item one, which will be account list at position one and then let me just copy this line

166
00:11:35,320 --> 00:11:37,150
and paste it in here with two.

167
00:11:37,810 --> 00:11:38,170
OK.

168
00:11:38,470 --> 00:11:42,640
So this will be our two new account items that we should now see as well.

169
00:11:44,050 --> 00:11:46,030
And there we are Chris Mordi and Jane.

170
00:11:46,750 --> 00:11:51,040
Now we need something that is going to be called add counts.

171
00:11:51,040 --> 00:11:56,740
So I'm just going to new create a new composable, which will just use an icon and then a text.

172
00:11:57,250 --> 00:12:01,570
So let's go ahead and created this ad account thingy.

173
00:12:02,200 --> 00:12:03,940
So this ad account composable.

174
00:12:04,330 --> 00:12:09,820
So here, fun or just let's add the ad composable keyword straight away, because otherwise I might

175
00:12:09,830 --> 00:12:12,710
forget it again, and then it's going to show an error for a while.

176
00:12:12,730 --> 00:12:19,160
So here I'm going to call this one ad account, which needs an icon, which will be of type, image

177
00:12:19,160 --> 00:12:23,290
a vector and it needs a title which will be of type string.

178
00:12:24,480 --> 00:12:30,090
So let's import image vector and then let's go ahead and create a row.

179
00:12:30,570 --> 00:12:35,190
So this role will have a modifier of modified dart fill mixed with.

180
00:12:35,760 --> 00:12:43,440
So it should fill the entire width of the screen, then the padding of, let's say, 16 dpi towards

181
00:12:43,440 --> 00:12:44,430
the left hand side.

182
00:12:44,550 --> 00:12:46,440
So 16 dpi like so.

183
00:12:46,980 --> 00:12:51,060
And then as the content of this rule, I want to have an icon button.

184
00:12:52,170 --> 00:12:55,140
So I'm just going to paste the icon button in here.

185
00:12:55,140 --> 00:12:56,670
We have seen icon buttons before.

186
00:12:56,670 --> 00:12:57,630
This is nothing new.

187
00:12:58,020 --> 00:13:03,030
So we have the icon button, which has an icon inside of it, which uses the icon that we are passing

188
00:13:03,030 --> 00:13:03,150
to.

189
00:13:03,150 --> 00:13:09,180
This ad account has the image vector as a content description of empty and uses a modifier of having

190
00:13:09,180 --> 00:13:12,630
a padding towards the bottom of eight density pixels.

191
00:13:13,620 --> 00:13:19,200
And then after that, so it's the roll rate, so items are going from left to right.

192
00:13:19,200 --> 00:13:26,610
So the next item is going to be a text and this text will just use the title and we'll have a font weight

193
00:13:26,760 --> 00:13:29,070
of being semi bold.

194
00:13:29,310 --> 00:13:36,300
So this one here, if you can't decide whether you want to use a comma or semicolon like colon, you're

195
00:13:36,300 --> 00:13:38,700
going to use a semicolon or something like that.

196
00:13:39,150 --> 00:13:46,230
So here, modifier dot padding, I'm going to add a little bit of padding towards the top of eight density

197
00:13:46,230 --> 00:13:50,280
pixels and let me put that into a separate line so it's more readable.

198
00:13:50,790 --> 00:13:57,390
And then we have the start of page density pixels as well.

199
00:13:57,900 --> 00:13:58,470
Like so?

200
00:13:59,220 --> 00:14:03,170
So this is going to be how the had account thing you should look like.

201
00:14:03,180 --> 00:14:04,260
So this part here.

202
00:14:04,530 --> 00:14:14,370
So now we can call it just underneath all of this, not underneath this inside of our accounts dialog

203
00:14:14,370 --> 00:14:15,000
UI.

204
00:14:15,120 --> 00:14:19,860
So let me reduce everything here so that you know where I'm putting it.

205
00:14:19,860 --> 00:14:23,450
I'm putting it underneath this column where I added the account items.

206
00:14:23,460 --> 00:14:31,110
So here that's at the account with the icon that we wanted to add, and I'm just going to use the icon.

207
00:14:31,860 --> 00:14:37,350
I can start outlined that and manage accounts.

208
00:14:38,850 --> 00:14:41,940
And then the other and what we need to add a title as well.

209
00:14:42,390 --> 00:14:48,030
So let's add a title here, manage accounts on this device.

210
00:14:49,410 --> 00:14:57,090
And then the second one will be that I can where I'm going to use, I think the first one was that person.

211
00:14:57,430 --> 00:14:58,530
I think so.

212
00:14:58,530 --> 00:15:10,410
Yeah, let's just add this default third person had old with the title of add another account.

213
00:15:10,650 --> 00:15:16,080
And by the way, you can just check out what those different icons mean, how they're going to look

214
00:15:16,080 --> 00:15:16,380
like.

215
00:15:16,380 --> 00:15:20,580
So this person add all this, just this little thing here, just plus.

216
00:15:21,030 --> 00:15:26,430
So let me just put it on top because I accidentally had it in the wrong order.

217
00:15:26,850 --> 00:15:29,230
But this will now create our ad account.

218
00:15:29,250 --> 00:15:31,890
So let's see if those two will now appear.

219
00:15:34,180 --> 00:15:37,390
And there we are at another account manager console on this device.

220
00:15:37,540 --> 00:15:40,210
So then after that, you saw that we had a divider.

221
00:15:40,390 --> 00:15:42,580
So let's add this divider in here as well.

222
00:15:43,930 --> 00:15:44,290
All right.

223
00:15:44,470 --> 00:15:48,310
So divider will be modifier.

224
00:15:49,420 --> 00:15:51,310
Well, it will just have a little bit of padding.

225
00:15:51,490 --> 00:15:56,030
It was a top of 16 deep and towards the bottom of 16 deep.

226
00:15:56,740 --> 00:15:58,090
So just a little bit of distance.

227
00:15:58,090 --> 00:15:59,770
Otherwise they would be too close together.

228
00:16:00,190 --> 00:16:03,880
So maybe six would be too much, but I think it's going to be fine.

229
00:16:04,750 --> 00:16:11,890
All right now, we have this privacy policy and these terms of service, which are basically just well,

230
00:16:11,890 --> 00:16:20,020
is a roll with a text, then a dot in the middle, which can be used as a card and then another text.

231
00:16:20,680 --> 00:16:22,600
So nothing that we haven't done yet.

232
00:16:22,870 --> 00:16:24,760
So going to use to.

233
00:16:26,260 --> 00:16:30,250
Modifier key word again, modifiers to be the modifier.

234
00:16:34,020 --> 00:16:35,640
Thought Phil mixed with.

235
00:16:37,030 --> 00:16:46,630
And I want to have a horizontal range of a range DOD space evenly.

236
00:16:47,530 --> 00:16:49,720
So the items should be spaced evenly now.

237
00:16:49,720 --> 00:16:53,200
This row obviously needs the content, otherwise it will be super unhappy.

238
00:16:53,590 --> 00:16:57,760
And the content will just be the text that says Privacy Policy.

239
00:16:57,970 --> 00:17:02,350
Then it will have a little card that will just be a dot.

240
00:17:03,220 --> 00:17:09,940
So I'm just creating this card that doesn't have any content, but it's going to be a card with a circle

241
00:17:09,940 --> 00:17:14,010
shape with the size of three, and it has a black background.

242
00:17:14,050 --> 00:17:16,450
So this creates this little thought that we have here.

243
00:17:16,869 --> 00:17:21,040
Now, you couldn't make this up bigger by changing decisive, it would be fine.

244
00:17:21,670 --> 00:17:24,579
And then finally, we have this text that says terms of service.

245
00:17:24,790 --> 00:17:26,650
So let's add this in here as well.

246
00:17:27,339 --> 00:17:29,710
So at this point, let's test our application.

247
00:17:30,820 --> 00:17:33,520
Let's see if we have everything and we are.

248
00:17:33,700 --> 00:17:37,330
So now we have the Privacy Policy terms of service just a little thought here.

249
00:17:37,630 --> 00:17:40,810
But now clicking on the cross doesn't work.

250
00:17:41,320 --> 00:17:45,100
So how do we import or how do we implement this functionality?

251
00:17:46,960 --> 00:17:55,120
Well, before we need to have the state, so we need to know the state of our dialogue, so we have

252
00:17:55,120 --> 00:17:59,340
this open dialogue, mutable state of Boolean that we have used before.

253
00:17:59,770 --> 00:18:04,930
So we need to add that then we need to make sure that this value is going to be true or false, depending

254
00:18:04,930 --> 00:18:05,470
on what's up.

255
00:18:05,860 --> 00:18:08,260
So inside of this, we had this.

256
00:18:09,960 --> 00:18:17,130
I can button scene, it was, I think, here, yeah, we have this Iken button where we have this default

257
00:18:17,130 --> 00:18:17,730
close.

258
00:18:18,390 --> 00:18:19,740
So here I can button.

259
00:18:19,740 --> 00:18:27,660
Once we click on it, we want something to change and we want to change the value of our open dialogue

260
00:18:27,660 --> 00:18:30,030
to be false because then it will not be open anymore.

261
00:18:30,030 --> 00:18:34,440
So we're closing the dialogue, we're changing the state of the dialogue from being open to being closed.

262
00:18:34,860 --> 00:18:40,080
So that's what we do once we click on this icon button, which is just this little icon button, which

263
00:18:40,080 --> 00:18:40,920
is this cross here.

264
00:18:44,050 --> 00:18:48,490
Now, if you do that, on one hand, you have this account dialogue, you are here at the top, which

265
00:18:48,490 --> 00:18:49,420
now needs a state.

266
00:18:49,450 --> 00:18:53,350
Luckily, we have the state already here, the mutable state open dialogue.

267
00:18:53,710 --> 00:18:55,720
So we need to pass that in here.

268
00:18:57,020 --> 00:19:00,540
But just passing it like that doesn't seem to do the trick.

269
00:19:00,560 --> 00:19:03,710
So we need to use open dialogue equals open dialogue.

270
00:19:03,830 --> 00:19:08,990
OK, so we need to specifically state which one of the variables we are overwriting.

271
00:19:09,410 --> 00:19:12,050
So we are using the names, apparently just this way.

272
00:19:12,890 --> 00:19:13,370
OK.

273
00:19:13,580 --> 00:19:19,610
So but when we do that, you see at the very bottom, we get an error here because the preview also

274
00:19:19,610 --> 00:19:22,070
needs a state now, but we don't have a state for the preview.

275
00:19:22,130 --> 00:19:29,270
So what I'm going to do here is I'm just going to pass the open dialogue.

276
00:19:32,220 --> 00:19:35,610
State to be immutable, state of.

277
00:19:36,680 --> 00:19:42,680
And it's this one here, well, I'm just going to set it to false things, I'm going to hardcoded using

278
00:19:42,680 --> 00:19:47,210
them to multiple state, but when you use a mutable state in your preview, then you get an error so

279
00:19:47,210 --> 00:19:53,690
we can just suppress it by using the suppress suppress lint here.

280
00:19:53,780 --> 00:19:58,160
What we say we want to suppress is error that you are showing and we need to import it.

281
00:19:58,400 --> 00:20:05,030
So the error that we are using or that we're getting here is the unremembered, mutable state.

282
00:20:05,850 --> 00:20:08,540
OK, so that's how it works with previews.

283
00:20:08,550 --> 00:20:10,680
So we're just saying, OK, you know what?

284
00:20:11,510 --> 00:20:13,700
In the preview, just leave it as closed.

285
00:20:14,390 --> 00:20:16,250
So now we still have an error.

286
00:20:16,280 --> 00:20:19,550
No, it doesn't seem like it, even though it shows that there is an error here.

287
00:20:20,570 --> 00:20:20,990
OK?

288
00:20:23,100 --> 00:20:29,010
OK, and now there's one last thing that I want to add, and that is going to be in my dialogue here.

289
00:20:29,340 --> 00:20:31,230
So we have this on dismissed request.

290
00:20:31,680 --> 00:20:38,190
But then there is also something that, well, if you hover over this dialogue, there are properties

291
00:20:38,190 --> 00:20:38,890
as well.

292
00:20:38,910 --> 00:20:42,570
So dialogue properties that we can overwrite, so let's override them.

293
00:20:42,570 --> 00:20:44,840
I'm going to show you how we can override them.

294
00:20:44,850 --> 00:20:50,970
So for example, properties, we can use dialogue properties and here we can pass which kind of properties

295
00:20:50,980 --> 00:20:51,690
we want to have.

296
00:20:51,990 --> 00:21:00,060
So for example, if you want to force the user to actually click on the cross to dismiss this dialogue,

297
00:21:00,420 --> 00:21:03,480
you can force them by adding a dialogue property.

298
00:21:03,660 --> 00:21:09,120
Because you see by default, when you click outside of this dialogue, it will just close.

299
00:21:09,450 --> 00:21:13,200
So if you want to ever override that, you can add this line here.

300
00:21:13,200 --> 00:21:17,190
So this miss on click outside said it's false.

301
00:21:17,490 --> 00:21:22,800
So this will not dismiss the dialogue when you you click outside of the dialog and.

302
00:21:24,330 --> 00:21:27,840
Well, you can just set the default, it will not dismiss it.

303
00:21:29,700 --> 00:21:30,630
So let's test this.

304
00:21:31,200 --> 00:21:35,700
Let's see, we click outside to see doesn't dismiss the dialogue, which is what we just overrode and

305
00:21:35,700 --> 00:21:37,440
wants press on that cross.

306
00:21:37,440 --> 00:21:43,160
Then it closes because now we have added an unclear event for our Asian button.

307
00:21:43,170 --> 00:21:45,060
Here you see we are setting this date.

308
00:21:45,330 --> 00:21:46,530
So that's the really cool thing.

309
00:21:46,540 --> 00:21:51,090
You don't have to actually open or closed or take care of all of this other stuff that would happen

310
00:21:51,090 --> 00:21:54,880
to a dialogue because it's all handled by its state.

311
00:21:55,800 --> 00:22:02,130
So on the first side, it looks more complicated, but at the same moment, it's just significantly

312
00:22:02,130 --> 00:22:03,090
easier to manage.

313
00:22:03,450 --> 00:22:11,550
Because if you have watched my master class on my Android masterclass, especially the last chapter

314
00:22:11,550 --> 00:22:18,450
where we are building a trailer clone, it becomes a real pain to take care of the state of the dialogue

315
00:22:18,450 --> 00:22:25,290
because you need to constantly open and closed based on whether to get whether the dialogue is showing

316
00:22:25,290 --> 00:22:25,840
or not.

317
00:22:25,860 --> 00:22:26,710
And here it's just easy.

318
00:22:26,710 --> 00:22:29,610
You just say, OK, the state is closed, so that's it.

319
00:22:30,510 --> 00:22:32,320
OK, so this video is long enough.

320
00:22:32,370 --> 00:22:39,890
I think we're pretty much done with our UI for the Google Gmail application.

321
00:22:39,900 --> 00:22:40,920
I hope you enjoyed it.

322
00:22:41,040 --> 00:22:46,840
Now, you know how to build such a beautiful user interface using the jetpack compose by.