1
00:00:00,870 --> 00:00:06,000
Welcome back in this video, we're going to take care of the business tab.

2
00:00:06,060 --> 00:00:08,680
Well, we're going to take care of the entertainment tap as well.

3
00:00:08,700 --> 00:00:11,610
And you can see the General tab works flawlessly as well.

4
00:00:11,880 --> 00:00:20,160
So basically, we're going to now be able to see the news and you can see that it just it just works,

5
00:00:20,160 --> 00:00:20,390
right?

6
00:00:20,400 --> 00:00:21,990
It's just beautiful how it works.

7
00:00:22,290 --> 00:00:27,090
And yeah, basically whenever we don't have an image, we just use the default one.

8
00:00:27,420 --> 00:00:30,510
When we do have an image, we're used to proper detailed one.

9
00:00:30,990 --> 00:00:33,660
You can see there are news, all kinds of languages here.

10
00:00:33,660 --> 00:00:39,480
We have some Japanese and then we have I don't know what is probably like.

11
00:00:41,350 --> 00:00:45,850
Creation or so we cannot click into it yet, but we are displaying the news here.

12
00:00:45,880 --> 00:00:46,630
And that's pretty cool.

13
00:00:47,020 --> 00:00:53,080
So we're going to set that up and this video and you see, now it has been worth to go through the struggles

14
00:00:53,080 --> 00:00:55,450
of the last video of setting up the tabs up there.

15
00:00:55,960 --> 00:01:00,090
And yeah, basically it will be pretty complete already at this point.

16
00:01:00,100 --> 00:01:03,750
Obviously, we need to get to the navigation part of things still.

17
00:01:03,760 --> 00:01:05,770
But yeah, let's just get started building that.

18
00:01:06,930 --> 00:01:08,310
And displayed the news.

19
00:01:10,540 --> 00:01:16,780
OK, so the first thing that we're going to need is going to be the article content, and this will

20
00:01:16,780 --> 00:01:21,160
just be another composable inside of the categories composable.

21
00:01:21,370 --> 00:01:23,810
So let's go ahead and use the composable keyword.

22
00:01:23,830 --> 00:01:29,830
I'm going to call this one article content, and we need to know the articles that we want to display.

23
00:01:29,830 --> 00:01:34,570
So articles, which will be a list of top news articles.

24
00:01:35,830 --> 00:01:42,760
Our top news article to be precise, and I want to want to have the modifier being passed so that I

25
00:01:42,760 --> 00:01:45,430
can modify the content accordingly.

26
00:01:46,030 --> 00:01:48,280
So as you saw, we could scroll right?

27
00:01:48,290 --> 00:01:53,830
So when we can scroll into something or in something, we are going to use a lazy column for that.

28
00:01:54,430 --> 00:02:01,540
OK, so here we need to now define the content, and we're going to do that with curly brackets instead

29
00:02:01,540 --> 00:02:03,880
of passing the content directly to the lazy column.

30
00:02:04,270 --> 00:02:06,430
So we're going to write it inside of it, so to speak.

31
00:02:06,880 --> 00:02:09,600
So what I'm going to say is I want to have art.

32
00:02:09,729 --> 00:02:14,740
I want the items, which will be the articles that I get came.

33
00:02:15,250 --> 00:02:22,000
And those articles are a list of multiple individual article items.

34
00:02:22,210 --> 00:02:28,150
And I can go ahead and use those one by one so I can say articles.

35
00:02:29,490 --> 00:02:35,640
Will be the lazy item scopes of the individual item, and by the way, it seems like articles seem to

36
00:02:35,670 --> 00:02:37,020
create a problem here.

37
00:02:38,680 --> 00:02:39,490
Now, let's see.

38
00:02:39,590 --> 00:02:40,870
Okay, that should be fine.

39
00:02:41,290 --> 00:02:48,220
Now we are using the article and the article is an individual card, so if you look at it, this is

40
00:02:48,580 --> 00:02:56,530
while each of those is a card and I'm going to design it as a card with a modifier of a little bit of

41
00:02:56,530 --> 00:02:57,070
padding.

