1
00:00:01,180 --> 00:00:01,810
Welcome back.

2
00:00:01,900 --> 00:00:08,290
And this video, we are going to take care of the app bar and the top bar that we have here at the top,

3
00:00:08,710 --> 00:00:13,570
where we can then also navigate back and then the next one, we're going to add the bottom navigation.

4
00:00:13,840 --> 00:00:19,360
So in order to build this, we are going to use something that we have used in the Gmail application

5
00:00:19,360 --> 00:00:19,960
before.

6
00:00:20,320 --> 00:00:23,720
And I hope you can remember how we did it.

7
00:00:23,740 --> 00:00:30,190
Maybe you want to pause the video and look back how to create a UI that does something like this where

8
00:00:30,190 --> 00:00:36,400
you have a top, a top bar, then you have the actual content and so forth.

9
00:00:37,270 --> 00:00:37,630
OK.

10
00:00:38,710 --> 00:00:39,020
All right.

11
00:00:39,020 --> 00:00:40,340
So I'm going to tell you anyway.

12
00:00:40,930 --> 00:00:43,690
And that is that we are going to use a scaffold.

13
00:00:43,930 --> 00:00:44,330
All right.

14
00:00:44,350 --> 00:00:50,230
So therefore, in our details screen, instead of putting everything into our column, we're going to

15
00:00:50,230 --> 00:00:56,620
put the details of our scaffold into the wall, the column into the scaffold details.

16
00:00:56,620 --> 00:01:01,300
But we're going to also add a top bar.

17
00:01:01,570 --> 00:01:03,910
So here we're just going to define the top bar.

18
00:01:04,599 --> 00:01:14,650
And then we have the content for our application, and I think I need to add those ones in here.

19
00:01:14,650 --> 00:01:20,890
So everything inside of this column needs to go into those brackets here.

20
00:01:20,980 --> 00:01:22,600
So into the content of the scaffold.

21
00:01:24,020 --> 00:01:25,840
OK, so everything that we built before.

22
00:01:27,580 --> 00:01:30,010
So let's go ahead and create a top bar.

23
00:01:30,220 --> 00:01:33,910
Now you could, of course, go ahead and create an extra component for all of that.

24
00:01:34,210 --> 00:01:40,330
But I'm just going to put it inside of this file or this detailed screen because it will be on the screen

25
00:01:40,330 --> 00:01:40,810
anyways.

26
00:01:41,290 --> 00:01:43,160
So fun detail.

27
00:01:43,870 --> 00:01:46,210
Top up bar.

28
00:01:46,240 --> 00:01:51,850
So I'm going to call it, and then I'm going to pass in an on back pressed in here.

29
00:01:52,690 --> 00:01:56,710
So this will just be a lambda.

30
00:01:57,880 --> 00:02:01,840
Which I am really used to use of writing unity as a scene.

31
00:02:02,290 --> 00:02:05,620
Maybe you should check out my unity course as well if you want to become a game developer.

32
00:02:06,010 --> 00:02:09,699
So here, yeah, I'm going to build a top bar.

33
00:02:09,940 --> 00:02:15,820
So top up bar, to be precise at this top bar, kind of a couple of properties that you can assign.

34
00:02:15,820 --> 00:02:23,110
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

35
00:02:23,110 --> 00:02:30,520
to set the text to be detail screen with a font weight of some siebold.

36
00:02:31,660 --> 00:02:34,630
At this point, it becomes funny, semi bold.

37
00:02:34,780 --> 00:02:35,350
Like so.

38
00:02:36,140 --> 00:02:39,790
And what else do we need to set here?

39
00:02:40,910 --> 00:02:42,230
I think that should be it.

40
00:02:42,320 --> 00:02:44,120
But why is it not happy with the text?

41
00:02:44,600 --> 00:02:49,190
Let's see once we have added the other parts into our top app bar.

42
00:02:49,220 --> 00:02:56,180
So we have the title with the text, and maybe it's because it uses the wrong text notes compose material,

43
00:02:56,180 --> 00:02:57,170
so that should be fine.

44
00:02:59,670 --> 00:03:03,570
But let's just go on with the navigation icon.

45
00:03:03,780 --> 00:03:11,190
And this has to be still inside of this bar, so we have this text that goes all the way up to here

46
00:03:12,480 --> 00:03:13,280
and there.

47
00:03:13,290 --> 00:03:15,360
I'm going to have my.

48
00:03:17,080 --> 00:03:18,220
Navigation icon.

49
00:03:20,110 --> 00:03:20,350
So.

