All right, welcome back.
Now let's go ahead and take care of finalizing what we see here so that we can actually see the sources.
So under sources, we need to create something that will take care of the source content, so a composable
which will display how source content should look like.
So let's go ahead and create the new composable here.
I'm going to call this one source content and we'll need the articles to that should display so articles,
which will be a list of top news article.
OK, and now this composable.
Well, first of all, need a lazy column.
So we're going to create a lazy column which will display the content.
So I'm going to do it like this as we've seen multiple times, right?
So now we get the items which are individual art while all the articles, but we're going to get the
individual articles from this.
So let's make sure we use the article in here.
Article like so.
And we see so this will be the articles in here and see items.
Which will be like this.
OK.
All right, so we're getting the articles now.
So here we will need an annotated string for the articles, for the URL, because if you look at the
articles here, it would give us an entire string, right?
So this entire link.
So we need to create that link.
We're going to do that by creating an annotated and notated string, which we're going to build using
the built annotated string.
So here you can push a string annotation with a tag, for example.
In our case, it's going to be the URL and the annotation, and it will be the article you URL.
And if that doesn't exist, it's going to be news API dot org.
So I'm just going to say, OK, create this push string annotation with a certain style.
So with style, I'm going to designed a style to be span style.
Wear the color.
We'll use our color resources, and it's going to just a purple color.
OK, so here, color resource, purple, so we need to import pan style.
And here receipts with style.
So I'll still get the error because probably we need to add some more parameters.
So for example, the tax declaration and I'm going to say it will be an underlined text declaration.
So here.
Underlined, and it needs content.
So with style gets a content where it's just going to upend.
Read full article here, though here it seems like an imported the wrong with style, so let me get
rid of this line and see if I can import it now, and it's going to be happy.
It doesn't seem like it.
This, with style gets a band style.
With the color and then the tax declaration, so all the way up to here seems like it's like this,
OK?
Now it's going to be happy.
Now what can happen to man or man so many opening and closing brackets, huh?
And it says Read full article here.
Thanks.
So.
So this is what I want to have in my application where it's shows here.
Read full article.
So this is what I'm styling here.
OK, I'm getting this text declaration where I say it should be underlined and it should be purple text.
So that's what I'm creating here with this annotated string.
So for every single item, I want to have to annotate that string.
But that annotated string is really just the preparation because we are what we would now like to use
this annotated string in this card.
So now we need to set up this card while you see it has this purple background.
It has the title, it has a description, and then it has this button underneath.
So let's set all of that up.
We are still inside of this items here, and we need to now go ahead and create the card that we want
to use.
So I'm going to set the background color to be my color source purple 700.
So let me just copy that.
I don't want to type all of that manually.
This is going to be purple 700.
It will have an elevation of six density pixels, some modifier with a little bit of padding.
So modifier thought padding of eight density pixels.
OK, so let's import modifier here for this to work.
All right, there we are at.
What's up with padding now, like so padding?
All right.
And we need to import padding as well.
All right.
So now what do we want to have in this cart?
So I would say it's a column which contains all three items on top of each other.
So let's go ahead and create a column which will need to be imported.
So that's import column here, and we're going to pass a modifier or going to set the modifier to style
a little bit.
So I want to fix the height to, let's say, 200 density pixels, and I'm going to add padding towards
the left and right.
So and.
Of eight dpi and start of a DPI.
OK, then I'm going to set the vertical arrangement to space items evenly vertically.
And then we need to define what should be inside of this column.
So inside of the column, we see that we have a text with another text with, well, we could say this
car, another car, so to speak.
So it set up the text and I'm just going to use this text here, which gets me the title of the article.
And if it's not available, then it's going to say not available.
Font weight will be bold.
It will only display two lines, and if there is more to display, it will use this ellipsis style.
So let me see if we have an example here that we have an example.
So it's just going to do Dot Dot Dot for the ellipsis style.
So this will be text number one, text number two will be the description.
So here text article description.
If it's not available, it's going to say not available.
It's just going to display three lines.
And it's not going to be bold, as you can see.
OK, so now we have our annotated string and what we are going to need for the cards that I want to
display underneath.
So here I want to display a card, but this card will need to have a set of set up.
So first of all, I'm going to set it to be white.
So color, but white.
Then I mean, what color here?
And then I'm going to set the elevation to be sixth density pixels like so.
And then the card itself will have some content, and that's where I will need to set this part up here,
right?
So I need to have something called a your eye handler, so lets up set up a euro handler up here, your
eye handler, which will be a local.
Your eye handler.
That current?
So what this will allow me to do is to handle your ISO links or URLs.
OK, so we are going to use to annotate that string that we have set up with pain here.
This annotated string and now we are going to use it in our cart and I'm going to make it clickable
texts.
So it's not going to be an actual button.
I'm just going to say, Hey, this is going to be clickable and the text will be our annotated string.
So it's just going to say, Uh, yeah, click on this or just going to say, read full article here,
OK?
And once we click on it and on, click events should happen.
So here we can design what should happen.
And what I'm going to say is I'm going to use my annotated string to get string annotations from it.
I'm going to pass it and it has the string start and or the tech start and start end.
And then I'm going to get the first or no.
So give me the first entry or null if they're not empty.
So if this exists, then I want to load the result, which I'm going to get from this let.
So from this gets string annotations, it's going to give me the result of it.
And I'm going to check if the result tag is going to be the URL.
Then use my you are a handler to open a you or I.
So pass and the result that item.
So basically, this is just the code that you need in order to open a link in your browser.
So you see, if I click on this, it just opens up the browser that was set as default browser, and
it just opens it up with the result item, which gives us the.
String, so the article, Earl, which is this location where the article is from.
So were the original article.
So now let's actually use the source contents inside of our sources scaffold.
Content so here where it says it's padding values here, I need to use the news manager to get articles
by source and then I can load the individual article.
Getting it from our news manager, don't get article by source Todd Value.
So whatever the current value for the article sources and then I can use my source content and post
the article to it like so.
And while the article has articles in it.
Which if it's empty, I'm just going to pass an empty list to it.
So the article itself, well, you could say it's the top news, so maybe we could give it a different
name.
But this gets me the article by source.
Well, it's actually multiple articles, so it's going to give me the articles by source that we should
maybe call these articles thought articles.
And if it's not empty, then use the articles.
If it's empty, use an empty list.
All right.
Now, while testing, I realized something, and that's why I copy and paste things.
Always tricky.
So here in our news manager, we had this function get articles by source, and I still used to retrofit
service, which then uses our news service.
And you see, this method is still great out.
So I never used it, which is why I will not see any items here.
So let's change that by changing the method that we're calling here.
So now we're going to get articles by source in our get articles by source method.
OK, so by sources or whatever.
So we're not passing the source name value.
This still stays the same, but here we just need to make sure that this method name is different.
So let me rerun this and not on my phone, but on the Android device that we have here, the emulator.
And then we should hopefully see the articles as well.
So let's go over to sources, and there we are.
Read full article here.
It doesn't look exactly the same, but yeah, it's fine.
You can design it if you want.
Now let's look for talkSPORT.
You see talkSPORT Sport.
We just have two articles than The Verge.
We have multiple articles from The Verge here.
Let's just go over to this article clicking on it and you see.
It lowers the verge for us, perfect, so now we can search by source, and this has two more must have
to do with the padding of our cards.
So let's check out why it looks so poor and this would be this sources, Katie.
All right, so this has to do with this card, so this is a clickable text, and I'd say we should we
need a little bit of.
A modifier here, so let me add that modifier in between here modifier, which will be modified up heading
with, say, eight density pixels in here.
So this should then look a lot better.
Let me try that.
Let's go to sources, yeah, that's it.
All right.
That's it for this video.
I hope you enjoyed it.
Now you know how to swap this sources and.
Yeah, you can now read our bunch of articles where categories by a source's way are top news and all
the good stuff.
So you in the next one?