42
00:02:57,700 --> 00:03:04,150
Let's say eight density pixels towards all directions, and let's import cart so that this error disappears.

43
00:03:04,780 --> 00:03:05,170
All right.

44
00:03:06,040 --> 00:03:10,510
So now this card also needs some more parameters we need to define.

45
00:03:10,510 --> 00:03:16,780
For example, we're going to define the border, so I'm going to have a border stroke of two density

46
00:03:16,780 --> 00:03:19,360
pixels that is going to be purple.

47
00:03:19,660 --> 00:03:32,050
So color will be the color source or resource inside of idea of art, a colored dot purple 500 this

48
00:03:32,050 --> 00:03:32,320
time.

49
00:03:33,330 --> 00:03:39,180
OK, so let me put that into a separate line so that we can read it a little better, I think this will

50
00:03:39,180 --> 00:03:40,650
do well.

51
00:03:40,740 --> 00:03:41,520
This will be better.

52
00:03:42,090 --> 00:03:45,750
And then the cart needs the content you see, then the error disappears.

53
00:03:46,170 --> 00:03:49,650
So now we can add the content to the cart and it will be.

54
00:03:51,040 --> 00:03:51,880
Let's look at it.

55
00:03:52,480 --> 00:03:58,560
Basically, you could say it's a roll of content where we have the image, then we have another column

56
00:03:58,900 --> 00:04:00,430
and this is another role.

57
00:04:00,850 --> 00:04:01,990
You could do it like that.

58
00:04:02,620 --> 00:04:03,070
So.

59
00:04:04,340 --> 00:04:07,760
A column with one text and then the roll inside of it.

60
00:04:07,910 --> 00:04:09,380
So let's just go ahead and build that.

61
00:04:09,800 --> 00:04:12,650
So first we start off with the roll where?

62
00:04:12,770 --> 00:04:17,120
Well, let me import role directing import to compose your version.

63
00:04:17,630 --> 00:04:26,330
Then we're going to use the modifier to fill the maximum with, as well as set the padding to, let's

64
00:04:26,330 --> 00:04:30,650
say, eight density pixels and then the roll.

65
00:04:31,850 --> 00:04:36,680
Well, first half this image, right, and the image, as we've seen before, is not just going to be

66
00:04:36,680 --> 00:04:39,110
an image, but it's going to be a coil image.

67
00:04:39,740 --> 00:04:48,140
So the cool idea or cool point about coil images is that they really help us out with all of this.

68
00:04:48,620 --> 00:04:52,730
Setting the placeholder, setting the arrow holder and so forth.

69
00:04:53,480 --> 00:05:02,240
So the coil image needs to have the image model, which will be gotten from the article you're able

70
00:05:02,240 --> 00:05:02,780
to image.

71
00:05:04,010 --> 00:05:06,920
Then we need to pass the modifier that we want to use.

72
00:05:07,130 --> 00:05:12,050
So I'm going to set the modifier with a little low cap.

73
00:05:12,860 --> 00:05:16,970
So here modifier is going to be modified Dot's size.

74
00:05:17,330 --> 00:05:23,150
So we're just going to set the size to, let's say, 100 density pixels and then we can set the placeholder.

75
00:05:23,450 --> 00:05:30,410
So I'm going to use a paint, a resource here with the idea of art or trouble dart and was breaking

76
00:05:30,410 --> 00:05:30,800
news.

77
00:05:31,010 --> 00:05:37,130
OK, so I'm going to use that same placeholder or that same image for the arrows as well.

78
00:05:37,520 --> 00:05:42,980
And therefore, I need to add a comma here so that it's really separating it.

79
00:05:42,980 --> 00:05:43,730
The holy smokes.

80
00:05:43,730 --> 00:05:44,210
What's that?

81
00:05:45,080 --> 00:05:47,300
And then we need to import sites as well.

82
00:05:48,260 --> 00:05:51,530
So let's import size and then the image will be good.

83
00:05:51,800 --> 00:05:53,870
So this would be this image here.

84
00:05:54,080 --> 00:05:57,230
OK, what this image or any of the images inside of our card?

85
00:05:57,770 --> 00:06:00,040
So we're saying it has a size of 100.

