Welcome back.
And this video, we are going to take care of the app bar and the top bar that we have here at the top,
where we can then also navigate back and then the next one, we're going to add the bottom navigation.
So in order to build this, we are going to use something that we have used in the Gmail application
before.
And I hope you can remember how we did it.
Maybe you want to pause the video and look back how to create a UI that does something like this where
you have a top, a top bar, then you have the actual content and so forth.
OK.
All right.
So I'm going to tell you anyway.
And that is that we are going to use a scaffold.
All right.
So therefore, in our details screen, instead of putting everything into our column, we're going to
put the details of our scaffold into the wall, the column into the scaffold details.
But we're going to also add a top bar.
So here we're just going to define the top bar.
And then we have the content for our application, and I think I need to add those ones in here.
So everything inside of this column needs to go into those brackets here.
So into the content of the scaffold.
OK, so everything that we built before.
So let's go ahead and create a top bar.
Now you could, of course, go ahead and create an extra component for all of that.
But I'm just going to put it inside of this file or this detailed screen because it will be on the screen
anyways.
So fun detail.
Top up bar.
So I'm going to call it, and then I'm going to pass in an on back pressed in here.
So this will just be a lambda.
Which I am really used to use of writing unity as a scene.
Maybe you should check out my unity course as well if you want to become a game developer.
So here, yeah, I'm going to build a top bar.
So top up bar, to be precise at this top bar, kind of a couple of properties that you can assign.
So here to title, for example, what I'm going to do is I'm going to use a text here where I'm going
to set the text to be detail screen with a font weight of some siebold.
At this point, it becomes funny, semi bold.
Like so.
And what else do we need to set here?
I think that should be it.
But why is it not happy with the text?
Let's see once we have added the other parts into our top app bar.
So we have the title with the text, and maybe it's because it uses the wrong text notes compose material,
so that should be fine.
But let's just go on with the navigation icon.
And this has to be still inside of this bar, so we have this text that goes all the way up to here
and there.
I'm going to have my.
Navigation icon.
So.
You see, I can use a number here as well, which I'm good to use and I can button for.
OK, so here once we click on this button, I just want to use the on deck pressed method, which is
just what happens once you click on this button here.
But you see, this is the icon button that I want to have here at the top.
So let's create an icon inside of it.
Inside of the content, which will be the image, a vector of icons that default thought arrow back
and we need to add a content description as well.
So I'm just going to add an empty description, and the error that I'm getting here is because of me
trying to add contents to a top up bar, which it doesn't require.
All right, that's that's it.
So the top hat bar has a title, and the title would just be a text composable, which I'm going to
set the details screen and being bold.
And then we have this navigation icon, which I'm going to use an icon button for, which will just
be the arrow back button and once it is collected, will perform the on back press event, which is
the same thing as if we pressed on this back button at the bottom of our phone or swipes, depending
on your settings.
OK, now we can pass this detailed top hat bar to our scaffolds top bar here.
And we can override what should happen when we pressed the back button, because what I want to do is
I want to pop the back stack.
So if you want to override the on back press here, you can override it with your own method.
And what I'm going to use is just my navigation controller.
And therefore, we need to put it back.
We have gotten rid of it last time.
So let's put it back in here.
So we are going to use this NAF controller to use to pops back a stick method, which would just get
rid of the current screen.
Accordingly, we will need to make a change to our.
Preview here, so the details screen now also needs to have their remember NAF controller with no navigators.
So now we are using the details screen.
Inside of our new setup, we need to pasta knife controller as well.
Luckily, we have a knife controller at this point already because we had set it up here that remember
nav controller inside of our navigation in the news app.
OK, and now what I want to do is I want to display the time in how many times it's back since this
article has been published, OK, see here six days ago.
So we need to calculate how much time has passed, and I'm just going to create a method that will be
or function that will be available through our mock data.
So here I'm just going to use to date Dot get time a goal which will return a string.
And we need to import data for this.
The Java util one should be fine.
And we need to first create a calendar.
Object, which we'll just used to kill and, ah, get instance, which basically just creates a common
object.
We get the calendar's time to be right now.
So this will be the time then we can set up the year, the month, the day and so forth.
OK, so it's going to work like this where we set the year to be calendar get calendar year.
The month will be get calendar month, the day, get calendar day of the month.
Our hour of day and minute will just be minute because we need to, first of all, get those information
before we can then use the current calendar.
So we need to know what time was here when it was published and then compare it to what we have right
now.
So I'm just going to create another calendar object, which I'm going to call current calendar, and
then we need to do the same thing with those years, with the current year.
OK, so here current year, current month and so forth, current year will be current calendar get,
calendar year and so forth.
OK.
So now this will be a little tricky, but what I'm just going to return is that you can see we need
to return a string.
I'm going to return something if the year is less than current year.
Then I'm going to return interval will be the current year.
Minus the year.
And if.
Interval is going to be one.
Then the value will be interval year ago, Peltz.
It will be interval like, so interval.
Years ago.
So what I'm basically just saying is if the article is just one year old, then we're going to say the
article was written one year ago.
If it's multiple years ago, we're going to say years ago, Okay.
And then.
We need to take care of all of the else, if cases, so else, if, then we're looking at the month.
There's less than the current month.
And then we're going to do the same thing with this interval, but with the current month and so forth.
So let me just put it in here and go over it with you.
So we have this return.
Every year is less than current year that we looked at.
Then we do the same thing with the month, then we do the same thing with the day here.
Then with the hour and then with the minute, and if it's less than a minute that the article was written,
then the text will just be a moment to go.
And what will be this text?
Well, this will be the text that will be returned.
So we're basically saving us the time to create an extra variable that we're going to then use and display.
But we're just saying, OK, return this text or this text for the year, return this text or just text
for the month and so forth.
So our precision goes gradually, more and more towards being more precise.
So the article is less than a day old, and it will display the hours if it's more than a day or a day
old and it's going to display the days.
If it's more than a month, it's going to this been a month and so forth.
And now we just need to have a method that will allow us to convert a string to a date.
So.
I just have this method prepared for you.
Let me just go over it with you.
So we are getting the published date at when it was published as a string and we're going to return
a date object.
So we create this date object where we are checking the Android version if it is greater than Android.
So the API level 24, then it will use this simple data format.
And if it's an older device, then it's going to use the Java text simple data format with the same
format.
So it's your year, month, month, day day, then T hours, minutes, seconds.
Exactly.
So it will pass this publish, add a string into an actual date item.
OK, so and date object item.
And then we're going to lock this date and return to date.
OK, so now we can go ahead and use this string to date method in order to display to date with the
time ago.
So let's go over, why would we want to display it while in our detail screen?
So here and for with Aitken, where we display the info, this is here, I think, yeah, the description
the title is published at.
So this is info with icons.
So here we display the published date.
So now what we need to do is we need to get this from the mock data.
So we're using our mock data to use its string to date method, which will now take.
And then we put that in a separate roll.
So it's easier.
It will now take this string, which is publish it and we'll make a data out of it.
And then on that, we're going to use to get time to go method, which will then make it to date.
And this will return a string.
So info needed the string.
So now it's just going to calculate how many days ago or months ago or whatever the article has been
released.
And now on the level of the time news or on the main screen, you can also see the top, it says days
ago.
So we also need to go to the top news and apply the same principle.
So here inside of our column, where we have this text, where it says published that we need to do
the same little trick where we use our mock data.
Thought.
String to date with our new data published it, and then we convert that into a good two time ago string,
so it just tells us how much time has passed.
Ever since the article has been released and this should concluded OK, so this was just a little additional
information for you to just make this a little nicer.
So in case you ever wondered about how you could make your application, not display the actual date,
but actually how many well, periods?
Something is a goal.
You can use our methods that we just introduced in this video.
Now you can just go ahead here and you can see it's a six days ago.
And in my case, all of them are six days ago.
So let's change that for our first little piece of data.
Therefore, I'm going to go to my mock data, going to change that to the 16th.
Or 15th?
Let's do it like this.
Let's run it again.
And you see, it's a moment ago, because now the data is super close to Eggo, and obviously we also
have the top up bar here.
I didn't even cover it, but yes, that's what we have here at the top as well.