Welcome back in this video, we're going to set up our news app to display the top news that are currently
out there so you can see once I'm scrolling, by the way, you saw just for a brief moment, there was
this top news image, which was just a placeholder.
So we see that we have a placeholder, but then it's replaced with an actual image or whether the right
image once it's ready.
And in order to achieve that, we are going to use another dependency.
Therefore, go over to your build that cradle news app and add the following dependency.
So this will load a network URL and add the image basically once it's ready.
All right.
So that's what this dependency can do for us.
So now what we can do is we can update our top news.
Katy file.
All right.
So here in our top news item, we are getting the new statement, why we were using the new data that
we manually created.
So our dummy data, so to speak.
So now let's replace that with article the top news article.
So now the piece of data that we're giving is going to be of more value.
And the article also has an image, but the image has a different name because it's called the URL to
image.
So now the image is of type URL to image, which just means that it is slightly different.
So we need to now change the entire image thing.
So this will not be an image anymore, but it will be a coil image and coil image is a new class that
is made available to us because we just changed what we just added the namespace to it or the the dependency
to it.
All right.
So now once you want to use image, you need to import it.
And this will then not be of type, paint a resource, but actually of type image model so we can just
pass.
Let me actually build this thing from scratch, and I think it makes more sense.
So we had the image, but now we're going to use the coil image like so and now this image needs a couple
of parameters.
So first of all, the image model?
All right.
And the image model will be from our article dot URL to image.
So this is the actual image, then I'm going to set the scale.
So how do I want to scale the image and I'm going to say crop the image.
So content scale.
And going to use crop here, then we need to say what we want to use as the era image.
So if there isn't an arrow, what image do we want to use?
And I'm just going to use an image that we have in our image resources, which is the one that we have
used before, which was this our thought, the Wrobel thought breaking news.
And in order for this to be available, we need to import Ah.
So let me make sure that they have that here.
So import EU Dot Horrible's Thought News app thought are.
OK, once we have our imported, this error here should disappear.
All right, now we can use this.
This is the arrow image.
So if something went wrong, but then we also need to have the placeholder image.
So there is this placeholder and you could use a different image, but I'm just going to use the same
image here.
So here this will be an image bitmap image source.
With the breaking news.
So that's really the cool thing about this coil image.
All right.
And then once we have added that, we need to make a change here in the top news item here at the top.
Because now obviously we are not passing new data anymore, but we are passing our article all we want
to pass our article here.
So inside of articles, we are not using the items that we used before.
So not much data, but instead we're using our articles.
And we get the size from it, so this will give us all of the articles size and we're going through
them one by one using the index.
OK, so I'm going to get rid of this for now.
But the articles, where do I get those articles from?
Well, whenever I create the top news item, I can pass the articles to it.
So I'm just going to say that I want to have articles, plural of type.
Top news article So here we need to add that this is going to be a list.
All right.
So this will be a list of top news articles.
And then this lazy column items with the articles makes sense of what this will do is it will go through
all of the items and then one by one.
So by index, it's going to add the top items.
So top news items.
And here the article will be the article at the next position, so articles at position of index will
give me the current article and then we can also add an on click event here.
But I'm not going to do that for now.
I'm going to do that in a minute.
So once we make this change, we will also need to make a change to our top new wall to preview.
And instead of using news data, it's going to use our top news article and it doesn't have an I.D.
So I'm going to get rid of that.
It does, however, have an author, a title of description and publish it.
So that's pretty much what we needed to change for it.
Now, obviously inside of our top news item, we need to make some more changes here as well, because
now we are not using our mock data anymore as the content for the publish ED and for the title and so
forth.
But we're going to use our article and the title position.
So title like so.
So we need to focus on it because it's another tool.
And then here with the mock data where we are setting it to publish that.
This will also be from the article when it was published at.
And this is another bill.
So we need to focus on it as well, because if you look at it, publish it is another bill.
So you could of course, check if it's null or not at this point to really make sure that it's good.
So now we have gotten rid of the errors that we had.
I think we should be fine, at least with the top news now.
Pretty much, yeah.
So you see, we are passing the article to every single top news item, which is why is it just an article
and not the articles list?
So that's great.
So now let's provides the top news list to our top news composable in the news app itself.
So let's go over to the news app so you can just enter news app here before you do that.
You can while you have to press the shift, key ways to get to this part.
So that's where we had our navigation, right?
So the nav controller with, well, this one here nav graph builder with our bottom navigation because
here we are using top news, but not in the format that they were intended.
What did they were expected?
So here we need to pass the articles as well.
So where do we get those articles from at this point?
And we get them from the bottom navigation itself.
So here I'm going to get all articles again, which will be a list of top news articles.
OK, so, Mike, so and now we should be good, but now we obviously need to pass the top news articles
to this an aircraft builder as well.
So in here inside of our navigation function, in the compose function, we need to pass not only the
nav controller, but also the articles.
So let's pass them here.
Articles like so and the articles can be empty.
So this will crash our entire application so we can surrounded with a object like so or what we can
do on the level even before that.
So here we can check the articles if they are empty.
So articles as a Nullarbor, we used to let to now surround all of this Navajo code with this letter.
OK, so we're just saying, OK, check the article if it's empty or not.
And here with my bottom navigation, I'm going to use a slightly different approach here.
So as the starting of the destination, we so far used our top news, right?
So instead, what I'm going to use is going to be the bottom screen menu or the menu screen like this?
Take the top news and the route from it.
And then I'm going to also add a modifier here with a little bit of padding.
So modifier doors, padding of whatever the padding values are that we are passing in here.
So we need to pass the padding values to our navigation up here as well.
So this will just give a little bit of padding to our navigation items.
So here it's going to be this one like so padding values.
Now, the main screen will not be happy about that, because now here in our main screen navigation,
we are not passing the padding.
So what I'm going to do is I'm going to set the padding values to it.
What do I get it from while I get it from it, putting values right here?
So that's what this it's putting values is going to be, and then it should be fine.
All right, now, this will give us the news, but you see here the top news does something not quite
right with Tyler Composable here we are just getting rid of it because our bottom and your screen top
news, our default composable are the default navigation item.
Anyway, so right the start destination.
So we don't need to set it up here manually anymore.
But what we will need to change is this composable news I.D. Because now we're not using the news I.D.
anymore as the argument, as the nav argument, but instead we're going to use the index.
OK, so the index replace it here as well and here.
So now here, instead of using used data, I'm going to use my articles right and I get them from Index
Dot and this will not be the ID anymore.
This will be actually the index because we get the integer called index the key.
And we're going to check if it's empty and if it's not empty, then we're going to get the article from
it, which will be articles at the position of index and then we're going to display the details screen.
So here this line and with the article now.
So here this will be the article.
Now, let's look at the details screen, because the details screen still things it needs new data,
but instead what it will require is going to be the article.
All right, so here we need to replace this news data with an article of type news or top news article.
I know that we are getting the article to our detailed screen.
We need to make changes to every point where we used the news data before, because now we're going
to use the article for it, right?
So instead of an image, we're going to use a coil image because we need to load the image again, and
we have seen how to set up a coil image before.
And that was inside of our top news.
So let me just take this image from there, and we're just going to do the same thing, so we're going
to get the article that is passed to us to the details screen, which is of type top news article.
It has a URL.
We're going to crop the image.
We're going to have a breaking news hero image.
So in case we don't have an image and then as a placeholder, we're going to use that image as well.
And then in the role itself, where we are setting the info with Icon now instead of, say, setting
the new state to author, we're going to set the article author.
So article the author, which I'm going to check if it's empty, then I'm going to say not available.
And otherwise, I'm going to display the author because this envoys of type string rates who can see
here.
So this is just an if clause, if exists.
So if author exists, use author, otherwise use not available.
And then I'm going to set the scene for the published at date.
Not the same entirely, but just the article that published at.
And this is another bill, so we need to force unwrap it.
OK, now we can set the texts down here.
All right, so text article will the article the title and there's another bill.
So let's check if it's empty and then just say not available.
And the same goes for the description.
So let's get article thought description.
And check if it's empty and if it is said it's not available.
All right.
And now our screen preview will obviously need to be changed as well.
So now, instead of using the news data for digital screen, we are going to use our top news article,
which needs to have a default author and all of that stuff.
So I'm just going to set the same values that we had before.
Author, title description and so forth.
So it was just a top news article.
Well, you could just go back like this and replace news data with top news article and get rid of the
source number or the idea because we're not passing the source.
OK, and that's the beauty about using named parameters and instead of using positional parameters.
OK, now if we go back to our news app, we will see that the details screen, she seems to be fine.
There we are, passing our index now instead of the I.D. and let's just see if we have any errors because
might very well be that I missed something somewhere.
But if not, then we should see the news as well as we should be able to click on to the news in order
to get to the details screen.
So.
There we are.
You saw the placeholder first and then you saw or you see the details here.
All right.
Or the top news, so let's click into one.
And you see, the clicking itself doesn't seem to work yet, so we need to check that out.
And that is obviously because in the top news, if you recall, we didn't set up an on click.
So we have this news on news click.
But then in the top news itself, let me see this was on the top news item in the top news itself here.
We need to define it on news click event.
So on news, click.
So once we click on any of the news and here, I need to separate this.
So let me see here on news clip this one.
So we didn't implement it, we didn't add anything in there.
So what I'm going to do is I'm going to use my nav controller and navigate to the detail.
Slash index.
OK.
And this has still to go inside of this bracket, so here there was a closing bracket, but it has to
go into the top news item.
So here separated with a comma, that should be fine.
OK, so now let's see if we can actually do an on click.
And I'm going to go over what we just built because it was like it was quite a bit.
We had to make quite some changes, right?
So now let's click onto an item and we see we are in the details screen now.
You could also limit the amount of letters that you have for when it was or who wrote it, and then
like when it was published.
So this doesn't look too great, right?
But that's something that is quite easy to fix.
OK, so now let's look over what we just did.
Well, first of all, we added the new dependency.
Then we had to go to our top news and make a bunch of changes to how such top news looked like because
before we were using our fake data.
But now we are getting the entire list of all articles.
I know inside of this column we're going to display the articles.
So now we check out how many articles that we get and we go through every single one of them and create
a top news item.
So what this does is it goes through the entire list of articles, and for every single one of them,
it's going to create the top news item.
What passes the article based on its index or on its position off the list that we have and makes every
single one of them clickable?
And once we click on them, we use our nav controller to navigate.
So we use this top news nav controller that we pass and then we navigate to a specific route.
As we've seen before, so this is just to a different page, so to speak.
So we're going to the details page, but with the index itself.
So then we also needed to change to individual top news item to now not use an image, but the coil
image, which allows us to use the arrow image and the placeholder image.
And instead of using the dummy data image, we used an u.
URL.
So that's a cool thing.
This image just takes this URL and makes an image out of it, because as soon or as long as this URL
actually contains an image, then obviously we needed to make a couple of changes here as well to not
use the mock data anymore, but well to not use the dummy data, but the article data.
And then in the news app itself, we needed to make a couple of changes to the navigation because now
what I'm just saying is that I'm not going to set that as default and the former that we did before,
but I'm just going to set it directly as the start of destination as the well with our route itself.
And I'm adding a little bit of padding, which we just added here as well.
So the padding values that we are now passing in here, which is something that we get directly from
our scaffold itself.
So it gives us the padding values here which setting that to it and then we're using it very nicely.
On top of that, obviously, we need now to pass the articles to our bottom navigation so that we can
then access them so we pass it to the bottom navigation.
Here you see it used the nav controller, as well as all of the articles of our type news or top news
article to then pass them to the composable here.
So here you see we are creating this top news page, but this top news page needs to know which articles
it needs to display.
That's why we're passing it to it, which is why we passed it to the bottom navigation before.
So where we call it here, we needed to pass it there and in order to be able to use it here, we got
them and we get them from well, from our response or from the internet connection that we have for
using retrofit that we have set up in the last video.
All right.
So the explanation itself was quite long, but that's really what we were basically done now for this
video.
And then you see, we just need to set up the categories and the sources still.
So see you in the next one.