1
00:00:00,720 --> 00:00:01,530
Welcome back.

2
00:00:01,710 --> 00:00:06,600
And this year, we're going to take care of the details screen, so you can see here we have some details

3
00:00:06,600 --> 00:00:12,390
here with the image, then the author, as well as the time when the title was written.

4
00:00:12,390 --> 00:00:14,160
Description and some details.

5
00:00:14,790 --> 00:00:15,210
All right.

6
00:00:15,330 --> 00:00:20,340
So that's basically what we want to build going back than you are on the main screen.

7
00:00:20,340 --> 00:00:24,600
Then you go to the next news and that's what we want to build in this video.

8
00:00:24,780 --> 00:00:25,890
So let's get started.

9
00:00:27,990 --> 00:00:31,710
Therefore, conveniently, we are on the digital screen already, or at least I am.

10
00:00:31,950 --> 00:00:37,080
And I'm going to get rid of this button because what this button doesn't do anything instead of the

11
00:00:37,080 --> 00:00:39,450
button, I will have an image.

12
00:00:39,630 --> 00:00:44,490
So looking at it, when we're here, you see we have still this text detailed screen, then we have

13
00:00:44,490 --> 00:00:47,430
the image, then we have the author and time.

14
00:00:47,460 --> 00:00:48,390
So let's start with that.

15
00:00:48,690 --> 00:00:54,030
First of all, the image where I need what I need to first set to painter resource.

16
00:00:54,390 --> 00:00:59,950
And to me, import image, therefore, which will be my news.

17
00:00:59,970 --> 00:01:01,410
A data that image.

18
00:01:02,640 --> 00:01:05,750
OK, and let's import image correctly here.

19
00:01:05,790 --> 00:01:07,290
It's going to be this one here.

20
00:01:08,640 --> 00:01:15,510
And other than that, let's actually do it otherwise like this painter will paint a resource like so

21
00:01:15,510 --> 00:01:17,910
then the content description.

22
00:01:19,770 --> 00:01:25,530
We'll just be an empty string, or you could go as far as read something into the image, like the title

23
00:01:25,530 --> 00:01:27,080
of the new status.

24
00:01:28,170 --> 00:01:28,520
All right.

25
00:01:28,530 --> 00:01:33,300
And then after the image, you see, we have a rule, so we have this item, then we have that item.

26
00:01:33,300 --> 00:01:37,200
So it's just too informal with icons that we have there.

27
00:01:37,680 --> 00:01:42,300
So let's go ahead and create a rope where I will need to import Rome.

28
00:01:42,930 --> 00:01:45,300
So it will be the UI compose one.

29
00:01:45,780 --> 00:01:53,190
Then I can set the modifier to be modified that Phil mix with because I want to take the entire available

30
00:01:53,190 --> 00:01:58,280
with with just a bit of padding towards all directions of eight density pixels.

31
00:01:58,290 --> 00:02:08,520
So we need to import DPI here for this to work and a horizontal arrangement of arrangement space between.

32
00:02:09,449 --> 00:02:09,870
OK.

33
00:02:09,960 --> 00:02:14,460
So this will be our role, and now we need to define what should be inside of the role.

34
00:02:14,850 --> 00:02:23,160
And I'm just going to display an icon with some info and therefore let's go ahead and create a separate

35
00:02:24,150 --> 00:02:25,020
composable.

36
00:02:25,620 --> 00:02:29,820
So I'm going to use the composable annotation here again.

37
00:02:29,820 --> 00:02:33,900
Fun AI in full with I can.

38
00:02:33,900 --> 00:02:38,700
You could also called I can with info, but then we need to define the icon, which will be an image

39
00:02:38,710 --> 00:02:41,850
vector and the in4, which will be a string.

40
00:02:42,420 --> 00:02:49,890
So we just create this composable that we can then use in here for our role, where we pass in the icon

41
00:02:49,890 --> 00:02:53,940
as well as the title or the text that we want to display.

42
00:02:54,450 --> 00:03:04,290
So I'm just going to use icons, thought defaults, dot edit here and in form will be new state art

43
00:03:04,290 --> 00:03:07,140
dot author for this one.

44
00:03:07,170 --> 00:03:09,540
So we need to import icons for this to work.

45
00:03:10,580 --> 00:03:16,710
Therefore, hover over icons of enter and add it should be imported as well with all the internet.

46
00:03:17,340 --> 00:03:26,760
So this will be number one and four with icon and the other one will be the data range or date range.

47
00:03:26,760 --> 00:03:28,620
I think it was not that date range.

48
00:03:29,130 --> 00:03:37,890
So this little icon that exists, which is going to be this date here and the data that we want to display

49
00:03:37,890 --> 00:03:39,930
here are the info will be published at.

50
00:03:40,710 --> 00:03:46,380
OK, so now we have the data for our info with Icon, but we don't even know how to design it.

51
00:03:46,740 --> 00:03:48,900
Well, designing it will be quite easy to see.

52
00:03:49,080 --> 00:03:52,500
We just have an icon and then we have a text next to it.