86
00:06:00,050 --> 00:06:04,730
We will have a padding of eight density pixels, which creates this distance.

87
00:06:04,730 --> 00:06:06,050
Here is eight pixels.

88
00:06:06,770 --> 00:06:07,910
And it is.

89
00:06:09,490 --> 00:06:17,620
Purple with a two density pixels or a stroke, so that's the two BP and the purple color.

90
00:06:18,670 --> 00:06:25,120
OK, so now that we have the coil image, let's take care of the column that will display the other

91
00:06:25,120 --> 00:06:25,540
content.

92
00:06:25,540 --> 00:06:28,640
So I'm going to pass the modifier with a little bit of padding.

93
00:06:28,660 --> 00:06:34,180
So here ATP and modifier and not modifier.

94
00:06:34,840 --> 00:06:39,670
And this column will have a text at the top which will just display the article title.

95
00:06:40,150 --> 00:06:43,060
So this will be article the title.

96
00:06:44,090 --> 00:06:48,290
Which if it's not available, I'm just going to say not available.

97
00:06:49,100 --> 00:06:53,030
So here I I'm just using a an inline if statement, so to speak.

98
00:06:54,620 --> 00:06:58,400
And let's define the font weight as well to be font weight bolt.

99
00:06:59,830 --> 00:07:02,950
So let's just make it big or thick.

100
00:07:03,160 --> 00:07:07,000
This text, so that's going to be this text here, right?

101
00:07:07,000 --> 00:07:12,580
This that says up Apple seller on this was proyectos must whatever.

102
00:07:13,120 --> 00:07:13,540
So.

103
00:07:14,970 --> 00:07:16,950
Apple is taking care of some of their projects.

104
00:07:17,490 --> 00:07:17,940
So then.

105
00:07:19,770 --> 00:07:26,400
Actually, let me add some more parameters here, because if we just do it like that could have a many

106
00:07:26,400 --> 00:07:31,290
lines, and I'm just going to say I don't want to have more than three lines and I'm going to set the

107
00:07:31,290 --> 00:07:34,170
overflow to use text overflow.

108
00:07:35,610 --> 00:07:36,190
Hmm.

109
00:07:36,600 --> 00:07:38,670
Well, we could clip it.

110
00:07:39,300 --> 00:07:40,560
I'm just going to use ellipses.

111
00:07:40,920 --> 00:07:47,900
So Ellipsis uses an ellipses to indicate that the text has overflowed, which means that here you see

112
00:07:47,910 --> 00:07:48,930
it, says Dot Dot Dot.

113
00:07:48,930 --> 00:07:53,040
So it just shows you that the text is going to be longer than what we have here.

114
00:07:53,430 --> 00:07:59,610
If you would clip it, then it would just delete whatever or not display whatever rest of text there

115
00:07:59,610 --> 00:07:59,910
is.

116
00:08:00,480 --> 00:08:03,310
But the ellipsis is a good approach because it just shows you OK.

117
00:08:03,330 --> 00:08:04,850
There is more to the title.

118
00:08:04,870 --> 00:08:08,760
This title is not complete yet, and I think that's why it's good to use text overflow.

119
00:08:08,760 --> 00:08:09,240
Ellipsis?

120
00:08:09,510 --> 00:08:13,140
So we're saying we don't want to have more than three lines and whenever it's overflowing, used to

121
00:08:13,140 --> 00:08:13,770
dot dot dot.

122
00:08:14,670 --> 00:08:16,290
OK, so that's going to be the text.

123
00:08:16,290 --> 00:08:22,800
But then we need another role, as I said, because if we look at this, we have this anonymous and

124
00:08:22,800 --> 00:08:25,350
then we have when it was released, so.

125
00:08:26,670 --> 00:08:27,720
Yeah, that's pretty much it.

126
00:08:28,380 --> 00:08:37,049
So now this role needs to have a modifier with Phil mixed with, I'm going to say, take as much space

127
00:08:37,049 --> 00:08:44,640
as you can and arrange to content where there is space in between the items.

128
00:08:45,090 --> 00:08:50,460
OK, so that's going to be our role definition.

