Welcome back.
And this video, we are going to add some fake data, as you see here with a little bit of a user interface
or just have to date and the images basically.
So this is going to be the fake data where we have the image, the text and then the description, even
though it's not perfect yet, we're going to take care of that.
But for now, let's go ahead and build what we see here.
Therefore, let's go ahead and create a model first.
All right, so whenever we are working with data, it's always good to start with the model in mind.
And therefore, I'm just going to put it directly into my main folder here.
We could, of course, create a model folder for this, but that makes sense once we have multiple items.
So I'm going to call this one and use data, which will be a class this time.
But it will be a data class because, well, we want to store data and use this new data as the type
for that data.
So what kind of information do we want to store?
Well, I would say every piece of news should get an idea that's always good practice with whatever
model you're using.
Then we should have something where we store the image.
OK, then that image will by default, be breaking news.
So we will need to add the resources to this.
We would like to also know about the author.
So who wrote this piece of news?
Then what's the title of this news?
Maybe a little bit of a description.
So what are the details in those news?
And then also, when was the news published?
OK, so now we're going to require a bunch of troubles.
Later on, we can draw them from the internet or get them from the internet.
But for now, let's use a couple of dribbles that I have made ready.
You can find them over here, so there's the Tiger King does Thomas, nanometre, lion and so forth.
So let's go ahead and import the draw bowls.
I'm going to get them directly from this folder here.
So I'm going to mark all the images that I want to add and import them into my project.
OK, now we have the breaking news as well for our new data.
Now let's go ahead and set up a mock data object.
Therefore, I'm just going to create a new covalent file class, which will just be an object.
And I'm going to call this one mock data because we don't have a data source yet that is going to be
from the internet, but we're going to set that up in the next chapter.
So we have the mock data inside of it.
We are going to require a top news list list of news data.
So we just created this new class and now let's create a list of another list.
So list of new data?
And now let's put some data in here, and this is something I would recommend that you copy from our
project.
So just download the project and put the new data in here.
It will just be a bunch of new data with an idea, an author and title description, as well as when
it was published.
OK, so yeah, I would recommend to really just download this.
Otherwise, of course, you can also create your very own new data if you want to.
OK, now let's go ahead and create a template of an individual news item.
We will need to create a new item for individual news piece, and I'm going to put that into the top
news.
So here I'm going to create a new composable.
So let me get rid of that at composable fun.
Top news item.
So inside of it, we will need to pass the news data because we need to know all about the news that
we want to display.
So I'm going to put everything into a box and the box will get some modifiers here, which will be modifier
dot height.
With 200 density pixels, so here for this to work, we need to, first of all, important box.
Then let's import height, then it's important the 200 dpi and then I want to have a little bit of padding
so that it's not going to be glued to the other items.
OK, so this will be the default modifier.
So the default UI settings for our box inside of it, I have an image first.
So this image needs to be imported.
So let's add image here import and the UI compose version.
So then I can set the resource, which is a painter resource, as we've done multiple times before,
which will be the image that we get from it and use data.
So he had a new state.
If you recall, it had an image which isn't adorable.
By default, it's going to be the breaking news, but we're going to override it with the image that
we have for the particular new data that we are looking at.
Then, as always, with images, you need to have a content description.
Otherwise your ID is going to be complaining, but I'm just going to for now, keep it empty and then
we need to add the content scale or I'm going to scale this image.
So there's this content scale property where you can use content scale and then fill bones, crop the
image, fill the width of the image to hide.
Make sure that it fits and so forth.
I'm going to fill the bounce so you can try these different content, scales out with the image and
see how they look and then decide what fits best to the images that you have.
And then I want to have the column.
So if we look at this, so we have the image right, and then we have a column where we set the texture
at the top, then we have a big spacer and then underneath we have our description.
OK, so this will all fit into our column here.
So I'm going to create another modifier where I want to rep the content height.
So I want to make sure that the content height is kept to the size that we have available for it.
And then I'm going to add a little bit of padding towards the top of 16 dpi and towards the left of
16 dpi as well.
OK, and then as always, such a column needs to have contents.
So let's go ahead and add some content.
And by the way, let's add something else to this column.
So we have to wrap content tied with the padding.
And then we should take care of the arrangement inside of it.
So how do we want to arrange it?
And I'm going to say that it's going to be vertically arranged, that the arrangement will be space
between.
So I want to have some space between the items inside of this column.
So what items do I want to have in the column?
Well, first of all, a text which will display the new status published it so published at.
Because if you look at it, you see in here at the top, I have one.
It was published and you see also that the color was white.
So I'm going to set the color to white like so.
And the fund will be semi bolt, so font weight will be sensible, as we have used many times before.
So this is going to be our first test.
Then as I said, I want to have a spacer here, so a bunch of space in between.
So we can use a spacer modifier with a modifier.
So here, spacer, that's important.
OK.
And then here the modifier will be a height of, let's say, 80 than 50 pixels, something like that.
And then finally, we have another text which will take the new state to that title.
OK, so we get the title.
The color, which will also be white, as we've seen before.
At the same font weight that we had for our other text.
OK, so let me put that into different lines as well.
So it's going to be a little more readable.
So we have the two texts with the spacer, and now we can go ahead and display this top news item inside
of our preview here.
So instead of displaying the top news, let's go ahead and display a top news item with some news data.
And here I'm just going to use dummy data like so.
So the new data will be a new state data object with some dummy data.
OK, so this is just an object of foreign news data.
The a class.
OK, now let's display our top news items so we can run this, and we will not see it in our actual
application because, well, we didn't set it up to display there, but let's see if we can get it into
the preview because here we still have this button.
Go to the details screen, but the design shows you this is the text.
Then we have the image in the background and we have this other text, even though it doesn't look great.
So maybe we want to give it a little bit of background and so forth.
So that's something we can take care of later.
But for now, let's make sure that we actually see this also in our application.
So we need to display it instead of this go to detail screen.
So instead of using this button, what we can use here is going to be, well, let's think about it.
What would make sense if you look at the use application?
It's similar to what we had here, so in this project, we had something where we could scroll, and
this is always good to use a lazy column here.
So let's use a lazy column which will only lazily load content.
So I don't need to define the content in here.
I'm going to define it via the items.
So here the content will be items which will be pieces of mock data.
So here I am saying what is the content of my lazy column?
And it's going to be the mock data that top news list, which is a list, right?
So you need to pass a list of items inside of this item's method.
And then we can say what we want to do with every single piece of items.
And here it needs to import something.
Let me see that import the correct one.
Call it lazy column.
Because it should be happy with the mock data, the top news list, so it probably took the wrong items.
So to me, who did it again?
Everything that we're not using and all use items here.
Well, I'm going to pass my mock data.
Thought.
Top news stories.
Oh, still isn't happy.
Well, let's make sure that we import it in case that's the problem.
Import.
OK, that seems to have been the problem.
So we need to import our mock data over here, even though I had it imported earlier.
But it's still the error appeared.
So now we get the individual items.
So here the lazy item scope.
Which is going to be one by one to items that we have in here, so the first item, the second item,
third item and so forth.
OK, so now we can go back to our other file, which was, I think, top news and we can now design
every single item.
So here I'm going to say that I want to display for each item a top news item and which news item do
I want to use?
While the news data and what do I get this news data from?
Well, that's this lazy item scope.
OK, so I can just use it like this so I can say news data, which will be the use data items called
this lazy item scope.
So basically the individual item, as I said, so that's what this number gives us and then we can use
this news data to display it.
So at this point, we should be able to run the application and see the new state i our application.
So there we are, we have the images.
And it doesn't look perfect for each image, some just don't fit well and others look great.
OK, so that's what we have set up now.
We can play around, obviously with the details and make it look better.
But for now, it's just important to display some dummy data.
In the next, we were going to look at how to navigate with an argument because we can now navigate,
as we saw earlier with the button to a different screen.
But we need to pass to the details screen what article we want to have the details about.
So do we want to have it?
The bubbles breaking news about Tiger King.
They want to have a over Cleo Smith news and so forth, right?
So once we click on it, we want to go to the next screen to the detailed screen, which we will have
to design as well.
So that's it for this video.
See you in the next one.