Welcome back.
And this year, we're going to take care of the details screen, so you can see here we have some details
here with the image, then the author, as well as the time when the title was written.
Description and some details.
All right.
So that's basically what we want to build going back than you are on the main screen.
Then you go to the next news and that's what we want to build in this video.
So let's get started.
Therefore, conveniently, we are on the digital screen already, or at least I am.
And I'm going to get rid of this button because what this button doesn't do anything instead of the
button, I will have an image.
So looking at it, when we're here, you see we have still this text detailed screen, then we have
the image, then we have the author and time.
So let's start with that.
First of all, the image where I need what I need to first set to painter resource.
And to me, import image, therefore, which will be my news.
A data that image.
OK, and let's import image correctly here.
It's going to be this one here.
And other than that, let's actually do it otherwise like this painter will paint a resource like so
then the content description.
We'll just be an empty string, or you could go as far as read something into the image, like the title
of the new status.
All right.
And then after the image, you see, we have a rule, so we have this item, then we have that item.
So it's just too informal with icons that we have there.
So let's go ahead and create a rope where I will need to import Rome.
So it will be the UI compose one.
Then I can set the modifier to be modified that Phil mix with because I want to take the entire available
with with just a bit of padding towards all directions of eight density pixels.
So we need to import DPI here for this to work and a horizontal arrangement of arrangement space between.
OK.
So this will be our role, and now we need to define what should be inside of the role.
And I'm just going to display an icon with some info and therefore let's go ahead and create a separate
composable.
So I'm going to use the composable annotation here again.
Fun AI in full with I can.
You could also called I can with info, but then we need to define the icon, which will be an image
vector and the in4, which will be a string.
So we just create this composable that we can then use in here for our role, where we pass in the icon
as well as the title or the text that we want to display.
So I'm just going to use icons, thought defaults, dot edit here and in form will be new state art
dot author for this one.
So we need to import icons for this to work.
Therefore, hover over icons of enter and add it should be imported as well with all the internet.
So this will be number one and four with icon and the other one will be the data range or date range.
I think it was not that date range.
So this little icon that exists, which is going to be this date here and the data that we want to display
here are the info will be published at.
OK, so now we have the data for our info with Icon, but we don't even know how to design it.
Well, designing it will be quite easy to see.
We just have an icon and then we have a text next to it.
So that's pretty much it.
So let's go ahead and create this role that will have all of that stuff.
So an icon with.
Well, let's import icon here, and then it will take the icon as the image.
Then the content description will just be the author.
The modifier will be a little bit of padding towards the right hand side of, let's say, eight density
pixels.
All right.
And then we need to have a color for it as well.
So I'm going to use purple here, and I'm going to get the purple from our resources.
So there's this color resource resource like this where the ID will be are not color but purple.
Let me see.
Oh yeah, for me to be able to use our, I need to import my package.
So let me import this news app.
Thought are like this and now I can work with, ah, with my resources.
And this will be the purple, let's say, 500.
So I want to use this purple right here for the icons color.
And then after the icon, I want me to set the text that I want to display as well, which will just
be my info that I get from here to string, which would be the new state author, for example, or the
published at, depending on which item we're looking at.
OK.
So that should be my detail screen.
All the way until this point, so let's just see how this is going to pan out.
So let's go over to a detailed screen.
We see the image, then we see Namita Singh wrote this, or she was the editor or the author.
You could, of course, use a different icon here if you wanted to.
And then this was written on the 4th of November.
All right.
And then we have a little bit of text underneath.
At least that's what I want to have if we look at it.
So.
It doesn't seem like the application is still open.
But I want to just have, on one hand, the title.
Of the article saw text news data title.
And the font weight will be bold.
So font weight.
Bold.
And then the other tax object that I'm going to have is going to be the new state to description.
So the detail of the article?
All right.
So here I'm going to have a little bit of padding towards the top, otherwise it's just going to look
weird.
So here top is going to be 16 Typekit now we have modified up modifier.
We can get rid of that and set the equal sign that the error should disappear.
All right.
So now let's check it out once again.
Let's see if it's going to look any better and have some more details.
So let's click in here and we see with Cleo Smith live kidnap suspect.
And now imagine we had more details in here, so more data that we need to display.
Well, then we need to make sure that we can scroll through this detail screen.
And if you want to scroll through the details screen you might recall, then you need to make sure that
you have a scroll state.
All right.
So you see, we don't used a knife controller anymore as it is grid out and we will need it because
if somebody wants to go back to just have to press the back button.
But what we will need is going to be a scroll state because as I said, I want to make sure that this
detailed screen is going to be scrollable.
Whenever you add a scroll state or any state, your preview will be unhappy because we need to make
sure that we are passing a scroll state here as well, we don't need to remember NAV Controller any
more, but we will need to remember scroll state now.
So remember scroll state for the preview.
It's really, as I said, this is just a states states don't remember in the preview because we just
display the UI.
All right now, at this point, we need to create a scroll state because if we look at our application,
we should get some arrows somewhere in our application and misses that in the news app.
Yes, that's where we are using the details screen.
So now we get this error because we are setting the news for the nav controller, but we're never actually
setting the scroll controller or the scroll state button said.
So here we set up the nav controller.
Let's go ahead and create the scroll state as well, which will just be a remember scroll state.
So remember, remember the 6th of November?
What was it?
The 5th?
Remember scroll state.
Something like this.
And now we can pass this scroll state to our details screen.
OK, so now the details screen should be happy because it gets the nav controller or the scroll state
better said that it needs.
But now this by itself, you can see that this crucial state is never used.
So it is great out and that has to do with us, not ever using it.
So that's something we want to assign to our column.
So the column has a modifier with Phil Max with and here we can just add the vertical.
Scroll to it and I want to add the school.
We have to add the scroll state here, but there is something else that I'm not very happy with.
You see here that there is no padding on the side and it just looks so weird if the text starts all
the way at the edge.
So that's something that we can very easily fix as well.
But just adding a little bit of padding here.
So here I'm going to add padding towards all directions of 16 dpi to our columns modifier.
Now, at this point, we should be able to scroll and we should be able to run this.
So.
Yeah, well, there's nothing to scroll here because the text isn't big enough, and I'm not sure whether
and any of our examples to text is long enough.
So what we could do is we could just fake it because we're faking the data anyways, right?
So let's go over to our little girl.
Uh, with Delia Smith news descriptions.
So this kidnaper stuff, let's just copy and paste it so we will have to text twice, even though this
is a very lazy solution, but it's going to work for this particular case.
So as we run it and just test how it's gonna look like.
So let's click in here and we see now we can scroll.
So if there is enough text that we need to display, then we will be able to scroll.
And then also, you see, we have the padding towards all sides of 16 so that we can properly display
stuff and it looks a lot better.
OK, so that's it for this video in the next one, we're going to add the app bar and format date in
time ago instead of displaying the time like this.