50
00:03:21,310 --> 00:03:26,710
You see, I can use a number here as well, which I'm good to use and I can button for.

51
00:03:27,550 --> 00:03:35,290
OK, so here once we click on this button, I just want to use the on deck pressed method, which is

52
00:03:35,290 --> 00:03:37,690
just what happens once you click on this button here.

53
00:03:38,140 --> 00:03:41,680
But you see, this is the icon button that I want to have here at the top.

54
00:03:41,690 --> 00:03:44,330
So let's create an icon inside of it.

55
00:03:44,500 --> 00:03:53,530
Inside of the content, which will be the image, a vector of icons that default thought arrow back

56
00:03:54,610 --> 00:03:57,070
and we need to add a content description as well.

57
00:03:57,400 --> 00:04:03,370
So I'm just going to add an empty description, and the error that I'm getting here is because of me

58
00:04:03,370 --> 00:04:07,570
trying to add contents to a top up bar, which it doesn't require.

59
00:04:07,690 --> 00:04:08,920
All right, that's that's it.

60
00:04:09,400 --> 00:04:14,980
So the top hat bar has a title, and the title would just be a text composable, which I'm going to

61
00:04:15,340 --> 00:04:17,410
set the details screen and being bold.

62
00:04:17,800 --> 00:04:23,620
And then we have this navigation icon, which I'm going to use an icon button for, which will just

63
00:04:23,620 --> 00:04:29,590
be the arrow back button and once it is collected, will perform the on back press event, which is

64
00:04:29,590 --> 00:04:35,500
the same thing as if we pressed on this back button at the bottom of our phone or swipes, depending

65
00:04:35,500 --> 00:04:36,550
on your settings.

66
00:04:38,100 --> 00:04:43,500
OK, now we can pass this detailed top hat bar to our scaffolds top bar here.

67
00:04:45,380 --> 00:04:52,670
And we can override what should happen when we pressed the back button, because what I want to do is

68
00:04:52,670 --> 00:04:54,570
I want to pop the back stack.

69
00:04:54,680 --> 00:04:59,420
So if you want to override the on back press here, you can override it with your own method.

70
00:04:59,720 --> 00:05:02,720
And what I'm going to use is just my navigation controller.

71
00:05:03,260 --> 00:05:05,760
And therefore, we need to put it back.

72
00:05:05,790 --> 00:05:07,850
We have gotten rid of it last time.

73
00:05:08,300 --> 00:05:10,460
So let's put it back in here.

74
00:05:10,910 --> 00:05:18,350
So we are going to use this NAF controller to use to pops back a stick method, which would just get

75
00:05:18,350 --> 00:05:19,490
rid of the current screen.

76
00:05:21,300 --> 00:05:23,940
Accordingly, we will need to make a change to our.

77
00:05:25,520 --> 00:05:33,500
Preview here, so the details screen now also needs to have their remember NAF controller with no navigators.

78
00:05:34,490 --> 00:05:36,800
So now we are using the details screen.

79
00:05:38,900 --> 00:05:43,400
Inside of our new setup, we need to pasta knife controller as well.

80
00:05:44,180 --> 00:05:49,430
Luckily, we have a knife controller at this point already because we had set it up here that remember

81
00:05:49,430 --> 00:05:52,220
nav controller inside of our navigation in the news app.

82
00:05:54,720 --> 00:06:00,660
OK, and now what I want to do is I want to display the time in how many times it's back since this

83
00:06:00,660 --> 00:06:04,380
article has been published, OK, see here six days ago.

84
00:06:04,590 --> 00:06:10,380
So we need to calculate how much time has passed, and I'm just going to create a method that will be

85
00:06:10,380 --> 00:06:13,830
or function that will be available through our mock data.

86
00:06:14,220 --> 00:06:22,050
So here I'm just going to use to date Dot get time a goal which will return a string.

87
00:06:24,220 --> 00:06:25,870
And we need to import data for this.

88
00:06:26,530 --> 00:06:29,230
The Java util one should be fine.

89
00:06:30,690 --> 00:06:32,970
And we need to first create a calendar.

90
00:06:34,380 --> 00:06:39,840
Object, which we'll just used to kill and, ah, get instance, which basically just creates a common

91
00:06:40,050 --> 00:06:40,650
object.

92
00:06:41,070 --> 00:06:45,540
We get the calendar's time to be right now.

93
00:06:45,630 --> 00:06:52,380
So this will be the time then we can set up the year, the month, the day and so forth.

94
00:06:52,840 --> 00:06:58,740
OK, so it's going to work like this where we set the year to be calendar get calendar year.