53
00:03:52,770 --> 00:03:53,700
So that's pretty much it.

54
00:03:54,270 --> 00:03:57,600
So let's go ahead and create this role that will have all of that stuff.

55
00:03:58,110 --> 00:04:00,120
So an icon with.

56
00:04:01,080 --> 00:04:07,350
Well, let's import icon here, and then it will take the icon as the image.

57
00:04:07,740 --> 00:04:10,440
Then the content description will just be the author.

58
00:04:12,240 --> 00:04:20,910
The modifier will be a little bit of padding towards the right hand side of, let's say, eight density

59
00:04:20,910 --> 00:04:21,450
pixels.

60
00:04:22,620 --> 00:04:23,070
All right.

61
00:04:24,360 --> 00:04:28,590
And then we need to have a color for it as well.

62
00:04:31,580 --> 00:04:36,810
So I'm going to use purple here, and I'm going to get the purple from our resources.

63
00:04:36,860 --> 00:04:46,880
So there's this color resource resource like this where the ID will be are not color but purple.

64
00:04:46,910 --> 00:04:47,570
Let me see.

65
00:04:48,110 --> 00:04:53,810
Oh yeah, for me to be able to use our, I need to import my package.

66
00:04:53,930 --> 00:04:57,830
So let me import this news app.

67
00:04:59,250 --> 00:05:05,550
Thought are like this and now I can work with, ah, with my resources.

68
00:05:05,910 --> 00:05:09,270
And this will be the purple, let's say, 500.

69
00:05:09,570 --> 00:05:13,680
So I want to use this purple right here for the icons color.

70
00:05:14,370 --> 00:05:19,920
And then after the icon, I want me to set the text that I want to display as well, which will just

71
00:05:19,920 --> 00:05:27,960
be my info that I get from here to string, which would be the new state author, for example, or the

72
00:05:27,960 --> 00:05:30,810
published at, depending on which item we're looking at.

73
00:05:31,710 --> 00:05:32,130
OK.

74
00:05:33,180 --> 00:05:36,480
So that should be my detail screen.

75
00:05:38,000 --> 00:05:43,280
All the way until this point, so let's just see how this is going to pan out.

76
00:05:44,860 --> 00:05:47,140
So let's go over to a detailed screen.

77
00:05:47,290 --> 00:05:52,270
We see the image, then we see Namita Singh wrote this, or she was the editor or the author.

78
00:05:52,450 --> 00:05:55,060
You could, of course, use a different icon here if you wanted to.

79
00:05:55,360 --> 00:05:58,720
And then this was written on the 4th of November.

80
00:05:59,380 --> 00:05:59,810
All right.

81
00:05:59,830 --> 00:06:03,280
And then we have a little bit of text underneath.

82
00:06:03,280 --> 00:06:06,220
At least that's what I want to have if we look at it.

83
00:06:06,580 --> 00:06:07,240
So.

84
00:06:08,580 --> 00:06:10,680
It doesn't seem like the application is still open.

85
00:06:10,920 --> 00:06:13,530
But I want to just have, on one hand, the title.

86
00:06:14,910 --> 00:06:19,230
Of the article saw text news data title.

87
00:06:20,480 --> 00:06:22,550
And the font weight will be bold.

88
00:06:23,720 --> 00:06:24,740
So font weight.

89
00:06:24,890 --> 00:06:25,400
Bold.

90
00:06:27,740 --> 00:06:34,550
And then the other tax object that I'm going to have is going to be the new state to description.

91
00:06:34,760 --> 00:06:38,420
So the detail of the article?

92
00:06:38,780 --> 00:06:39,170
All right.

93
00:06:39,380 --> 00:06:44,510
So here I'm going to have a little bit of padding towards the top, otherwise it's just going to look

94
00:06:44,510 --> 00:06:44,870
weird.

95
00:06:45,200 --> 00:06:50,690
So here top is going to be 16 Typekit now we have modified up modifier.

96
00:06:50,690 --> 00:06:54,380
We can get rid of that and set the equal sign that the error should disappear.

97
00:06:55,010 --> 00:06:55,520
All right.

98
00:06:55,850 --> 00:06:57,950
So now let's check it out once again.

99
00:06:58,280 --> 00:07:02,360
Let's see if it's going to look any better and have some more details.

100
00:07:02,870 --> 00:07:07,730
So let's click in here and we see with Cleo Smith live kidnap suspect.

101
00:07:08,000 --> 00:07:13,920
And now imagine we had more details in here, so more data that we need to display.

102
00:07:14,420 --> 00:07:17,780
Well, then we need to make sure that we can scroll through this detail screen.

103
00:07:18,290 --> 00:07:24,650
And if you want to scroll through the details screen you might recall, then you need to make sure that

104
00:07:24,650 --> 00:07:26,450
you have a scroll state.

105
00:07:27,050 --> 00:07:27,490
All right.

106
00:07:27,500 --> 00:07:33,260
So you see, we don't used a knife controller anymore as it is grid out and we will need it because

107
00:07:33,260 --> 00:07:35,870
if somebody wants to go back to just have to press the back button.

