Welcome back in this video, we're going to take care of the business tab.
Well, we're going to take care of the entertainment tap as well.
And you can see the General tab works flawlessly as well.
So basically, we're going to now be able to see the news and you can see that it just it just works,
right?
It's just beautiful how it works.
And yeah, basically whenever we don't have an image, we just use the default one.
When we do have an image, we're used to proper detailed one.
You can see there are news, all kinds of languages here.
We have some Japanese and then we have I don't know what is probably like.
Creation or so we cannot click into it yet, but we are displaying the news here.
And that's pretty cool.
So we're going to set that up and this video and you see, now it has been worth to go through the struggles
of the last video of setting up the tabs up there.
And yeah, basically it will be pretty complete already at this point.
Obviously, we need to get to the navigation part of things still.
But yeah, let's just get started building that.
And displayed the news.
OK, so the first thing that we're going to need is going to be the article content, and this will
just be another composable inside of the categories composable.
So let's go ahead and use the composable keyword.
I'm going to call this one article content, and we need to know the articles that we want to display.
So articles, which will be a list of top news articles.
Our top news article to be precise, and I want to want to have the modifier being passed so that I
can modify the content accordingly.
So as you saw, we could scroll right?
So when we can scroll into something or in something, we are going to use a lazy column for that.
OK, so here we need to now define the content, and we're going to do that with curly brackets instead
of passing the content directly to the lazy column.
So we're going to write it inside of it, so to speak.
So what I'm going to say is I want to have art.
I want the items, which will be the articles that I get came.
And those articles are a list of multiple individual article items.
And I can go ahead and use those one by one so I can say articles.
Will be the lazy item scopes of the individual item, and by the way, it seems like articles seem to
create a problem here.
Now, let's see.
Okay, that should be fine.
Now we are using the article and the article is an individual card, so if you look at it, this is
while each of those is a card and I'm going to design it as a card with a modifier of a little bit of
padding.
Let's say eight density pixels towards all directions, and let's import cart so that this error disappears.
All right.
So now this card also needs some more parameters we need to define.
For example, we're going to define the border, so I'm going to have a border stroke of two density
pixels that is going to be purple.
So color will be the color source or resource inside of idea of art, a colored dot purple 500 this
time.
OK, so let me put that into a separate line so that we can read it a little better, I think this will
do well.
This will be better.
And then the cart needs the content you see, then the error disappears.
So now we can add the content to the cart and it will be.
Let's look at it.
Basically, you could say it's a roll of content where we have the image, then we have another column
and this is another role.
You could do it like that.
So.
A column with one text and then the roll inside of it.
So let's just go ahead and build that.
So first we start off with the roll where?
Well, let me import role directing import to compose your version.
Then we're going to use the modifier to fill the maximum with, as well as set the padding to, let's
say, eight density pixels and then the roll.
Well, first half this image, right, and the image, as we've seen before, is not just going to be
an image, but it's going to be a coil image.
So the cool idea or cool point about coil images is that they really help us out with all of this.
Setting the placeholder, setting the arrow holder and so forth.
So the coil image needs to have the image model, which will be gotten from the article you're able
to image.
Then we need to pass the modifier that we want to use.
So I'm going to set the modifier with a little low cap.
So here modifier is going to be modified Dot's size.
So we're just going to set the size to, let's say, 100 density pixels and then we can set the placeholder.
So I'm going to use a paint, a resource here with the idea of art or trouble dart and was breaking
news.
OK, so I'm going to use that same placeholder or that same image for the arrows as well.
And therefore, I need to add a comma here so that it's really separating it.
The holy smokes.
What's that?
And then we need to import sites as well.
So let's import size and then the image will be good.
So this would be this image here.
OK, what this image or any of the images inside of our card?
So we're saying it has a size of 100.
We will have a padding of eight density pixels, which creates this distance.
Here is eight pixels.
And it is.
Purple with a two density pixels or a stroke, so that's the two BP and the purple color.
OK, so now that we have the coil image, let's take care of the column that will display the other
content.
So I'm going to pass the modifier with a little bit of padding.
So here ATP and modifier and not modifier.
And this column will have a text at the top which will just display the article title.
So this will be article the title.
Which if it's not available, I'm just going to say not available.
So here I I'm just using a an inline if statement, so to speak.
And let's define the font weight as well to be font weight bolt.
So let's just make it big or thick.
This text, so that's going to be this text here, right?
This that says up Apple seller on this was proyectos must whatever.
So.
Apple is taking care of some of their projects.
So then.
Actually, let me add some more parameters here, because if we just do it like that could have a many
lines, and I'm just going to say I don't want to have more than three lines and I'm going to set the
overflow to use text overflow.
Hmm.
Well, we could clip it.
I'm just going to use ellipses.
So Ellipsis uses an ellipses to indicate that the text has overflowed, which means that here you see
it, says Dot Dot Dot.
So it just shows you that the text is going to be longer than what we have here.
If you would clip it, then it would just delete whatever or not display whatever rest of text there
is.
But the ellipsis is a good approach because it just shows you OK.
There is more to the title.
This title is not complete yet, and I think that's why it's good to use text overflow.
Ellipsis?
So we're saying we don't want to have more than three lines and whenever it's overflowing, used to
dot dot dot.
OK, so that's going to be the text.
But then we need another role, as I said, because if we look at this, we have this anonymous and
then we have when it was released, so.
Yeah, that's pretty much it.
So now this role needs to have a modifier with Phil mixed with, I'm going to say, take as much space
as you can and arrange to content where there is space in between the items.
OK, so that's going to be our role definition.
And now what is the role content that I want to use?
Well, I'm just going to use a piece of text where the text content will be article that author and
if it doesn't exist and say not available.
So and then we have another text in there.
Which will take our mock data method.
So we had this mock data that string to date method, and we needed to now pass the article published
at.
And if there is no article date, I'm just going to use a default one.
So let me just put that in here.
So I'm going to say.
If it doesn't exist or if it's empty, just use this.
And now this needs to.
Be converted into a string by using to get time ago, so we get a date, but then we're converting it
into a string.
So that's what we did in this mock data, if you recall.
OK, we created this big method to did that, and then we had this other method.
Yes, and now we're using those too.
All right.
So now let's go back.
And that was in the categories, yes.
So now that should be how our article content is going to look like.
And now let's set up a preview as well, I think we don't have a preview yet for our categories, so
we can create a quick preview if you wanted to.
So here at Preview at composable and fun article content preview.
OK, so what do we do with it?
Well, I'm going to create a piece of article content.
I am going to create a list of articles that I'm going to pass to it.
So it's just going to be one article for now.
Which just contains one piece of content.
So this will be my article content, let me see if I have enough closing brackets like Seoul should
be fine.
OK, so this will be the preview.
And currently, there's nothing to show.
So let's run this to then see the preview of such an article piece because I think the video would be
what is long enough without an image.
So you see here, we don't have an image.
But says Smith news life kidnap suspect.
Well, all of the good news now, Twitter saying I was the author.
It was 15 days ago.
OK, so that's what's.
We're going to get has the UI.
So here's the image placeholder.
It's empty, but we're going to add an image obviously later on.
OK, so that's it for this video and the next one, we're going to then set it up so that it will display
the data in our application once we have selected any of the given items.
So see you there.