129
00:08:51,060 --> 00:08:53,700
And now what is the role content that I want to use?

130
00:08:54,030 --> 00:09:00,540
Well, I'm just going to use a piece of text where the text content will be article that author and

131
00:09:00,540 --> 00:09:04,110
if it doesn't exist and say not available.

132
00:09:06,740 --> 00:09:09,680
So and then we have another text in there.

133
00:09:11,330 --> 00:09:15,080
Which will take our mock data method.

134
00:09:15,230 --> 00:09:23,420
So we had this mock data that string to date method, and we needed to now pass the article published

135
00:09:23,420 --> 00:09:23,840
at.

136
00:09:25,070 --> 00:09:29,120
And if there is no article date, I'm just going to use a default one.

137
00:09:29,120 --> 00:09:31,640
So let me just put that in here.

138
00:09:33,150 --> 00:09:33,840
So I'm going to say.

139
00:09:35,640 --> 00:09:38,370
If it doesn't exist or if it's empty, just use this.

140
00:09:38,940 --> 00:09:40,410
And now this needs to.

141
00:09:42,010 --> 00:09:48,280
Be converted into a string by using to get time ago, so we get a date, but then we're converting it

142
00:09:48,280 --> 00:09:48,970
into a string.

143
00:09:49,510 --> 00:09:52,570
So that's what we did in this mock data, if you recall.

144
00:09:54,350 --> 00:09:59,270
OK, we created this big method to did that, and then we had this other method.

145
00:09:59,570 --> 00:10:01,310
Yes, and now we're using those too.

146
00:10:02,210 --> 00:10:02,730
All right.

147
00:10:02,750 --> 00:10:04,340
So now let's go back.

148
00:10:04,580 --> 00:10:07,460
And that was in the categories, yes.

149
00:10:08,030 --> 00:10:12,530
So now that should be how our article content is going to look like.

150
00:10:15,380 --> 00:10:23,870
And now let's set up a preview as well, I think we don't have a preview yet for our categories, so

151
00:10:23,870 --> 00:10:26,690
we can create a quick preview if you wanted to.

152
00:10:26,720 --> 00:10:38,120
So here at Preview at composable and fun article content preview.

153
00:10:39,730 --> 00:10:41,620
OK, so what do we do with it?

154
00:10:42,100 --> 00:10:45,730
Well, I'm going to create a piece of article content.

155
00:10:45,850 --> 00:10:51,010
I am going to create a list of articles that I'm going to pass to it.

156
00:10:51,460 --> 00:10:54,070
So it's just going to be one article for now.

157
00:10:55,140 --> 00:10:57,150
Which just contains one piece of content.

158
00:10:57,660 --> 00:11:05,400
So this will be my article content, let me see if I have enough closing brackets like Seoul should

159
00:11:05,400 --> 00:11:05,820
be fine.

160
00:11:06,600 --> 00:11:08,430
OK, so this will be the preview.

161
00:11:08,580 --> 00:11:10,470
And currently, there's nothing to show.

162
00:11:10,480 --> 00:11:18,810
So let's run this to then see the preview of such an article piece because I think the video would be

163
00:11:19,100 --> 00:11:20,760
what is long enough without an image.

164
00:11:20,760 --> 00:11:22,530
So you see here, we don't have an image.

165
00:11:22,530 --> 00:11:25,500
But says Smith news life kidnap suspect.

166
00:11:25,740 --> 00:11:28,920
Well, all of the good news now, Twitter saying I was the author.

167
00:11:28,920 --> 00:11:30,120
It was 15 days ago.

168
00:11:30,930 --> 00:11:32,070
OK, so that's what's.

169
00:11:33,230 --> 00:11:35,550
We're going to get has the UI.

170
00:11:35,570 --> 00:11:37,400
So here's the image placeholder.

171
00:11:37,430 --> 00:11:41,240
It's empty, but we're going to add an image obviously later on.

172
00:11:41,690 --> 00:11:47,150
OK, so that's it for this video and the next one, we're going to then set it up so that it will display

173
00:11:47,150 --> 00:11:52,130
the data in our application once we have selected any of the given items.

174
00:11:52,460 --> 00:11:53,300
So see you there.