108
00:07:36,200 --> 00:07:42,560
But what we will need is going to be a scroll state because as I said, I want to make sure that this

109
00:07:43,310 --> 00:07:45,440
detailed screen is going to be scrollable.

110
00:07:48,100 --> 00:07:54,670
Whenever you add a scroll state or any state, your preview will be unhappy because we need to make

111
00:07:54,670 --> 00:08:01,090
sure that we are passing a scroll state here as well, we don't need to remember NAV Controller any

112
00:08:01,090 --> 00:08:04,990
more, but we will need to remember scroll state now.

113
00:08:05,230 --> 00:08:09,010
So remember scroll state for the preview.

114
00:08:09,610 --> 00:08:14,650
It's really, as I said, this is just a states states don't remember in the preview because we just

115
00:08:14,650 --> 00:08:15,670
display the UI.

116
00:08:16,450 --> 00:08:22,540
All right now, at this point, we need to create a scroll state because if we look at our application,

117
00:08:22,540 --> 00:08:28,540
we should get some arrows somewhere in our application and misses that in the news app.

118
00:08:29,080 --> 00:08:31,720
Yes, that's where we are using the details screen.

119
00:08:32,230 --> 00:08:38,110
So now we get this error because we are setting the news for the nav controller, but we're never actually

120
00:08:38,110 --> 00:08:43,570
setting the scroll controller or the scroll state button said.

121
00:08:43,840 --> 00:08:45,430
So here we set up the nav controller.

122
00:08:45,490 --> 00:08:52,600
Let's go ahead and create the scroll state as well, which will just be a remember scroll state.

123
00:08:52,690 --> 00:08:55,590
So remember, remember the 6th of November?

124
00:08:55,600 --> 00:08:56,260
What was it?

125
00:08:56,260 --> 00:08:56,740
The 5th?

126
00:08:57,580 --> 00:09:00,220
Remember scroll state.

127
00:09:00,370 --> 00:09:01,330
Something like this.

128
00:09:01,660 --> 00:09:05,050
And now we can pass this scroll state to our details screen.

129
00:09:06,010 --> 00:09:10,630
OK, so now the details screen should be happy because it gets the nav controller or the scroll state

130
00:09:10,630 --> 00:09:11,650
better said that it needs.

131
00:09:13,890 --> 00:09:17,820
But now this by itself, you can see that this crucial state is never used.

132
00:09:18,030 --> 00:09:22,560
So it is great out and that has to do with us, not ever using it.

133
00:09:22,890 --> 00:09:25,740
So that's something we want to assign to our column.

134
00:09:26,040 --> 00:09:34,020
So the column has a modifier with Phil Max with and here we can just add the vertical.

135
00:09:34,020 --> 00:09:37,200
Scroll to it and I want to add the school.

136
00:09:37,200 --> 00:09:41,580
We have to add the scroll state here, but there is something else that I'm not very happy with.

137
00:09:41,600 --> 00:09:47,160
You see here that there is no padding on the side and it just looks so weird if the text starts all

138
00:09:47,160 --> 00:09:48,510
the way at the edge.

139
00:09:48,870 --> 00:09:52,290
So that's something that we can very easily fix as well.

140
00:09:52,530 --> 00:09:54,600
But just adding a little bit of padding here.

141
00:09:54,610 --> 00:10:01,830
So here I'm going to add padding towards all directions of 16 dpi to our columns modifier.

142
00:10:02,430 --> 00:10:07,400
Now, at this point, we should be able to scroll and we should be able to run this.

143
00:10:07,410 --> 00:10:07,770
So.

144
00:10:07,950 --> 00:10:12,120
Yeah, well, there's nothing to scroll here because the text isn't big enough, and I'm not sure whether

145
00:10:12,420 --> 00:10:15,250
and any of our examples to text is long enough.

146
00:10:15,720 --> 00:10:21,030
So what we could do is we could just fake it because we're faking the data anyways, right?

147
00:10:21,330 --> 00:10:24,030
So let's go over to our little girl.

148
00:10:24,750 --> 00:10:27,330
Uh, with Delia Smith news descriptions.

149
00:10:27,870 --> 00:10:33,510
So this kidnaper stuff, let's just copy and paste it so we will have to text twice, even though this

150
00:10:33,510 --> 00:10:38,730
is a very lazy solution, but it's going to work for this particular case.

151
00:10:39,570 --> 00:10:42,450
So as we run it and just test how it's gonna look like.

152
00:10:43,110 --> 00:10:45,750
So let's click in here and we see now we can scroll.

153
00:10:46,440 --> 00:10:50,910
So if there is enough text that we need to display, then we will be able to scroll.

154
00:10:51,240 --> 00:10:57,930
And then also, you see, we have the padding towards all sides of 16 so that we can properly display

155
00:10:57,930 --> 00:11:00,810
stuff and it looks a lot better.

156
00:11:01,410 --> 00:11:06,510
OK, so that's it for this video in the next one, we're going to add the app bar and format date in

157
00:11:06,840 --> 00:11:10,200
time ago instead of displaying the time like this.