95
00:06:59,070 --> 00:07:04,290
The month will be get calendar month, the day, get calendar day of the month.

96
00:07:04,830 --> 00:07:11,520
Our hour of day and minute will just be minute because we need to, first of all, get those information

97
00:07:12,180 --> 00:07:15,210
before we can then use the current calendar.

98
00:07:15,420 --> 00:07:24,090
So we need to know what time was here when it was published and then compare it to what we have right

99
00:07:24,090 --> 00:07:24,510
now.

100
00:07:25,050 --> 00:07:33,660
So I'm just going to create another calendar object, which I'm going to call current calendar, and

101
00:07:33,660 --> 00:07:36,870
then we need to do the same thing with those years, with the current year.

102
00:07:37,910 --> 00:07:43,400
OK, so here current year, current month and so forth, current year will be current calendar get,

103
00:07:43,400 --> 00:07:45,230
calendar year and so forth.

104
00:07:46,410 --> 00:07:46,780
OK.

105
00:07:47,310 --> 00:07:52,710
So now this will be a little tricky, but what I'm just going to return is that you can see we need

106
00:07:52,710 --> 00:07:53,610
to return a string.

107
00:07:54,180 --> 00:08:00,990
I'm going to return something if the year is less than current year.

108
00:08:03,600 --> 00:08:08,670
Then I'm going to return interval will be the current year.

109
00:08:10,850 --> 00:08:12,290
Minus the year.

110
00:08:14,160 --> 00:08:14,940
And if.

111
00:08:16,220 --> 00:08:19,350
Interval is going to be one.

112
00:08:20,270 --> 00:08:27,580
Then the value will be interval year ago, Peltz.

113
00:08:28,190 --> 00:08:33,799
It will be interval like, so interval.

114
00:08:35,010 --> 00:08:36,870
Years ago.

115
00:08:41,409 --> 00:08:47,560
So what I'm basically just saying is if the article is just one year old, then we're going to say the

116
00:08:47,560 --> 00:08:49,630
article was written one year ago.

117
00:08:49,900 --> 00:08:53,690
If it's multiple years ago, we're going to say years ago, Okay.

118
00:08:53,920 --> 00:08:54,400
And then.

119
00:08:55,980 --> 00:09:02,190
We need to take care of all of the else, if cases, so else, if, then we're looking at the month.

120
00:09:03,400 --> 00:09:04,810
There's less than the current month.

121
00:09:06,910 --> 00:09:12,520
And then we're going to do the same thing with this interval, but with the current month and so forth.

122
00:09:13,210 --> 00:09:18,250
So let me just put it in here and go over it with you.

123
00:09:19,030 --> 00:09:20,650
So we have this return.

124
00:09:20,650 --> 00:09:23,550
Every year is less than current year that we looked at.

125
00:09:23,560 --> 00:09:28,540
Then we do the same thing with the month, then we do the same thing with the day here.

126
00:09:30,470 --> 00:09:36,020
Then with the hour and then with the minute, and if it's less than a minute that the article was written,

127
00:09:36,410 --> 00:09:38,690
then the text will just be a moment to go.

128
00:09:38,810 --> 00:09:39,990
And what will be this text?

129
00:09:40,010 --> 00:09:41,960
Well, this will be the text that will be returned.

130
00:09:42,320 --> 00:09:47,180
So we're basically saving us the time to create an extra variable that we're going to then use and display.

131
00:09:47,540 --> 00:09:55,700
But we're just saying, OK, return this text or this text for the year, return this text or just text

132
00:09:55,700 --> 00:09:57,440
for the month and so forth.

133
00:10:00,510 --> 00:10:05,730
So our precision goes gradually, more and more towards being more precise.

134
00:10:06,060 --> 00:10:12,900
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

135
00:10:12,900 --> 00:10:14,670
old and it's going to display the days.

136
00:10:14,790 --> 00:10:18,090
If it's more than a month, it's going to this been a month and so forth.

137
00:10:20,150 --> 00:10:25,760
And now we just need to have a method that will allow us to convert a string to a date.

138
00:10:26,600 --> 00:10:27,020
So.

139
00:10:28,760 --> 00:10:30,860
I just have this method prepared for you.

140
00:10:31,940 --> 00:10:34,130
Let me just go over it with you.

141
00:10:34,910 --> 00:10:40,880
So we are getting the published date at when it was published as a string and we're going to return

142
00:10:40,880 --> 00:10:41,840
a date object.

143
00:10:42,740 --> 00:10:49,340
So we create this date object where we are checking the Android version if it is greater than Android.

