1 00:00:01,010 --> 00:00:06,380 Welcome back in this lecture, we will display the male list on our page and the draw menu section. 2 00:00:06,380 --> 00:00:12,740 We used a column with a scroll view to display a list, but that is because we know that the data will 3 00:00:12,740 --> 00:00:13,430 not change. 4 00:00:13,730 --> 00:00:19,550 What if you are dealing with data you have no control over and it is bound to change at any time? 5 00:00:20,000 --> 00:00:23,150 That is when we can use lazy column. 6 00:00:23,600 --> 00:00:29,300 Lazy Column is a composable built to display dynamic lists and we will be showing a list of emails on 7 00:00:29,300 --> 00:00:31,100 the first page of the screen, as you see here. 8 00:00:31,370 --> 00:00:37,520 So this is just a lazy column that we are using inside of our scaffold. 9 00:00:37,880 --> 00:00:38,320 All right. 10 00:00:38,330 --> 00:00:43,910 So this is a fixed amount of data that we have, but still it could change any time because it could 11 00:00:43,910 --> 00:00:47,630 load, for example, from a database or something like that. 12 00:00:48,350 --> 00:00:51,380 So let's go ahead and use this lazy column in our project. 13 00:00:51,650 --> 00:00:56,570 Therefore, let's go back to our project and inside of our main activity. 14 00:00:56,840 --> 00:01:01,490 We had our scaffold, and that's where we can now create our lazy column. 15 00:01:03,420 --> 00:01:11,040 And actually, for now, the lazy column will not be inside of those parentheses, those around it, 16 00:01:11,040 --> 00:01:14,160 but the curly brackets, so it's inside of the content. 17 00:01:14,520 --> 00:01:16,830 So let's use the lazy column here. 18 00:01:17,160 --> 00:01:20,400 And for now, let's use very simple content. 19 00:01:20,490 --> 00:01:26,310 So I'm going to use items of, well, just 50 items. 20 00:01:28,520 --> 00:01:35,900 And they will just get me an index, and this will be index like so. 21 00:01:36,470 --> 00:01:40,010 And I can use that index to display it inside of a text. 22 00:01:40,160 --> 00:01:44,570 So this text will just display the index with at. 23 00:01:46,140 --> 00:01:52,920 Index, so this will make a lot more sense in a second, and then I'm also going to add a divider like 24 00:01:52,920 --> 00:01:53,130 so. 25 00:01:53,580 --> 00:01:58,890 So let's look at this project now with this lazy column, which now will have 50 items. 26 00:01:58,920 --> 00:02:03,570 It will give me the index of every single item and you see it, says Index. 27 00:02:03,580 --> 00:02:04,650 And then the number. 28 00:02:04,890 --> 00:02:06,990 So we just have this scrollable list now. 29 00:02:07,500 --> 00:02:11,640 Now what we want is, of course, to have data that we want to display and we want to display it in 30 00:02:11,640 --> 00:02:16,260 a certain format because you see we do have the text, then we have a divider, then we have another 31 00:02:16,260 --> 00:02:18,270 text and we have another divider and so forth. 32 00:02:18,570 --> 00:02:24,390 But I would like to displayed in this in a nicer way, as we just have seen where we see like this. 33 00:02:24,430 --> 00:02:28,350 OK, we have a little see here at the beginning because it's Kristie. 34 00:02:28,920 --> 00:02:32,070 Then we have the headline of the email. 35 00:02:32,490 --> 00:02:37,590 The first couple of pieces of content and the star at the time. 36 00:02:39,690 --> 00:02:41,580 So let's take care of all of that. 37 00:02:41,730 --> 00:02:44,820 Let's make sure that our lazy column is going to be empty for now. 38 00:02:44,820 --> 00:02:51,000 We're not going to use that for now, and we're going to require another piece of data because now we're 39 00:02:51,000 --> 00:02:51,630 going to you. 40 00:02:52,740 --> 00:02:58,830 Create more data, and let's actually call our user data glass inside of our model. 41 00:02:59,160 --> 00:03:05,610 And I'm going to call this one male data, so this data class needs to have a couple of values. 42 00:03:05,850 --> 00:03:08,070 So first of all, we need to have an ID. 43 00:03:08,550 --> 00:03:11,170 It's always good to have an ID for your items. 44 00:03:11,220 --> 00:03:19,050 So male ID, which will be an integer, then a user name, which will be a string, because usually 45 00:03:19,050 --> 00:03:21,120 when you get emails, they have to be unique, right? 46 00:03:21,120 --> 00:03:22,680 And an ID makes sure of that. 47 00:03:22,800 --> 00:03:28,290 So if your ID is unique, that's definitely going to make sure that your application doesn't confuse 48 00:03:28,290 --> 00:03:28,770 the things. 49 00:03:28,980 --> 00:03:33,600 And then we need to have the subject line, which will also be a string. 50 00:03:34,020 --> 00:03:39,960 The content body of that email, which will be a string and then that timestamp. 51 00:03:40,440 --> 00:03:47,310 So while timestamp, which will be a string as well and empty string for now. 52 00:03:47,880 --> 00:03:50,940 So this is how our male data is going to look like. 53 00:03:50,970 --> 00:03:56,090 Now, of course, you could have more data here like sender, receiver and so forth. 54 00:03:56,100 --> 00:04:02,430 But this is really simplified for our particular case because you see here, we don't need more information 55 00:04:02,970 --> 00:04:03,750 at this point. 56 00:04:03,780 --> 00:04:07,440 Now, if you were to click inside of this email, you would need more details. 57 00:04:07,470 --> 00:04:11,160 Now, this really depends on how you have the data available in your database. 58 00:04:11,520 --> 00:04:14,880 You could either have all of the data and you would load it already here. 59 00:04:14,880 --> 00:04:18,120 And then once somebody clicks into it, you would display that. 60 00:04:18,120 --> 00:04:20,130 But that would probably not be the best approach. 61 00:04:20,399 --> 00:04:24,870 So you'd rather just have this reduced piece of mail data. 62 00:04:25,170 --> 00:04:30,750 And then once you click into it, you would load all of the rest of the details about this piece of 63 00:04:30,750 --> 00:04:31,200 data. 64 00:04:31,200 --> 00:04:37,710 So about the specific email where you would have another data class saying detailed male data, for 65 00:04:37,710 --> 00:04:42,450 example, and then you would get it from the mail ID that you're using and you would load all of the 66 00:04:42,450 --> 00:04:45,840 rest of the content that you need to load whatever you need there. 67 00:04:46,500 --> 00:04:49,110 OK, so now that we have that? 68 00:04:50,350 --> 00:04:57,640 Let's go ahead and create a list of entries because I want to have a mailing list. 69 00:04:57,850 --> 00:05:00,280 So basically this part here. 70 00:05:01,180 --> 00:05:05,770 This is a mail list item to call it something like that. 71 00:05:06,160 --> 00:05:09,580 So mail item is how I want it to be. 72 00:05:09,940 --> 00:05:17,200 And you see, we have this icon here at the top left and we have the name of the user name or the sender 73 00:05:17,200 --> 00:05:17,710 or whatever. 74 00:05:18,160 --> 00:05:21,040 We have the subject and so forth. 75 00:05:21,340 --> 00:05:22,810 So that's the design that I want to build. 76 00:05:23,110 --> 00:05:23,950 So let's build that. 77 00:05:24,250 --> 00:05:26,890 Therefore, we will need a new component. 78 00:05:27,430 --> 00:05:27,790 All right. 79 00:05:27,790 --> 00:05:30,430 So once again, inside of our components. 80 00:05:32,550 --> 00:05:35,340 Let's create a new Scotland class file. 81 00:05:35,940 --> 00:05:38,340 And this one will be a file, not a class again. 82 00:05:38,730 --> 00:05:41,100 The components are just functions in our classes, right? 83 00:05:41,460 --> 00:05:43,710 So here I'm going to call this one mail list. 84 00:05:45,330 --> 00:05:45,720 OK. 85 00:05:46,080 --> 00:05:47,750 So this will be a composable. 86 00:05:47,760 --> 00:05:53,550 As always, composable are just UI elements that you can use inside of other composable, which is really 87 00:05:53,550 --> 00:05:53,970 useful. 88 00:05:54,390 --> 00:05:59,380 So this will be the mail list function and it needs to have some padding values. 89 00:05:59,760 --> 00:06:04,200 So we want to know how much padding we want to have towards the different directions. 90 00:06:05,460 --> 00:06:12,270 OK, now we will need to have the definition for an individual meal item. 91 00:06:12,510 --> 00:06:15,210 So this is a mail list, the entire list of the emails. 92 00:06:15,480 --> 00:06:20,550 But I would also like to have a definition of how a specific item should look like. 93 00:06:20,880 --> 00:06:27,150 So let's add a composable here with our mail item function. 94 00:06:27,330 --> 00:06:32,850 So mail item, which will have the mail data and a modifier. 95 00:06:33,480 --> 00:06:36,990 So the modifier will just be modifier. 96 00:06:38,740 --> 00:06:39,220 Like so. 97 00:06:42,170 --> 00:06:44,600 All right, for now, what do we want to have in there? 98 00:06:45,050 --> 00:06:46,580 Well, we're going to have a roll. 99 00:06:47,680 --> 00:06:55,130 So here I'm just going to say roll like this is going to be our UI. 100 00:06:57,220 --> 00:07:01,510 And then we will need to add content to it later on. 101 00:07:01,520 --> 00:07:03,340 For now, it will just be an empty row. 102 00:07:04,210 --> 00:07:07,750 And by the way, in case you were wondering, where does a modifier comes from? 103 00:07:07,750 --> 00:07:13,180 It doesn't even offer me a solution there because it imported the wrong modifier. 104 00:07:13,930 --> 00:07:20,200 So let me make sure that I have the right modifier here and that is the compose UI modifier, and then 105 00:07:20,200 --> 00:07:21,280 the error should disappear. 106 00:07:22,180 --> 00:07:24,610 OK, so let's look at what we want to have in this role. 107 00:07:24,730 --> 00:07:30,700 We want to have a card first, which will just be this little card with the first letter of whatever 108 00:07:30,700 --> 00:07:31,390 the text is. 109 00:07:31,540 --> 00:07:34,960 So the first letter of Christie, in this case, it's seat. 110 00:07:35,650 --> 00:07:39,640 And I'd say, let's go ahead and define this or style this a little bit. 111 00:07:40,150 --> 00:07:48,250 So I'm going to create a card in here which will have a modifier and also let's import card while we're 112 00:07:48,250 --> 00:07:48,610 at it. 113 00:07:49,150 --> 00:07:56,280 So will have a modifier of modifier that will have a little bit of padding. 114 00:07:56,290 --> 00:08:00,820 So let's use eight density pixels of padding towards the right. 115 00:08:01,150 --> 00:08:03,670 So let's import deep here as well. 116 00:08:04,300 --> 00:08:12,460 Then I want to define its size to be something like 40 density pixels, and then I'm going to clip a 117 00:08:12,760 --> 00:08:14,410 circle shape. 118 00:08:14,740 --> 00:08:19,030 So I want to have a circle shape, as we've seen and also the background. 119 00:08:19,030 --> 00:08:21,400 So let's add a gray background to it as well. 120 00:08:21,820 --> 00:08:25,090 Background color should be color dot gray. 121 00:08:26,900 --> 00:08:33,620 OK, so this will take care of our cart, but the car doesn't have content for now. 122 00:08:33,950 --> 00:08:40,179 And now this is what I'm going to change, so I'm going to create a text which I need to import as well. 123 00:08:40,880 --> 00:08:48,620 And this text will have the text property of getting the data from our mail data items. 124 00:08:48,620 --> 00:08:51,110 So if you look at it, our mail data item has a username. 125 00:08:51,350 --> 00:08:53,270 And that's where we get this data from. 126 00:08:53,570 --> 00:08:58,460 So mail data dot username at the position of zero. 127 00:08:58,730 --> 00:09:05,960 So what this will do is it will give me the first letter of my username because a string is just an 128 00:09:05,960 --> 00:09:08,480 array of charts or of characters. 129 00:09:08,810 --> 00:09:09,890 So that's what we do here. 130 00:09:10,280 --> 00:09:15,560 So just to make sure we're going to use to string here to really make sure that this is going to be 131 00:09:15,560 --> 00:09:19,010 a string and then we can align the text. 132 00:09:19,190 --> 00:09:21,110 So I want to align the text in the center. 133 00:09:21,170 --> 00:09:28,220 So I'm going to use text align center and I'm going to set the modifier of this text to have a little 134 00:09:28,220 --> 00:09:29,210 bit of padding as well. 135 00:09:29,630 --> 00:09:33,650 So let's set the padding to a density pixels as well. 136 00:09:34,990 --> 00:09:41,050 So this will create this little card here with the first letter of whatever name we have. 137 00:09:42,870 --> 00:09:47,670 So let's have a look at how this is going to look like in a preview. 138 00:09:48,030 --> 00:09:54,720 So what we can do is we can just go ahead and use the preview annotation here and then the composable 139 00:09:54,720 --> 00:10:01,860 annotation, as we have seen before, right where we wanted to preview something directly in our designer 140 00:10:01,860 --> 00:10:02,160 here. 141 00:10:02,610 --> 00:10:06,060 And I'm going to call this one mail item preview. 142 00:10:07,680 --> 00:10:15,360 And what it will do is it will use the mail item, which is this composable here and we're going to 143 00:10:15,360 --> 00:10:17,100 pass some dummy data to it. 144 00:10:17,730 --> 00:10:20,070 So we need to pass and mail data here. 145 00:10:20,310 --> 00:10:28,980 Mail data, which will just be a mail data object where I have the mail ID of, let's say, for the 146 00:10:28,980 --> 00:10:34,080 username of, let's say, Angelo Mirta. 147 00:10:34,710 --> 00:10:40,770 Then we have the subject, which will be email regarding something important. 148 00:10:42,640 --> 00:10:43,110 OK. 149 00:10:43,300 --> 00:10:44,560 Always good to read those. 150 00:10:44,920 --> 00:10:49,450 And then the body, which will just be a string that says this is regarding. 151 00:10:51,360 --> 00:10:54,420 An important opportunity. 152 00:10:56,610 --> 00:11:02,010 OK, something like this, and then I think the last setting that we needed to pass was the time stamp. 153 00:11:02,310 --> 00:11:09,120 So let's set the time stamp to something like 22 o'clock because this person is working very late. 154 00:11:10,020 --> 00:11:14,070 OK, so this is how our preview is supposed to look like. 155 00:11:14,070 --> 00:11:20,190 So let's run our application real quick because we're not using mail item in our app yet, but I hope 156 00:11:20,190 --> 00:11:24,330 we get a mail list preview and that we are. 157 00:11:24,660 --> 00:11:25,650 So we get the preview. 158 00:11:25,830 --> 00:11:27,500 And in this case, we just have the A. 159 00:11:27,810 --> 00:11:32,400 Because none of the other details that we have passed so far, so the user name, subject and so forth. 160 00:11:32,670 --> 00:11:33,630 None of that is defined. 161 00:11:33,640 --> 00:11:41,160 So far, we have only defined this card, which has a size of 40 dpi and has in a letter inside of it, 162 00:11:41,160 --> 00:11:45,180 which is this text, which currently is just a of Angelo. 163 00:11:45,720 --> 00:11:46,110 All right. 164 00:11:46,710 --> 00:11:53,070 So now let's design this a little nicer because currently it does not look great and we want to have 165 00:11:53,940 --> 00:11:55,770 this appearance right? 166 00:11:56,250 --> 00:11:56,760 This one. 167 00:11:57,570 --> 00:12:01,800 So now we have the card, let's add the other stuff in there as well. 168 00:12:02,700 --> 00:12:06,630 And if we look at it, we have the card and then we have this column. 169 00:12:06,630 --> 00:12:07,890 So let's create a column here. 170 00:12:08,970 --> 00:12:14,640 So the column, which has a, well, we're just going to have a modifier here and. 171 00:12:16,780 --> 00:12:24,120 I'm just going to use modifier Dodd's weight directly, so I will give this a little bit of weight, 172 00:12:24,130 --> 00:12:28,390 what this will do is it will make sure that this piece is taking enough space. 173 00:12:28,840 --> 00:12:30,880 Otherwise, it would not look properly. 174 00:12:30,880 --> 00:12:35,720 We can see how it's going to look like without after we could just delete this line and then see how 175 00:12:35,720 --> 00:12:36,460 it is going to be. 176 00:12:36,970 --> 00:12:39,850 So inside of it, we see we have just three texts, right? 177 00:12:40,150 --> 00:12:48,000 So one text that just displays the male data that username and now designed this text as well. 178 00:12:48,010 --> 00:12:54,000 So the font size sees a little bigger than the other ones, and we're going to use an 18 Aspie. 179 00:12:54,050 --> 00:12:55,390 Let's import a speaker as well. 180 00:12:55,780 --> 00:12:58,120 And then font weight, which will be bold. 181 00:12:58,330 --> 00:12:59,170 OK, because. 182 00:13:00,240 --> 00:13:04,890 If you look at this Christie's bolt now, let's do the same thing with the title. 183 00:13:05,130 --> 00:13:06,780 OK, let me copy and paste this. 184 00:13:07,230 --> 00:13:09,030 So this one will be the subject. 185 00:13:10,810 --> 00:13:18,040 And then I'm going to use a slightly smaller size here as you see the size of smaller and then that's. 186 00:13:19,240 --> 00:13:25,210 Actually, yeah, yeah, let's add the content, which is going to be the body of the email, so you 187 00:13:25,210 --> 00:13:31,090 see this email data has a user name, subject and body and then it has timestamps. 188 00:13:31,660 --> 00:13:39,130 So what we're doing right now is we are using this information at displaying so the body was smaller. 189 00:13:39,130 --> 00:13:42,580 Even so, 14 s b should be fine at the font weight wasn't bold. 190 00:13:42,700 --> 00:13:44,620 So let's get rid of this as well here. 191 00:13:45,400 --> 00:13:49,480 So now let's run it again to see the preview data. 192 00:13:51,400 --> 00:13:56,380 And there we are, we have the icon with Angelo email regarding something important, and this is regarding 193 00:13:56,380 --> 00:13:57,580 an important opportunity. 194 00:13:58,180 --> 00:13:58,990 So that's great. 195 00:13:59,080 --> 00:14:03,190 So that seems to work, but it's still not exactly what we wanted to end, by the way. 196 00:14:03,610 --> 00:14:07,720 Let's add the background because otherwise it just doesn't look great. 197 00:14:07,960 --> 00:14:10,660 So show background should be set to true here. 198 00:14:11,750 --> 00:14:15,020 Now, let's see, OK, then we have a background looks a lot better. 199 00:14:15,500 --> 00:14:17,060 So what are we missing still? 200 00:14:17,630 --> 00:14:23,840 We can see that we are still missing the time stamp as well as this little star icon. 201 00:14:26,890 --> 00:14:29,750 So they are on top of each other here, as you see. 202 00:14:29,770 --> 00:14:31,430 So this is just another column, right? 203 00:14:31,450 --> 00:14:34,610 So we have a row with a column and then next to it, another column. 204 00:14:34,960 --> 00:14:37,540 So let's just add this additional column. 205 00:14:38,200 --> 00:14:48,490 So I'm going to put it here column, which will not have any parameters, but it will have a text which 206 00:14:48,490 --> 00:14:49,840 is going to be the timestamp. 207 00:14:50,080 --> 00:14:54,730 So text will be the male data that timestamp. 208 00:14:56,390 --> 00:15:02,450 And then we have the icon, and this is actually an icon button because we should also be able to click 209 00:15:02,450 --> 00:15:02,780 on it. 210 00:15:02,870 --> 00:15:08,090 So let's import icon button and an icon button has to have an on click event, which for now can do 211 00:15:08,090 --> 00:15:12,090 nothing because, well, we're not going to do anything with it for now. 212 00:15:12,140 --> 00:15:13,790 You could change that any time. 213 00:15:14,180 --> 00:15:25,430 And then we're going to set the modifier to have a size of 50 density pixels and a padding of, let's 214 00:15:25,430 --> 00:15:28,610 say, 16 density pixels towards the top. 215 00:15:29,150 --> 00:15:30,980 So a little bit of distance towards the top. 216 00:15:32,650 --> 00:15:33,040 OK. 217 00:15:33,160 --> 00:15:39,730 And then there's Icon Button also needs a content, so I'm going to give it an icon, which is going 218 00:15:39,730 --> 00:15:42,340 to well, let's import icon first. 219 00:15:43,490 --> 00:15:49,130 This will make it easier, and this is going to be the compose u i version, and then we can use the 220 00:15:49,130 --> 00:15:55,430 image vector here or set the image vector to be icons start outlined and we saw earlier how to use outlines, 221 00:15:55,430 --> 00:15:55,790 right? 222 00:15:55,790 --> 00:16:00,770 And I'm going to call star outline or you start outline, which is just a start up we saw. 223 00:16:01,130 --> 00:16:06,170 And then we can what we have to pass the content description, which I'm just going to leave empty for 224 00:16:06,170 --> 00:16:06,470 now. 225 00:16:07,840 --> 00:16:13,960 OK, so let's look at the preview once again, that's rebuilt the application, and then we should see 226 00:16:14,320 --> 00:16:15,640 the icons here. 227 00:16:15,850 --> 00:16:16,540 There we are. 228 00:16:16,630 --> 00:16:18,070 So let me zoom out a little bit. 229 00:16:18,400 --> 00:16:20,620 We see the star, we see the time stamp. 230 00:16:21,280 --> 00:16:22,420 We see all of it. 231 00:16:24,580 --> 00:16:30,010 OK, so now I just want to make a couple of changes to my role itself because we cannot see properly 232 00:16:30,010 --> 00:16:34,600 here, but once we would run it, I would like to have a modifier here as well. 233 00:16:35,200 --> 00:16:40,540 So the modifier will be Phil Max with. 234 00:16:42,330 --> 00:16:42,990 And then. 235 00:16:44,370 --> 00:16:52,770 The padding of high density pixels towards the bottom, so just a little bit of distance towards the 236 00:16:52,770 --> 00:16:53,070 bottom. 237 00:16:55,610 --> 00:16:59,960 OK, and now we can fill their mail list with our box. 238 00:17:00,290 --> 00:17:05,690 So we want to have a box with all of the data that we want to display, right? 239 00:17:06,079 --> 00:17:12,859 So we could go ahead and create a lazy column with a bunch of items, but therefore we need to have 240 00:17:12,950 --> 00:17:13,460 data. 241 00:17:13,670 --> 00:17:15,619 And for now, we don't have any data. 242 00:17:15,890 --> 00:17:19,760 But what I'm going to do is I'm just going to create mock data. 243 00:17:19,970 --> 00:17:24,140 OK, so just some no well made up data. 244 00:17:24,560 --> 00:17:27,069 So let's go ahead and create a new column file class. 245 00:17:27,079 --> 00:17:31,370 And this will just be a file which I'm going to call mock data. 246 00:17:32,150 --> 00:17:41,060 And this file will just have a mailing list or mail list, which will just be a list of our mail data 247 00:17:41,060 --> 00:17:41,600 items. 248 00:17:42,350 --> 00:17:47,210 OK, so this mail data item one is going to be like this. 249 00:17:47,210 --> 00:17:50,090 We need to import new data for this to work because it's in a different. 250 00:17:51,200 --> 00:17:55,770 Package, so this may later, we'll have the idea of one the username of Christie's subject will be 251 00:17:55,800 --> 00:17:56,780 weekly Android news. 252 00:17:56,780 --> 00:17:57,950 The body will be Hello Christie. 253 00:17:57,950 --> 00:18:03,070 We have got exciting additions to the Android API and so forth. 254 00:18:03,080 --> 00:18:07,210 So what I'm going to do now is I'm just going to paste in some dummy data. 255 00:18:07,220 --> 00:18:13,460 You can download it from the project that is assigned to this lecture, or you can just create your 256 00:18:13,460 --> 00:18:15,350 own dummy data if you feel like it. 257 00:18:15,650 --> 00:18:18,920 And this has to go inside of here. 258 00:18:19,160 --> 00:18:21,980 Let me see if I have the separator to come separator here. 259 00:18:21,980 --> 00:18:23,630 Otherwise suitable get errors. 260 00:18:23,960 --> 00:18:24,740 Not I'm fine. 261 00:18:24,920 --> 00:18:31,220 So just go ahead and write some things yourself or just copy the one that I have here, and then you 262 00:18:31,220 --> 00:18:32,330 should be good to go. 263 00:18:32,750 --> 00:18:37,550 Now let's go ahead and use this inside of our made a list inside of this composable, because now we 264 00:18:37,550 --> 00:18:42,380 can use this mock data list that we have this mail list inside of our mail list. 265 00:18:42,380 --> 00:18:47,240 Composable could, of course, give it different names as well if you really feel like it. 266 00:18:47,630 --> 00:18:50,400 And now we can just go ahead and to use a box here. 267 00:18:50,660 --> 00:18:57,440 So we see in boxes before right, which are just a way to put a bunch of data or a bunch of proposals 268 00:18:57,440 --> 00:18:57,830 in there. 269 00:18:58,190 --> 00:19:03,590 So I'm going to have the modifier of having a little bit of padding using the padding values that we 270 00:19:03,590 --> 00:19:04,760 are passing here. 271 00:19:05,120 --> 00:19:10,130 So depending values will be these ones here, like so. 272 00:19:11,300 --> 00:19:17,770 And then the box itself will contain our lazy column, as we have seen in our main activity before. 273 00:19:17,780 --> 00:19:18,980 So this lazy column. 274 00:19:19,310 --> 00:19:23,990 So let me cut it out from there because we're not using it there, we're using it here and now this 275 00:19:23,990 --> 00:19:24,740 lazy column. 276 00:19:26,160 --> 00:19:33,480 Can block my male data, so it's going to get this, which is a lazy list scope, which is just going 277 00:19:33,480 --> 00:19:34,430 to be the male data. 278 00:19:34,890 --> 00:19:41,100 OK, so now our lazy column, I'm going to give it a modifier as well so that this list that we have 279 00:19:41,100 --> 00:19:41,430 here. 280 00:19:43,100 --> 00:19:49,190 This one has certain settings, and the settings are just going to be that it should fill the maximum 281 00:19:49,190 --> 00:19:55,970 size, so it should fill as much size as it has available, so modifier don't fill max size. 282 00:19:57,620 --> 00:20:06,110 And have a little padding towards the side so that there is a distance towards the edges and then we 283 00:20:06,110 --> 00:20:14,300 get the lazy telescope, which is just going to be an items list of mailing or made list. 284 00:20:15,880 --> 00:20:20,260 OK, and this will then give us this mail list. 285 00:20:24,650 --> 00:20:27,770 And this lazy column will give us a lazy list. 286 00:20:28,190 --> 00:20:34,070 OK, a scope of lazy list so we can use this lazy list, which will be items. 287 00:20:35,250 --> 00:20:36,720 And these items. 288 00:20:38,260 --> 00:20:41,680 We're going to pass our mail list to. 289 00:20:43,180 --> 00:20:46,030 So now we can get the male data from it. 290 00:20:48,320 --> 00:20:49,490 And use it. 291 00:20:50,840 --> 00:20:57,900 So what we're going to do is we're going to create mail item items out of mail data data. 292 00:20:59,150 --> 00:21:00,320 OK, so. 293 00:21:01,790 --> 00:21:06,950 Basically, we have this mail item here, which requires some real data, right, and we're passing 294 00:21:07,220 --> 00:21:14,780 the mail item, the mail data that we get from the mail list, which is the one from a market data. 295 00:21:15,050 --> 00:21:16,160 So this one here. 296 00:21:17,060 --> 00:21:24,800 And we need to import it as well, so it has to be this mail list from our Gmail clone and then the 297 00:21:24,800 --> 00:21:28,160 errors disappear because this mail list does have mail data and we can all use it. 298 00:21:29,420 --> 00:21:30,160 OK. 299 00:21:30,200 --> 00:21:34,820 So this is our mail list now, and it won't do anything unless we are using it. 300 00:21:34,820 --> 00:21:40,700 So you can very conveniently see that it currently is great, which means it's not used. 301 00:21:41,060 --> 00:21:48,110 OK, so I'm going to pass padding values, which I want to use as the values for my Boxall padding towards 302 00:21:48,110 --> 00:21:48,800 the different sites. 303 00:21:48,800 --> 00:21:50,060 However, I want to define it. 304 00:21:50,450 --> 00:21:59,180 And now let's go ahead and actually use our mailing list and that will be inside of our scaffold. 305 00:21:59,360 --> 00:22:04,940 So in our main activity, we have the scaffold where we get padding values from conveniently. 306 00:22:05,150 --> 00:22:05,510 All right. 307 00:22:05,840 --> 00:22:10,580 Let's go ahead and use our mail list with the headings that we're getting. 308 00:22:10,580 --> 00:22:12,800 So the padding values, which is, does it? 309 00:22:13,130 --> 00:22:15,110 OK, and we need to import mailing list. 310 00:22:15,620 --> 00:22:17,180 So it's this it padding values. 311 00:22:17,190 --> 00:22:23,330 Let's rerun this and let's see if we can actually get the data in our application and we see that we 312 00:22:23,330 --> 00:22:23,570 are. 313 00:22:23,600 --> 00:22:25,820 So we have the data in our application. 314 00:22:26,120 --> 00:22:30,760 Let's just test this by modifying that data. 315 00:22:30,770 --> 00:22:37,160 So here it's not going to be Christy, but Misty, OK from Ash Ketchum and Pokémon and stuff. 316 00:22:37,160 --> 00:22:39,820 So let's see if Misty also gets this or sensor's email. 317 00:22:39,830 --> 00:22:44,720 So you see, Misty is a new Android developer, and she's sending us a message at 9:40. 318 00:22:45,290 --> 00:22:46,220 Hot, working, misty. 319 00:22:46,250 --> 00:22:47,000 Thank you very much. 320 00:22:47,510 --> 00:22:52,190 And yeah, that's pretty much how you can use lazy columns. 321 00:22:53,230 --> 00:23:01,660 Do create something that in old terms, you would have you called a recycler view or a list view. 322 00:23:02,260 --> 00:23:08,710 So if you come from the Android space and you have built Android applications in the past, then this 323 00:23:08,860 --> 00:23:09,940 is basically what it is. 324 00:23:11,260 --> 00:23:12,520 So what we need to do? 325 00:23:12,790 --> 00:23:17,010 Well, we needed to create this mailing list, which was just as composable. 326 00:23:17,020 --> 00:23:19,270 We needed to define individual items. 327 00:23:19,810 --> 00:23:26,050 We need to pass data to those items so that we can well basically define how such an item should look 328 00:23:26,050 --> 00:23:29,050 like and which data I should use. 329 00:23:29,830 --> 00:23:30,820 And then we can. 330 00:23:31,930 --> 00:23:33,070 Pass that data. 331 00:23:34,080 --> 00:23:42,450 To our mailing list inside of the lazy column, where we get those items from our data source, so in 332 00:23:42,450 --> 00:23:45,450 our case, our data source is just this list of male data. 333 00:23:45,780 --> 00:23:48,880 But this data source could be a database in the cloud. 334 00:23:48,900 --> 00:23:50,510 It could be a database on your phone. 335 00:23:50,520 --> 00:23:54,690 It could be all kinds of databases that you want to love to data from. 336 00:23:55,710 --> 00:23:57,200 All right, so that's it for this video. 337 00:23:57,200 --> 00:23:58,080 A pretty long video. 338 00:23:58,440 --> 00:23:59,800 Thank you for still being with me. 339 00:23:59,820 --> 00:24:05,010 I know it was tough, but let's go over to the next one where we're going to look at the. 340 00:24:05,950 --> 00:24:09,790 Floating Action Button, which is going to be a very short video, so I'll see you there.