Welcome back in this lecture, we will display the male list on our page and the draw menu section.
We used a column with a scroll view to display a list, but that is because we know that the data will
not change.
What if you are dealing with data you have no control over and it is bound to change at any time?
That is when we can use lazy column.
Lazy Column is a composable built to display dynamic lists and we will be showing a list of emails on
the first page of the screen, as you see here.
So this is just a lazy column that we are using inside of our scaffold.
All right.
So this is a fixed amount of data that we have, but still it could change any time because it could
load, for example, from a database or something like that.
So let's go ahead and use this lazy column in our project.
Therefore, let's go back to our project and inside of our main activity.
We had our scaffold, and that's where we can now create our lazy column.
And actually, for now, the lazy column will not be inside of those parentheses, those around it,
but the curly brackets, so it's inside of the content.
So let's use the lazy column here.
And for now, let's use very simple content.
So I'm going to use items of, well, just 50 items.
And they will just get me an index, and this will be index like so.
And I can use that index to display it inside of a text.
So this text will just display the index with at.
Index, so this will make a lot more sense in a second, and then I'm also going to add a divider like
so.
So let's look at this project now with this lazy column, which now will have 50 items.
It will give me the index of every single item and you see it, says Index.
And then the number.
So we just have this scrollable list now.
Now what we want is, of course, to have data that we want to display and we want to display it in
a certain format because you see we do have the text, then we have a divider, then we have another
text and we have another divider and so forth.
But I would like to displayed in this in a nicer way, as we just have seen where we see like this.
OK, we have a little see here at the beginning because it's Kristie.
Then we have the headline of the email.
The first couple of pieces of content and the star at the time.
So let's take care of all of that.
Let's make sure that our lazy column is going to be empty for now.
We're not going to use that for now, and we're going to require another piece of data because now we're
going to you.
Create more data, and let's actually call our user data glass inside of our model.
And I'm going to call this one male data, so this data class needs to have a couple of values.
So first of all, we need to have an ID.
It's always good to have an ID for your items.
So male ID, which will be an integer, then a user name, which will be a string, because usually
when you get emails, they have to be unique, right?
And an ID makes sure of that.
So if your ID is unique, that's definitely going to make sure that your application doesn't confuse
the things.
And then we need to have the subject line, which will also be a string.
The content body of that email, which will be a string and then that timestamp.
So while timestamp, which will be a string as well and empty string for now.
So this is how our male data is going to look like.
Now, of course, you could have more data here like sender, receiver and so forth.
But this is really simplified for our particular case because you see here, we don't need more information
at this point.
Now, if you were to click inside of this email, you would need more details.
Now, this really depends on how you have the data available in your database.
You could either have all of the data and you would load it already here.
And then once somebody clicks into it, you would display that.
But that would probably not be the best approach.
So you'd rather just have this reduced piece of mail data.
And then once you click into it, you would load all of the rest of the details about this piece of
data.
So about the specific email where you would have another data class saying detailed male data, for
example, and then you would get it from the mail ID that you're using and you would load all of the
rest of the content that you need to load whatever you need there.
OK, so now that we have that?
Let's go ahead and create a list of entries because I want to have a mailing list.
So basically this part here.
This is a mail list item to call it something like that.
So mail item is how I want it to be.
And you see, we have this icon here at the top left and we have the name of the user name or the sender
or whatever.
We have the subject and so forth.
So that's the design that I want to build.
So let's build that.
Therefore, we will need a new component.
All right.
So once again, inside of our components.
Let's create a new Scotland class file.
And this one will be a file, not a class again.
The components are just functions in our classes, right?
So here I'm going to call this one mail list.
OK.
So this will be a composable.
As always, composable are just UI elements that you can use inside of other composable, which is really
useful.
So this will be the mail list function and it needs to have some padding values.
So we want to know how much padding we want to have towards the different directions.
OK, now we will need to have the definition for an individual meal item.
So this is a mail list, the entire list of the emails.
But I would also like to have a definition of how a specific item should look like.
So let's add a composable here with our mail item function.
So mail item, which will have the mail data and a modifier.
So the modifier will just be modifier.
Like so.
All right, for now, what do we want to have in there?
Well, we're going to have a roll.
So here I'm just going to say roll like this is going to be our UI.
And then we will need to add content to it later on.
For now, it will just be an empty row.
And by the way, in case you were wondering, where does a modifier comes from?
It doesn't even offer me a solution there because it imported the wrong modifier.
So let me make sure that I have the right modifier here and that is the compose UI modifier, and then
the error should disappear.
OK, so let's look at what we want to have in this role.
We want to have a card first, which will just be this little card with the first letter of whatever
the text is.
So the first letter of Christie, in this case, it's seat.
And I'd say, let's go ahead and define this or style this a little bit.
So I'm going to create a card in here which will have a modifier and also let's import card while we're
at it.
So will have a modifier of modifier that will have a little bit of padding.
So let's use eight density pixels of padding towards the right.
So let's import deep here as well.
Then I want to define its size to be something like 40 density pixels, and then I'm going to clip a
circle shape.
So I want to have a circle shape, as we've seen and also the background.
So let's add a gray background to it as well.
Background color should be color dot gray.
OK, so this will take care of our cart, but the car doesn't have content for now.
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.
And this text will have the text property of getting the data from our mail data items.
So if you look at it, our mail data item has a username.
And that's where we get this data from.
So mail data dot username at the position of zero.
So what this will do is it will give me the first letter of my username because a string is just an
array of charts or of characters.
So that's what we do here.
So just to make sure we're going to use to string here to really make sure that this is going to be
a string and then we can align the text.
So I want to align the text in the center.
So I'm going to use text align center and I'm going to set the modifier of this text to have a little
bit of padding as well.
So let's set the padding to a density pixels as well.
So this will create this little card here with the first letter of whatever name we have.
So let's have a look at how this is going to look like in a preview.
So what we can do is we can just go ahead and use the preview annotation here and then the composable
annotation, as we have seen before, right where we wanted to preview something directly in our designer
here.
And I'm going to call this one mail item preview.
And what it will do is it will use the mail item, which is this composable here and we're going to
pass some dummy data to it.
So we need to pass and mail data here.
Mail data, which will just be a mail data object where I have the mail ID of, let's say, for the
username of, let's say, Angelo Mirta.
Then we have the subject, which will be email regarding something important.
OK.
Always good to read those.
And then the body, which will just be a string that says this is regarding.
An important opportunity.
OK, something like this, and then I think the last setting that we needed to pass was the time stamp.
So let's set the time stamp to something like 22 o'clock because this person is working very late.
OK, so this is how our preview is supposed to look like.
So let's run our application real quick because we're not using mail item in our app yet, but I hope
we get a mail list preview and that we are.
So we get the preview.
And in this case, we just have the A.
Because none of the other details that we have passed so far, so the user name, subject and so forth.
None of that is defined.
So far, we have only defined this card, which has a size of 40 dpi and has in a letter inside of it,
which is this text, which currently is just a of Angelo.
All right.
So now let's design this a little nicer because currently it does not look great and we want to have
this appearance right?
This one.
So now we have the card, let's add the other stuff in there as well.
And if we look at it, we have the card and then we have this column.
So let's create a column here.
So the column, which has a, well, we're just going to have a modifier here and.
I'm just going to use modifier Dodd's weight directly, so I will give this a little bit of weight,
what this will do is it will make sure that this piece is taking enough space.
Otherwise, it would not look properly.
We can see how it's going to look like without after we could just delete this line and then see how
it is going to be.
So inside of it, we see we have just three texts, right?
So one text that just displays the male data that username and now designed this text as well.
So the font size sees a little bigger than the other ones, and we're going to use an 18 Aspie.
Let's import a speaker as well.
And then font weight, which will be bold.
OK, because.
If you look at this Christie's bolt now, let's do the same thing with the title.
OK, let me copy and paste this.
So this one will be the subject.
And then I'm going to use a slightly smaller size here as you see the size of smaller and then that's.
Actually, yeah, yeah, let's add the content, which is going to be the body of the email, so you
see this email data has a user name, subject and body and then it has timestamps.
So what we're doing right now is we are using this information at displaying so the body was smaller.
Even so, 14 s b should be fine at the font weight wasn't bold.
So let's get rid of this as well here.
So now let's run it again to see the preview data.
And there we are, we have the icon with Angelo email regarding something important, and this is regarding
an important opportunity.
So that's great.
So that seems to work, but it's still not exactly what we wanted to end, by the way.
Let's add the background because otherwise it just doesn't look great.
So show background should be set to true here.
Now, let's see, OK, then we have a background looks a lot better.
So what are we missing still?
We can see that we are still missing the time stamp as well as this little star icon.
So they are on top of each other here, as you see.
So this is just another column, right?
So we have a row with a column and then next to it, another column.
So let's just add this additional column.
So I'm going to put it here column, which will not have any parameters, but it will have a text which
is going to be the timestamp.
So text will be the male data that timestamp.
And then we have the icon, and this is actually an icon button because we should also be able to click
on it.
So let's import icon button and an icon button has to have an on click event, which for now can do
nothing because, well, we're not going to do anything with it for now.
You could change that any time.
And then we're going to set the modifier to have a size of 50 density pixels and a padding of, let's
say, 16 density pixels towards the top.
So a little bit of distance towards the top.
OK.
And then there's Icon Button also needs a content, so I'm going to give it an icon, which is going
to well, let's import icon first.
This will make it easier, and this is going to be the compose u i version, and then we can use the
image vector here or set the image vector to be icons start outlined and we saw earlier how to use outlines,
right?
And I'm going to call star outline or you start outline, which is just a start up we saw.
And then we can what we have to pass the content description, which I'm just going to leave empty for
now.
OK, so let's look at the preview once again, that's rebuilt the application, and then we should see
the icons here.
There we are.
So let me zoom out a little bit.
We see the star, we see the time stamp.
We see all of it.
OK, so now I just want to make a couple of changes to my role itself because we cannot see properly
here, but once we would run it, I would like to have a modifier here as well.
So the modifier will be Phil Max with.
And then.
The padding of high density pixels towards the bottom, so just a little bit of distance towards the
bottom.
OK, and now we can fill their mail list with our box.
So we want to have a box with all of the data that we want to display, right?
So we could go ahead and create a lazy column with a bunch of items, but therefore we need to have
data.
And for now, we don't have any data.
But what I'm going to do is I'm just going to create mock data.
OK, so just some no well made up data.
So let's go ahead and create a new column file class.
And this will just be a file which I'm going to call mock data.
And this file will just have a mailing list or mail list, which will just be a list of our mail data
items.
OK, so this mail data item one is going to be like this.
We need to import new data for this to work because it's in a different.
Package, so this may later, we'll have the idea of one the username of Christie's subject will be
weekly Android news.
The body will be Hello Christie.
We have got exciting additions to the Android API and so forth.
So what I'm going to do now is I'm just going to paste in some dummy data.
You can download it from the project that is assigned to this lecture, or you can just create your
own dummy data if you feel like it.
And this has to go inside of here.
Let me see if I have the separator to come separator here.
Otherwise suitable get errors.
Not I'm fine.
So just go ahead and write some things yourself or just copy the one that I have here, and then you
should be good to go.
Now let's go ahead and use this inside of our made a list inside of this composable, because now we
can use this mock data list that we have this mail list inside of our mail list.
Composable could, of course, give it different names as well if you really feel like it.
And now we can just go ahead and to use a box here.
So we see in boxes before right, which are just a way to put a bunch of data or a bunch of proposals
in there.
So I'm going to have the modifier of having a little bit of padding using the padding values that we
are passing here.
So depending values will be these ones here, like so.
And then the box itself will contain our lazy column, as we have seen in our main activity before.
So this lazy column.
So let me cut it out from there because we're not using it there, we're using it here and now this
lazy column.
Can block my male data, so it's going to get this, which is a lazy list scope, which is just going
to be the male data.
OK, so now our lazy column, I'm going to give it a modifier as well so that this list that we have
here.
This one has certain settings, and the settings are just going to be that it should fill the maximum
size, so it should fill as much size as it has available, so modifier don't fill max size.
And have a little padding towards the side so that there is a distance towards the edges and then we
get the lazy telescope, which is just going to be an items list of mailing or made list.
OK, and this will then give us this mail list.
And this lazy column will give us a lazy list.
OK, a scope of lazy list so we can use this lazy list, which will be items.
And these items.
We're going to pass our mail list to.
So now we can get the male data from it.
And use it.
So what we're going to do is we're going to create mail item items out of mail data data.
OK, so.
Basically, we have this mail item here, which requires some real data, right, and we're passing
the mail item, the mail data that we get from the mail list, which is the one from a market data.
So this one here.
And we need to import it as well, so it has to be this mail list from our Gmail clone and then the
errors disappear because this mail list does have mail data and we can all use it.
OK.
So this is our mail list now, and it won't do anything unless we are using it.
So you can very conveniently see that it currently is great, which means it's not used.
OK, so I'm going to pass padding values, which I want to use as the values for my Boxall padding towards
the different sites.
However, I want to define it.
And now let's go ahead and actually use our mailing list and that will be inside of our scaffold.
So in our main activity, we have the scaffold where we get padding values from conveniently.
All right.
Let's go ahead and use our mail list with the headings that we're getting.
So the padding values, which is, does it?
OK, and we need to import mailing list.
So it's this it padding values.
Let's rerun this and let's see if we can actually get the data in our application and we see that we
are.
So we have the data in our application.
Let's just test this by modifying that data.
So here it's not going to be Christy, but Misty, OK from Ash Ketchum and Pokémon and stuff.
So let's see if Misty also gets this or sensor's email.
So you see, Misty is a new Android developer, and she's sending us a message at 9:40.
Hot, working, misty.
Thank you very much.
And yeah, that's pretty much how you can use lazy columns.
Do create something that in old terms, you would have you called a recycler view or a list view.
So if you come from the Android space and you have built Android applications in the past, then this
is basically what it is.
So what we need to do?
Well, we needed to create this mailing list, which was just as composable.
We needed to define individual items.
We need to pass data to those items so that we can well basically define how such an item should look
like and which data I should use.
And then we can.
Pass that data.
To our mailing list inside of the lazy column, where we get those items from our data source, so in
our case, our data source is just this list of male data.
But this data source could be a database in the cloud.
It could be a database on your phone.
It could be all kinds of databases that you want to love to data from.
All right, so that's it for this video.
A pretty long video.
Thank you for still being with me.
I know it was tough, but let's go over to the next one where we're going to look at the.
Floating Action Button, which is going to be a very short video, so I'll see you there.