144
00:10:50,540 --> 00:10:58,400
So the API level 24, then it will use this simple data format.

145
00:10:59,510 --> 00:11:06,650
And if it's an older device, then it's going to use the Java text simple data format with the same

146
00:11:06,650 --> 00:11:07,040
format.

147
00:11:07,040 --> 00:11:12,920
So it's your year, month, month, day day, then T hours, minutes, seconds.

148
00:11:13,040 --> 00:11:13,610
Exactly.

149
00:11:14,210 --> 00:11:21,110
So it will pass this publish, add a string into an actual date item.

150
00:11:21,740 --> 00:11:24,470
OK, so and date object item.

151
00:11:25,250 --> 00:11:28,640
And then we're going to lock this date and return to date.

152
00:11:31,370 --> 00:11:40,310
OK, so now we can go ahead and use this string to date method in order to display to date with the

153
00:11:40,310 --> 00:11:40,970
time ago.

154
00:11:42,480 --> 00:11:46,890
So let's go over, why would we want to display it while in our detail screen?

155
00:11:47,640 --> 00:11:57,270
So here and for with Aitken, where we display the info, this is here, I think, yeah, the description

156
00:11:57,900 --> 00:12:00,300
the title is published at.

157
00:12:00,300 --> 00:12:01,530
So this is info with icons.

158
00:12:01,530 --> 00:12:03,000
So here we display the published date.

159
00:12:03,660 --> 00:12:08,960
So now what we need to do is we need to get this from the mock data.

160
00:12:08,970 --> 00:12:16,170
So we're using our mock data to use its string to date method, which will now take.

161
00:12:17,240 --> 00:12:18,840
And then we put that in a separate roll.

162
00:12:18,840 --> 00:12:19,680
So it's easier.

163
00:12:20,070 --> 00:12:25,110
It will now take this string, which is publish it and we'll make a data out of it.

164
00:12:26,010 --> 00:12:33,570
And then on that, we're going to use to get time to go method, which will then make it to date.

165
00:12:33,780 --> 00:12:35,490
And this will return a string.

166
00:12:36,240 --> 00:12:37,920
So info needed the string.

167
00:12:38,190 --> 00:12:43,350
So now it's just going to calculate how many days ago or months ago or whatever the article has been

168
00:12:43,350 --> 00:12:43,830
released.

169
00:12:45,760 --> 00:12:51,280
And now on the level of the time news or on the main screen, you can also see the top, it says days

170
00:12:51,280 --> 00:12:51,640
ago.

171
00:12:52,030 --> 00:12:55,720
So we also need to go to the top news and apply the same principle.

172
00:12:56,710 --> 00:13:01,570
So here inside of our column, where we have this text, where it says published that we need to do

173
00:13:01,570 --> 00:13:04,720
the same little trick where we use our mock data.

174
00:13:05,840 --> 00:13:06,230
Thought.

175
00:13:07,990 --> 00:13:19,510
String to date with our new data published it, and then we convert that into a good two time ago string,

176
00:13:19,660 --> 00:13:22,510
so it just tells us how much time has passed.

177
00:13:22,630 --> 00:13:30,040
Ever since the article has been released and this should concluded OK, so this was just a little additional

178
00:13:30,250 --> 00:13:33,370
information for you to just make this a little nicer.

179
00:13:33,380 --> 00:13:39,220
So in case you ever wondered about how you could make your application, not display the actual date,

180
00:13:39,220 --> 00:13:42,080
but actually how many well, periods?

181
00:13:42,280 --> 00:13:43,270
Something is a goal.

182
00:13:43,300 --> 00:13:48,070
You can use our methods that we just introduced in this video.

183
00:13:48,160 --> 00:13:51,490
Now you can just go ahead here and you can see it's a six days ago.

184
00:13:52,330 --> 00:13:55,090
And in my case, all of them are six days ago.

185
00:13:55,420 --> 00:13:59,330
So let's change that for our first little piece of data.

186
00:13:59,350 --> 00:14:05,260
Therefore, I'm going to go to my mock data, going to change that to the 16th.

187
00:14:07,290 --> 00:14:08,120
Or 15th?

188
00:14:08,220 --> 00:14:09,240
Let's do it like this.

189
00:14:09,480 --> 00:14:10,440
Let's run it again.

190
00:14:13,350 --> 00:14:20,610
And you see, it's a moment ago, because now the data is super close to Eggo, and obviously we also

191
00:14:20,610 --> 00:14:21,870
have the top up bar here.

192
00:14:22,410 --> 00:14:26,040
I didn't even cover it, but yes, that's what we have here at the top as well.