1 00:00:01,070 --> 00:00:01,730 Welcome back. 2 00:00:02,029 --> 00:00:08,540 And this lecture, we will be recreating the Gmail account dialog UI so we won't be using the dialog. 3 00:00:08,570 --> 00:00:13,430 Instead, we will create a custom dialogue out of the normal dialogue element. 4 00:00:13,760 --> 00:00:19,190 First, we will add an on click implementation for this little icon here at the top of which then will 5 00:00:19,190 --> 00:00:20,260 open up this dialogue. 6 00:00:20,270 --> 00:00:25,520 And as you can see, it's not going to be finished by the end of this video because, well, it's a 7 00:00:25,520 --> 00:00:26,960 lot of stuff that we need to implement. 8 00:00:26,960 --> 00:00:28,280 So we're going to start off with this. 9 00:00:28,490 --> 00:00:30,440 And then in the next video, we're going to finish it off. 10 00:00:31,010 --> 00:00:31,370 All right. 11 00:00:31,700 --> 00:00:37,850 So first of all, let's get back to our project and implement the oncolytic and then open the dialogue. 12 00:00:40,170 --> 00:00:44,130 Therefore, we need to go over to our home at Bar. 13 00:00:44,280 --> 00:00:53,310 So here over to the home at Bar Katie File and there we had at the modifier, which took care of the 14 00:00:53,310 --> 00:00:53,850 image. 15 00:00:53,860 --> 00:00:55,800 So here search and emails. 16 00:00:56,100 --> 00:00:59,910 And then we had our profile content description with the modifier. 17 00:01:00,270 --> 00:01:04,620 This modifier had a size, a clip and a background. 18 00:01:05,010 --> 00:01:08,160 And now we're going to add something called clickable. 19 00:01:08,430 --> 00:01:12,450 So there's clickable allows us to now do something once we click on it. 20 00:01:12,810 --> 00:01:18,180 And here I will just use an open dialogue. 21 00:01:20,540 --> 00:01:26,130 Which will just be a new dialogue that I'm going to create under my components. 22 00:01:26,160 --> 00:01:33,140 OK, because you see each time that we create a new UI element, just create a new composable component 23 00:01:33,140 --> 00:01:34,550 in our components folder. 24 00:01:34,850 --> 00:01:40,340 This one will be the accounts, a dialogue, and let's just create it. 25 00:01:40,580 --> 00:01:43,070 The idea really is that we use it in here. 26 00:01:43,080 --> 00:01:48,590 So once we click on it, we open our accounts dialog that we just have created. 27 00:01:49,130 --> 00:01:51,170 All right, so here this will be a composable. 28 00:01:51,260 --> 00:01:57,260 So let's add the composable keyword in here, and I'm going to call this one accounts dialog, as you 29 00:01:57,260 --> 00:01:58,220 have seen already. 30 00:01:58,820 --> 00:02:01,850 So this will require an open dialogue. 31 00:02:02,900 --> 00:02:06,020 So here does this open dialogue. 32 00:02:06,380 --> 00:02:09,979 And once I type this correctly, it should be available here. 33 00:02:10,280 --> 00:02:19,670 Now, we're not going to use the default dialogue, but we will need to use a mutable state so a state 34 00:02:19,670 --> 00:02:20,930 that can be changed. 35 00:02:21,280 --> 00:02:22,340 And this will be a Boolean. 36 00:02:22,340 --> 00:02:27,830 So it will be either true or false because we need to know whether the account will be open or not open. 37 00:02:28,640 --> 00:02:29,090 All right. 38 00:02:31,890 --> 00:02:40,050 So this will just basically be a dialogue where we pass in on dismiss request. 39 00:02:41,230 --> 00:02:45,310 So let me see this miss request. 40 00:02:46,610 --> 00:02:53,960 And while this will not work if you get the default dialogue, so that's always the problem with default 41 00:02:53,960 --> 00:02:54,900 imports, right? 42 00:02:54,920 --> 00:02:57,080 Sometimes it just imports the wrong thing. 43 00:02:57,530 --> 00:03:04,460 And now if you delete this dialogue at the top, then you can select between the Compose You I dialog 44 00:03:04,460 --> 00:03:05,060 and the other one. 45 00:03:05,300 --> 00:03:09,740 When in doubt, usually just used to compose variant in our compose applications. 46 00:03:10,130 --> 00:03:16,300 So then you have this on this GMS request, which we can just say what should happen in that case, 47 00:03:16,310 --> 00:03:20,960 so we can just say that the open dialogue value should just be false. 48 00:03:21,950 --> 00:03:26,570 OK, so in case that we're dismissing so this is dismissed request. 49 00:03:26,960 --> 00:03:30,140 And then here we want to open up our dialogue. 50 00:03:30,260 --> 00:03:30,590 Why? 51 00:03:31,040 --> 00:03:32,870 But let's take care of that in a second. 52 00:03:33,260 --> 00:03:35,030 So we have this default dialogue. 53 00:03:35,450 --> 00:03:39,830 Now we need to go ahead and create an observable Boolean. 54 00:03:40,100 --> 00:03:43,520 Now we need to know whether the dialogue is open or not. 55 00:03:44,150 --> 00:03:45,920 So where would that make sense? 56 00:03:46,010 --> 00:03:51,160 Well, the thing is that what it takes care of this dialogue is this little icon. 57 00:03:51,170 --> 00:03:53,210 So once we click on it, then it opens up. 58 00:03:53,780 --> 00:03:54,230 All right. 59 00:03:54,530 --> 00:03:57,080 So let's go over to our home app bar. 60 00:03:58,120 --> 00:04:05,410 And create an observable Boolean variable, which will also be, again, a mutable state. 61 00:04:05,680 --> 00:04:07,090 So here open dialogue. 62 00:04:09,020 --> 00:04:16,850 Which will be a mutable state, bullion, so mutable state of Typekit bullion. 63 00:04:18,170 --> 00:04:24,110 So at this point, I think it makes sense to break this up into multiple lines here and import mutable 64 00:04:24,230 --> 00:04:24,680 state. 65 00:04:27,900 --> 00:04:30,240 Over here, composed one time Utah State. 66 00:04:32,370 --> 00:04:39,870 OK, so at this point, we have this mutable state which we can set to true once we collect on our home 67 00:04:39,870 --> 00:04:40,770 app, our item. 68 00:04:40,890 --> 00:04:46,320 So here on the image which set profile, OK, look at it, it's this little image here. 69 00:04:47,430 --> 00:04:52,110 And before that, we had search and emails, which is this part here. 70 00:04:52,260 --> 00:04:56,550 Then this image and we said once we clicked on it, we want to do something. 71 00:04:56,940 --> 00:05:01,230 And what I want to do in here is I want to set my open dialogue value to be true. 72 00:05:02,010 --> 00:05:03,990 So now just open it. 73 00:05:04,290 --> 00:05:05,370 That's what we wanted to hear. 74 00:05:06,980 --> 00:05:08,310 So once it is open. 75 00:05:08,360 --> 00:05:14,840 So in the case that it is open is right here, we can just check off the open dialogue values true, 76 00:05:15,770 --> 00:05:22,790 then create an account dialogue with the open dialogue being our open dialogue. 77 00:05:23,970 --> 00:05:28,050 So like so so what is this our open dialogue that I'm talking about? 78 00:05:28,320 --> 00:05:34,500 Well, it's the one that is passed to the home app bar method to this function, to this composable, 79 00:05:34,500 --> 00:05:40,320 because now once we're using the home app bar, we need to pass and mutable state, which is going to 80 00:05:40,320 --> 00:05:41,340 be the open dialogue. 81 00:05:41,340 --> 00:05:42,810 So is the dialogue open or not? 82 00:05:43,410 --> 00:05:46,140 Now you could check, where are we using this home app bar? 83 00:05:46,590 --> 00:05:49,110 Well, we're using it in our main method, right? 84 00:05:49,410 --> 00:05:52,320 So we need to our main activity better set. 85 00:05:52,650 --> 00:05:57,360 So we need to jump over to our main activity and check it out because here we now have this error because 86 00:05:57,360 --> 00:06:01,710 we're using the home app bar, but we are not following the instructions and we're not passing the right 87 00:06:01,920 --> 00:06:03,480 amount of arguments anymore. 88 00:06:03,930 --> 00:06:08,490 So now this home app bar, however, it needs an open dialogue, which is a mutable state. 89 00:06:08,760 --> 00:06:16,410 So here we will need to pass an open dialogue and we were using the multiple states before when we were 90 00:06:16,410 --> 00:06:17,610 working with remembers. 91 00:06:17,820 --> 00:06:23,900 OK, so here in my Gmail app, I'll need to create a new, remember so well, open dialogue. 92 00:06:23,940 --> 00:06:28,980 So what I'm going to call it, and we will be using the remember keyword. 93 00:06:30,110 --> 00:06:34,940 And you have to obviously write it correctly, then import remember. 94 00:06:35,510 --> 00:06:39,830 And now the Remember state will be the mutable order. 95 00:06:39,860 --> 00:06:44,030 Remember, a key word will be used for our mutable state of. 96 00:06:45,390 --> 00:06:47,730 Our value of false. 97 00:06:49,680 --> 00:06:55,350 So this is going to be current defaults, but then we're overwriting it, obviously, once we click 98 00:06:55,350 --> 00:06:55,680 on it. 99 00:06:55,920 --> 00:06:59,100 So now we can set this open dialogue or we can pass it. 100 00:06:59,400 --> 00:07:04,140 But I said here at the top bar when we're creating the home bar, which needed an open dialogue. 101 00:07:06,410 --> 00:07:08,870 If we had this point, test our application. 102 00:07:09,620 --> 00:07:14,000 So if you run the app, you test it, you will see that there is a dialogue, but currently there is 103 00:07:14,000 --> 00:07:14,660 no UI. 104 00:07:14,690 --> 00:07:16,310 So there's nothing to show. 105 00:07:16,940 --> 00:07:19,550 We take took care of everything that we needed to do. 106 00:07:19,580 --> 00:07:24,590 We know that there is a dialogue now we open it, but we're never actually designing it. 107 00:07:25,040 --> 00:07:28,240 So let's go back to our accounts dialogue. 108 00:07:28,730 --> 00:07:29,510 Katy File. 109 00:07:29,990 --> 00:07:34,700 And there we have our dialogue, which currently does not display anything, right? 110 00:07:34,700 --> 00:07:36,310 So we just create it. 111 00:07:36,320 --> 00:07:40,220 But in this part, that's where we would add all of the design for it. 112 00:07:40,550 --> 00:07:46,610 So I'm going to just create a new composable which will take care of the dialog UI. 113 00:07:46,640 --> 00:07:48,320 So the user interface of the dialog. 114 00:07:48,680 --> 00:07:56,060 So I'm going to call this one accounts a dialog UI and it needs to have a modifier, which I'm just 115 00:07:56,060 --> 00:07:58,040 going to pass the modifier to. 116 00:07:59,230 --> 00:08:06,550 And now we need to import modifier for this to work and not to reflect once again our I.D. is playing 117 00:08:06,550 --> 00:08:06,880 with us. 118 00:08:06,920 --> 00:08:07,960 We need to be careful here. 119 00:08:08,260 --> 00:08:10,390 We need to use the Compose UI modifier. 120 00:08:11,140 --> 00:08:14,380 OK, now how would I like this to look? 121 00:08:14,500 --> 00:08:17,290 Well, let's look at our example project. 122 00:08:17,680 --> 00:08:27,430 You see, this is a card, so I'm using a card where I have a column and then I have a row inside of 123 00:08:27,430 --> 00:08:27,640 it. 124 00:08:27,850 --> 00:08:32,350 So this would be the role, and then I have another role or a button underneath and so forth. 125 00:08:32,860 --> 00:08:34,690 So let's just start at the beginning. 126 00:08:35,260 --> 00:08:36,610 Let's create a card first. 127 00:08:37,120 --> 00:08:38,559 So here I'm using a card. 128 00:08:38,860 --> 00:08:43,450 Then inside of this card, I'm going to use a column, an inside of this column, what? 129 00:08:43,450 --> 00:08:45,880 I'm going to pass the modifier to this column. 130 00:08:46,480 --> 00:08:50,560 So here, modifier, because I want to have a white background. 131 00:08:50,680 --> 00:08:56,140 So I'm going to set the background to colored of white and I want to have a little bit of padding. 132 00:08:56,410 --> 00:09:01,810 So I'm going to set the padding to the bottom to 16 density pixels. 133 00:09:02,260 --> 00:09:04,540 So for this to work, we need to import DPI. 134 00:09:05,500 --> 00:09:10,030 So it's hover over it and import it, and we need to import color. 135 00:09:11,640 --> 00:09:13,200 And then what's wrong with cart? 136 00:09:13,710 --> 00:09:14,970 It is the composable card. 137 00:09:15,600 --> 00:09:19,920 Let's go ahead and design our column that we have here. 138 00:09:20,520 --> 00:09:29,940 So the column will require a row and inside of this role, I'm going to pass the modifier to fill next 139 00:09:29,940 --> 00:09:30,240 with. 140 00:09:30,360 --> 00:09:38,100 So I want to make sure that it fills the entire width of the screen or of the available space, so to 141 00:09:38,100 --> 00:09:38,520 speak. 142 00:09:38,910 --> 00:09:42,120 And I want to vertically align items inside of it. 143 00:09:42,120 --> 00:09:48,480 So here still inside of the role description, here are the parameters. 144 00:09:48,630 --> 00:09:53,250 I'm going to set vertical alignment to alignment that center vertically. 145 00:09:53,730 --> 00:09:59,760 And now I was wondering why I get this error, obviously, is because I need to add that it's going 146 00:09:59,760 --> 00:10:02,370 to be a composable because it's users composable, right? 147 00:10:02,520 --> 00:10:07,770 And as you've learned quite at the beginning of the composable, as part of this course, we always 148 00:10:07,770 --> 00:10:13,380 needs to use to add composable annotation for any function that has composable inside of it. 149 00:10:14,070 --> 00:10:15,510 It's like with static keyword. 150 00:10:15,900 --> 00:10:19,200 So if the Methodist static, it has to use static variables and stuff like that. 151 00:10:19,200 --> 00:10:21,510 So it's similar to that if you know what I'm talking about. 152 00:10:22,200 --> 00:10:26,840 So this is our role and now we can design our role. 153 00:10:26,860 --> 00:10:29,400 So what do we want to have inside of a given role? 154 00:10:29,850 --> 00:10:32,610 So we want to have an icon button. 155 00:10:32,910 --> 00:10:36,900 We want to have an image here at the top and so forth. 156 00:10:37,380 --> 00:10:40,590 OK, so we need to set it up, which will take a bit. 157 00:10:41,070 --> 00:10:42,180 But before we do that? 158 00:10:43,950 --> 00:10:46,380 Let's at a preview function here at the bottom. 159 00:10:46,800 --> 00:10:58,420 So here at preview and at composable, and then we can use to fund account dialogue. 160 00:10:59,040 --> 00:11:05,400 UI preview because I want to be able to preview the user interface and here I'm just going to call my 161 00:11:05,400 --> 00:11:09,900 account style of UI method, which is this composable here? 162 00:11:10,200 --> 00:11:15,060 So I just want to be able to see how this is going to look like what I'm building right here with the 163 00:11:15,060 --> 00:11:17,280 cards and columns and stuff like that. 164 00:11:19,270 --> 00:11:20,890 So let's start with the first rule. 165 00:11:21,370 --> 00:11:23,150 OK, so I said, I want to have this. 166 00:11:23,230 --> 00:11:25,120 I can hear you and that and this part. 167 00:11:25,480 --> 00:11:29,820 Well, actually what we have, we have another another row here at the top where we have this cross 168 00:11:29,830 --> 00:11:30,820 and then we have an image. 169 00:11:31,150 --> 00:11:32,860 So let's start with that row first. 170 00:11:33,580 --> 00:11:37,750 So here in this role, we have our I can button. 171 00:11:38,830 --> 00:11:45,520 So it's a button that we can click on, but it has the form of an icon, and I'm going to just use an 172 00:11:45,520 --> 00:11:46,390 icon in here. 173 00:11:46,630 --> 00:11:47,550 So let's import. 174 00:11:47,560 --> 00:11:48,400 I can hear. 175 00:11:49,720 --> 00:11:53,260 And the icon that I want to use is going to be a composable. 176 00:11:53,560 --> 00:12:00,580 So it comes from composite material and you see here it just created this graphic Strobl icon for me 177 00:12:00,580 --> 00:12:01,090 once again. 178 00:12:01,120 --> 00:12:03,280 So come on, Heidi, please. 179 00:12:04,270 --> 00:12:10,390 So we need to import the correct one, which is going to be the UI version once again, and then we 180 00:12:10,390 --> 00:12:13,390 can go over to passing the right parameters to it. 181 00:12:13,390 --> 00:12:19,600 So hover over it and you will see what kind of parameters you get or just use control space and it will 182 00:12:19,600 --> 00:12:22,090 give you the parameters that you can pass. 183 00:12:22,330 --> 00:12:30,070 So I'm going to pass an image vector first, which will just be an icon dot default dot close icon. 184 00:12:30,520 --> 00:12:32,380 So now we need to import the stuff again. 185 00:12:32,530 --> 00:12:34,080 Icons is important as it seems. 186 00:12:34,090 --> 00:12:41,890 Luckily, we need to import to report a close icon, however, and an icon always needs a content description 187 00:12:41,890 --> 00:12:42,430 as well. 188 00:12:43,330 --> 00:12:50,950 So content description like so this version and I'm just going to not give a complete description. 189 00:12:51,160 --> 00:12:55,390 You could describe that it's this close button or so this would find it work fine as well. 190 00:12:55,870 --> 00:12:59,870 So there's going to be our close icon and let's actually test this. 191 00:12:59,890 --> 00:13:01,390 We should be able to test this. 192 00:13:02,200 --> 00:13:03,670 So click on it. 193 00:13:04,120 --> 00:13:10,360 And while there's still nothing, so here I'm just going to add an image which I need to import as well. 194 00:13:10,750 --> 00:13:19,380 So import the UI version here, compose UI and this image needs a resource. 195 00:13:19,390 --> 00:13:25,600 So I'm just going to use a paint, a resource where I'm just going to use the Google Image, so we need 196 00:13:25,600 --> 00:13:28,690 to add a resource here and here. 197 00:13:28,810 --> 00:13:30,610 So let's imported trouble. 198 00:13:33,680 --> 00:13:36,260 And I'm going to use this image specifically here. 199 00:13:36,530 --> 00:13:39,170 So let me take it from there. 200 00:13:39,770 --> 00:13:47,870 Therefore, I'm going to add this double imported from there trouble Google JPEG finish import. 201 00:13:48,350 --> 00:13:50,900 And now we have it available in our project. 202 00:13:51,020 --> 00:13:57,200 So let me use exactly that image by going to art of trouble, thought Google. 203 00:13:58,170 --> 00:14:01,830 And this will be fine, even though now it's not happy with the AH. 204 00:14:01,860 --> 00:14:03,780 So where is this art coming from? 205 00:14:05,640 --> 00:14:07,950 So I need to import are specifically here. 206 00:14:09,850 --> 00:14:19,670 Which comes from our project, so let's use this package name that we have and import complement and 207 00:14:19,690 --> 00:14:21,100 not the components. 208 00:14:21,250 --> 00:14:23,520 But the project itself, ah. 209 00:14:24,790 --> 00:14:27,280 So now we should be able to use our here. 210 00:14:27,310 --> 00:14:27,730 All right. 211 00:14:27,880 --> 00:14:28,900 So now we have the image. 212 00:14:31,380 --> 00:14:39,570 But similarly to what we have to do with our icons, we need to add a content description here, so 213 00:14:39,580 --> 00:14:41,370 content description will just be an empty. 214 00:14:42,790 --> 00:14:49,900 Context, empty text go to modify this image as well, so I'm going to add a modifier here where I'm 215 00:14:49,900 --> 00:14:56,680 going to set the size modifier dot size 30 density pixels. 216 00:14:57,810 --> 00:15:06,760 So I'm going to give it a certain size and a weight of 2.0 F. So it will take all of the space except 217 00:15:06,760 --> 00:15:09,070 for the space that this icon button will require. 218 00:15:11,570 --> 00:15:17,420 So now let's test this, and by the way, now I understand why I didn't show earlier because I didn't 219 00:15:17,420 --> 00:15:21,590 call my cousins dialog UI inside of this dialogue content, so to speak. 220 00:15:21,590 --> 00:15:26,900 So now the content of the dialog will be our account's dialog UI composable. 221 00:15:27,470 --> 00:15:33,200 So now we should be able to run it and see the cross with the Google icon. 222 00:15:33,230 --> 00:15:33,710 There we are. 223 00:15:33,950 --> 00:15:35,360 So this is our first role. 224 00:15:35,390 --> 00:15:37,070 You see, the cross is at the very left. 225 00:15:37,610 --> 00:15:38,690 What a close icon. 226 00:15:39,050 --> 00:15:44,360 And then we have the Google Image, which takes the entire rest of the available space and is centered 227 00:15:44,360 --> 00:15:44,780 as well. 228 00:15:45,050 --> 00:15:49,370 And that is based on what we have set up here for this role, so vertically aligned towards the center. 229 00:15:49,610 --> 00:15:53,990 But then the icon button is pushed all the way to the left because the image takes a weight of two, 230 00:15:54,200 --> 00:15:56,240 so it takes all the available weight. 231 00:15:56,930 --> 00:15:59,600 So now let's create another row inside of here. 232 00:15:59,960 --> 00:16:02,870 OK, so this is our role with the image and stuff like that. 233 00:16:03,140 --> 00:16:10,250 But now let's take care of this second row, which is this one here where we have an icon text with 234 00:16:10,250 --> 00:16:10,700 another. 235 00:16:10,720 --> 00:16:15,080 While this is a column as you see here with the text and another text, and then we have this number 236 00:16:15,080 --> 00:16:16,220 here on the side. 237 00:16:16,430 --> 00:16:22,760 So let's just go ahead and create another row here with a modifier where we're going to fill the mix 238 00:16:23,450 --> 00:16:24,740 with once again. 239 00:16:24,890 --> 00:16:31,730 So it takes the entire available space with some padding so that it's not going to be too close to each 240 00:16:31,730 --> 00:16:35,390 other with, let's say, 16 dpi to the left. 241 00:16:35,780 --> 00:16:39,110 And here I need to add an equal sign. 242 00:16:39,140 --> 00:16:42,140 So 16 to the left and 16 to the top. 243 00:16:42,470 --> 00:16:44,330 And again, an equal sign. 244 00:16:44,600 --> 00:16:45,890 So this will be the modifier. 245 00:16:46,490 --> 00:16:49,820 And then when you to have content for the row as well? 246 00:16:50,000 --> 00:16:50,440 All right. 247 00:16:50,450 --> 00:16:51,600 And what should be the content? 248 00:16:51,620 --> 00:16:56,780 Well, as I just said it would be this image that we have there at the top, at the left hand side, 249 00:16:56,780 --> 00:17:00,470 which is this icon and we have used this image before. 250 00:17:00,860 --> 00:17:03,260 So I'm just going to copy and paste it in here. 251 00:17:03,680 --> 00:17:08,780 OK, so it's this image composable with a painter, which is our tutorials resource. 252 00:17:09,290 --> 00:17:16,160 And if you wonder where we used it, I think it was to draw menu and therefore. 253 00:17:17,390 --> 00:17:24,109 You can just go to over to your components here and was it the home app or maybe even? 254 00:17:25,510 --> 00:17:26,319 Where would you start? 255 00:17:26,349 --> 00:17:29,170 I can image this one here, the profile image. 256 00:17:30,010 --> 00:17:36,070 OK, so we had the tutorials, draw bowls and so forth, because if you look at our application here 257 00:17:36,070 --> 00:17:37,960 at the top, it's the same icon that we're using. 258 00:17:38,230 --> 00:17:39,760 So it's this image once again. 259 00:17:40,150 --> 00:17:42,340 So that's what I'm using in my application as well. 260 00:17:42,610 --> 00:17:45,170 So I was inside of the accounts dialog. 261 00:17:45,230 --> 00:17:47,560 Okay, so here we're taking care of our image. 262 00:17:47,590 --> 00:17:49,630 That's the first part of this role. 263 00:17:49,900 --> 00:17:52,030 And then, as I said, we had a column. 264 00:17:52,030 --> 00:17:56,590 So we have a text on top of another text, which is something you do with a column. 265 00:17:57,220 --> 00:18:00,640 So it's inside this row still, but it's a new column. 266 00:18:02,910 --> 00:18:05,100 Which will get a modifier as well. 267 00:18:05,550 --> 00:18:12,930 Well, I'm going to set the weight to be 2.0 because I want this to be the while take the take the rest 268 00:18:12,930 --> 00:18:17,310 of the available space so it will push everything that is before it to the left and everything that 269 00:18:17,310 --> 00:18:18,360 is offered to the right. 270 00:18:18,780 --> 00:18:23,060 So that's what this weight does because we didn't give any weight to the other items. 271 00:18:23,070 --> 00:18:28,260 That's why the item that has a weight will take every bit of space that is available. 272 00:18:28,890 --> 00:18:31,710 And then I'm going to add a little bit of padding to it as well. 273 00:18:32,160 --> 00:18:36,390 So basically the same story as we have done with the other item. 274 00:18:36,810 --> 00:18:40,830 So then this column now just has a text with another text. 275 00:18:41,100 --> 00:18:44,520 So here, text me to import text for this to you. 276 00:18:44,520 --> 00:18:45,430 I compose one. 277 00:18:45,840 --> 00:18:51,990 And here I'm just going to set the font weight to two bold and say something like two thirds you and 278 00:18:51,990 --> 00:18:55,260 then the other one will have no font weight. 279 00:18:55,260 --> 00:18:57,090 So you can see I'm even using semi bowls. 280 00:18:57,150 --> 00:19:00,300 So it's bold, but not entirely bold, so to speak. 281 00:19:00,810 --> 00:19:01,890 So that's the column. 282 00:19:02,160 --> 00:19:05,700 And then we have on the right hand side this little text that says 19:9. 283 00:19:05,700 --> 00:19:09,480 Plus we have so many different emails and that is just a simple text. 284 00:19:09,840 --> 00:19:12,480 OK, so let me just put this text in there. 285 00:19:13,050 --> 00:19:18,000 I will have a little bit of padding towards the right hand side of 16 dpi so that it's not going to 286 00:19:18,000 --> 00:19:19,710 be all the way on the edge. 287 00:19:20,180 --> 00:19:22,470 OK, so that's what we get through this padding. 288 00:19:23,130 --> 00:19:28,010 So let's run this real quick just to see how this is going to work out for our dialogue. 289 00:19:28,020 --> 00:19:29,460 And we see this is what we get. 290 00:19:30,210 --> 00:19:34,590 Even though I might need to change a little bit with the padding towards the top for my tutorials, 291 00:19:34,590 --> 00:19:37,800 you, but maybe this will change once we have something underneath. 292 00:19:37,800 --> 00:19:38,730 So let's see that. 293 00:19:39,750 --> 00:19:43,560 Therefore, I'm going to add the final row, at least for this video. 294 00:19:43,560 --> 00:19:48,810 And I know it's already too long, but it's just this little Google account button that we have underneath, 295 00:19:49,020 --> 00:19:52,440 which really is also just a cart where I have a text in. 296 00:19:52,710 --> 00:19:58,530 So I'm going to create a new role in here with the same modifiers that I've used before. 297 00:19:58,530 --> 00:20:05,280 So let me just copy those actually, not exactly the same, but similar so it's going to fill the max 298 00:20:05,280 --> 00:20:05,550 with. 299 00:20:05,850 --> 00:20:11,250 And then I want to center it, not vertically, but I want to have. 300 00:20:11,640 --> 00:20:16,380 So I want to have a horizontal arrangement, actually, and the arrangement should be spaced evenly. 301 00:20:16,380 --> 00:20:21,810 So I want to have the item spaced evenly, which will take care of this event that we have horizontally. 302 00:20:21,810 --> 00:20:23,730 It's in the center, so to speak. 303 00:20:24,390 --> 00:20:25,800 Not entirely, but almost. 304 00:20:26,040 --> 00:20:26,430 And then. 305 00:20:28,840 --> 00:20:33,480 We go ahead and design what we want to have in there, and as I said, I want to have a card in there, 306 00:20:33,730 --> 00:20:37,480 but a modifier where it requires a certain with. 307 00:20:37,870 --> 00:20:43,090 So I want to make sure that the width is at least one hundred and fifty density pixels for it. 308 00:20:43,660 --> 00:20:51,940 And then I want to have a shape of a rounded corners shape of 15 50 density pixels. 309 00:20:53,290 --> 00:20:59,890 Like so, and then I want to have a border, which is just this border that surrounds it. 310 00:21:00,310 --> 00:21:08,980 So let me put the border around here, which will have a border stroke of one density pixels that will 311 00:21:08,980 --> 00:21:10,240 have the color of gray. 312 00:21:10,330 --> 00:21:15,220 So color should be color dot grey. 313 00:21:17,100 --> 00:21:18,270 OK, so that's my card. 314 00:21:18,300 --> 00:21:21,120 It needs a content, otherwise, you see, we get this error here. 315 00:21:21,180 --> 00:21:28,410 Now it's gone and the content of it will just be a little bit of text with a little bit of padding aligned 316 00:21:28,410 --> 00:21:29,390 towards the center. 317 00:21:29,400 --> 00:21:33,270 So it says Google account, which is this little text that I have. 318 00:21:33,600 --> 00:21:36,750 So I have this card with a text and this should create this thing. 319 00:21:36,990 --> 00:21:40,860 But then there's one last thing that you see here and that is this divider. 320 00:21:41,340 --> 00:21:47,940 So let's just go ahead and create a spacer which will, first of all, create a little bit of space 321 00:21:48,660 --> 00:21:51,000 inside of this role, but not inside of the card. 322 00:21:51,120 --> 00:21:59,940 So here I'm going to create a spacer which will have a modifier with a width of 10 density pixels. 323 00:22:02,760 --> 00:22:09,930 And then underneath the role, so underneath this role here, that's where I'm going to have the divider 324 00:22:11,070 --> 00:22:19,110 like so where I'm going to use my modifier does padding of 16 density pixels towards the top. 325 00:22:19,350 --> 00:22:20,250 So putting. 326 00:22:21,360 --> 00:22:22,930 With top value of 16. 327 00:22:27,250 --> 00:22:29,110 And now we should be able to test this again. 328 00:22:29,500 --> 00:22:31,660 Let's see if we get the divider and everything. 329 00:22:32,440 --> 00:22:33,280 And we do. 330 00:22:33,400 --> 00:22:38,680 But let me see why we still have this uneven distance here. 331 00:22:38,680 --> 00:22:42,670 So there's this two thirds you roll is not set correctly. 332 00:22:46,450 --> 00:22:51,700 And looking at the cold, Gisele's the solution, so here I added, I padding top for this modifier, 333 00:22:51,700 --> 00:22:53,200 for the column instead of bottom. 334 00:22:53,920 --> 00:22:55,840 And this should fix the problem. 335 00:22:55,840 --> 00:23:02,140 So if you rerun it, we should now see that the text has been pushed to the top and now it has the distance 336 00:23:02,140 --> 00:23:03,640 towards the bottom instead of the top. 337 00:23:04,000 --> 00:23:04,390 Perfect. 338 00:23:04,570 --> 00:23:07,120 So that's a great start, as was already super long. 339 00:23:07,120 --> 00:23:11,380 VIDEO I don't want to go any further than this, even though you see, of course, that this button 340 00:23:11,380 --> 00:23:11,920 doesn't work. 341 00:23:11,920 --> 00:23:12,550 This doesn't work. 342 00:23:12,550 --> 00:23:13,960 But that's not what it's about. 343 00:23:13,960 --> 00:23:16,840 In the next video, we're going to finalize this little dialog.