1
00:00:00,150 --> 00:00:04,740
And this video, I would like to show you how to create a recycler of you and a recycled view is like

2
00:00:04,740 --> 00:00:10,020
a list view only that it's also a grid view and it's none of the two as well.

3
00:00:10,050 --> 00:00:11,880
So that's a little confusing.

4
00:00:11,880 --> 00:00:18,870
But in the end, what it really does is it allows us to create lists in different shapes and forms.

5
00:00:18,870 --> 00:00:21,800
And that is something that list viewed wasn't able to do.

6
00:00:21,810 --> 00:00:27,810
So a list view, which was the class that's now is deprecated, which allows you to create lists like

7
00:00:27,810 --> 00:00:32,759
you can see here, which are scrollable, and this is not available anymore.

8
00:00:32,850 --> 00:00:38,160
So it's deprecated, but the recycled if you replaced it because it has a lot more functionality and

9
00:00:38,160 --> 00:00:45,260
is a lot more flexible, because if you look at it, we can make this same list here to also be a grid.

10
00:00:45,450 --> 00:00:49,180
So we have this recycled view which allows us both options here.

11
00:00:50,100 --> 00:00:50,630
All right.

12
00:00:50,640 --> 00:00:53,030
So this one is also still scrollable here.

13
00:00:53,040 --> 00:00:59,910
So that's very useful if you have an application which needs to put stuff next to each other and still

14
00:00:59,910 --> 00:01:00,920
inside of a list.

15
00:01:01,410 --> 00:01:03,300
So let's have a look at how we can build that.

16
00:01:03,480 --> 00:01:08,940
And in this case, we are not going to code anything, but we're just looking at the code that I've

17
00:01:08,940 --> 00:01:09,630
prepared here.

18
00:01:10,020 --> 00:01:16,290
And therefore, we're going to start with a class that you will need to create when working with recyclable

19
00:01:16,300 --> 00:01:16,590
use.

20
00:01:16,770 --> 00:01:18,810
And that is your own adapter.

21
00:01:19,350 --> 00:01:25,380
OK, so I'm in this class here, which I called Eitam adapter, and it's going to be the adapter for

22
00:01:25,380 --> 00:01:30,690
items pretty much, because when you want to work with the recycler, you you need to have an adapter.

23
00:01:31,440 --> 00:01:33,450
The structure that you need is always the same.

24
00:01:33,780 --> 00:01:37,650
You have your own adapter class name and I just called it Eitam doctor.

25
00:01:38,250 --> 00:01:47,130
Then you inherit from a class called recycling, you dot adapter and then in the brackets here you add

26
00:01:47,490 --> 00:01:54,510
the name of your class dot view holder and then in the brackets of your item adapter.

27
00:01:54,870 --> 00:01:58,010
That's where you can put the different information in.

28
00:01:58,230 --> 00:02:03,540
And in this case, the data set has to be passed and it can be of a different type.

29
00:02:03,810 --> 00:02:07,530
It can be of a type array, but it can also be of type array list.

30
00:02:07,530 --> 00:02:11,360
And I'm using array list here for the items that I want to display.

31
00:02:11,640 --> 00:02:16,230
And then you need to pass in the context in which you want to display the list.

32
00:02:17,250 --> 00:02:23,760
So there are multiple functions that you will need to override when using the recycled viewport adapter

33
00:02:24,030 --> 00:02:27,330
because it just needs to have them, otherwise it will not work.

34
00:02:27,360 --> 00:02:34,260
So the ones that you will need is the on create view holder, the unbind view holder and the get item

35
00:02:34,260 --> 00:02:34,620
count.

36
00:02:35,970 --> 00:02:42,360
And then you can also use an additional class in here, which is an asset class in our case, which

37
00:02:42,360 --> 00:02:48,120
is a view Holder or I call that view Holder, and it requires a view when it's created.

38
00:02:48,360 --> 00:02:53,140
And you can see it's inheriting from the view holder class, from a recycler view.

39
00:02:53,490 --> 00:03:00,660
So what we just do here is I just say that I want to have a value which is TV item standing for TextView

40
00:03:00,660 --> 00:03:03,970
item, which is my view dot TV item.

41
00:03:04,170 --> 00:03:12,390
So if we look at our example here, again, each of those entries is one of those TV items so tight

42
00:03:12,390 --> 00:03:17,280
and one is kind of type TV item and so forth.

43
00:03:18,540 --> 00:03:18,870
All right.

44
00:03:18,870 --> 00:03:21,150
But now let's look at those different methods.

45
00:03:21,180 --> 00:03:22,590
Let's start with the easiest ones.

46
00:03:22,890 --> 00:03:25,110
So this one here is getta item count.

47
00:03:25,470 --> 00:03:29,320
What it does is it gets to item number of items in the list.

48
00:03:29,550 --> 00:03:32,990
So in our case here, we have 12 items.

49
00:03:33,000 --> 00:03:39,000
So it will return 12 as the amount of items sold item count will be 12.

50
00:03:39,630 --> 00:03:44,400
So items that size, it's just the amount of items that we have in our list.

51
00:03:45,830 --> 00:03:54,740
Then the next one is on Create View Holder, what it does is it inflates the item use, which is designed

52
00:03:54,740 --> 00:03:57,070
in the XML layout file.

53
00:03:57,290 --> 00:04:04,310
So uncreate view, Holder will return a view holder and view Holder is the class that we created ourselves.

54
00:04:04,370 --> 00:04:08,330
So that's the one at the bottom that we just created.

55
00:04:08,600 --> 00:04:12,050
And what it will do is it will create such a TV item.

56
00:04:12,050 --> 00:04:12,380
Right.

57
00:04:12,890 --> 00:04:15,780
And he will just say how such an item should look like.

58
00:04:15,830 --> 00:04:22,980
So we use layout inflator from context and then we inflate our art or layout that items role.

59
00:04:23,420 --> 00:04:24,680
So what is this item?

60
00:04:25,760 --> 00:04:31,850
Well, it's just this XML file that I created, which is just containing this text you.

61
00:04:32,060 --> 00:04:32,530
That's it.

62
00:04:32,840 --> 00:04:34,270
So that's everything it does.

63
00:04:34,280 --> 00:04:40,010
It just says, OK, take the height that you need, but take the width that is available to you.

64
00:04:42,990 --> 00:04:49,550
All right, coming back to the item adapter here, you also have to pass in the parent and the attached

65
00:04:49,560 --> 00:04:51,030
route, you can set that to false.

66
00:04:52,800 --> 00:04:57,990
And of course, what we're doing here is we are returning this view, Holder, because if you look at

67
00:04:57,990 --> 00:05:01,710
this function, you can see the returns, something of type view holder.

68
00:05:02,430 --> 00:05:08,020
OK, so that is the uncreate view holder method.

69
00:05:08,040 --> 00:05:11,470
And now let's look at the unbind view holder.

70
00:05:11,850 --> 00:05:13,200
So what that does is.

71
00:05:14,460 --> 00:05:22,790
It binds each item in the array list to a view, so we have this array list of 12 items and now we want

72
00:05:22,790 --> 00:05:29,790
this list type to be transformed into something that we can actually see, so into views, so into a

73
00:05:29,790 --> 00:05:31,020
bunch of different views.

74
00:05:31,260 --> 00:05:35,490
So each every single item will become a view.

75
00:05:35,490 --> 00:05:38,020
And a view is something that you can see on your screen.

76
00:05:38,220 --> 00:05:43,620
So, for example, here, this list item is one view and it's going to be our item one.

77
00:05:43,920 --> 00:05:46,530
And then the next one is also a view.

78
00:05:46,540 --> 00:05:47,430
It's item two.

79
00:05:47,670 --> 00:05:53,610
And by the way, this button here at the bottom is also a view and we can click on it, but we can also

80
00:05:53,610 --> 00:05:57,220
click on list items and our recycler view here.

81
00:05:57,990 --> 00:05:59,460
OK, so what does it do?

82
00:05:59,820 --> 00:06:07,560
Well, it's called when the result you needs a new view holder of the give and type to represent an

83
00:06:07,560 --> 00:06:07,960
item.

84
00:06:08,370 --> 00:06:16,140
OK, so each time that our recycler view wants to display another item, this onepoint view Holder will

85
00:06:16,140 --> 00:06:16,630
be called.

86
00:06:17,100 --> 00:06:18,450
So why would that be?

87
00:06:18,810 --> 00:06:23,840
Well, that's because if we look at our list here, currently, all of our items are visible.

88
00:06:24,300 --> 00:06:31,160
But if we had more items, then not all of the items need to be constantly visible.

89
00:06:31,620 --> 00:06:32,640
They are not there, right?

90
00:06:32,640 --> 00:06:33,780
They are not on the screen.

91
00:06:33,780 --> 00:06:38,840
So they also don't need to be calculated or prepared or even loaded.

92
00:06:39,300 --> 00:06:40,990
And that that's where it is on by view.

93
00:06:41,010 --> 00:06:45,600
Holder comes in because it will load them as soon as they are just about to be visible.

94
00:06:46,410 --> 00:06:51,030
And the idea behind this is that you don't want to load a huge list.

95
00:06:51,030 --> 00:06:58,140
For example, if you show a list of database entries on the Web, for example, let's say something

96
00:06:58,140 --> 00:07:03,630
like Instagram, you don't want to load one thousand images all at the same time and load all of the

97
00:07:03,630 --> 00:07:10,080
data, but you only want to load the images that are visible and maybe some more images which are about

98
00:07:10,080 --> 00:07:14,370
to be visible so that the user has a fluid scroll experience.

99
00:07:14,370 --> 00:07:20,400
So you can just preload or buffer a bunch of images that are about to come, even though the user might

100
00:07:20,400 --> 00:07:22,500
never actually scroll all the way.

101
00:07:22,950 --> 00:07:26,020
But still, you want to give the user the best possible experience, right?

102
00:07:26,760 --> 00:07:30,270
So that's what this Unbind view Holder does is.

103
00:07:30,750 --> 00:07:36,810
It is called when the respective units, a new view holder of a given type to represent an item.

104
00:07:37,050 --> 00:07:43,350
So this new view holder should be constructed with a new view that can represent the items of the give

105
00:07:43,350 --> 00:07:43,770
and type.

106
00:07:43,980 --> 00:07:47,850
You can either create a new view manually or inflated from an external layout file.

107
00:07:48,120 --> 00:07:49,250
And that's what we're doing here.

108
00:07:49,260 --> 00:07:55,260
So we're saying we want to use an item which is the item at the position.

109
00:07:55,590 --> 00:08:03,960
So items, if you look at it, is the value that is passed to us when we create an item adaptor, which

110
00:08:03,960 --> 00:08:06,050
pretty much is the list that we want to display.

111
00:08:06,060 --> 00:08:07,070
So the array list.

112
00:08:07,410 --> 00:08:11,970
So in our case, the list of those items like one, two, three and so forth.

113
00:08:13,080 --> 00:08:13,680
And now.

114
00:08:14,970 --> 00:08:21,420
What we do is we want to have this individual item that we're currently looking at because Point View

115
00:08:21,420 --> 00:08:23,510
Holder only looks at one item at the time.

116
00:08:23,520 --> 00:08:26,300
It doesn't look at all of them at once, but only at one at a time.

117
00:08:26,670 --> 00:08:32,760
And what it does is it says, OK, item at the position or items that the position is going to be the

118
00:08:32,760 --> 00:08:40,409
item, which means item it positions zero is item one item at position one item to item at position

119
00:08:40,409 --> 00:08:46,740
or index two will be three and so forth, because the computer or programming languages, most of them

120
00:08:46,740 --> 00:08:49,230
at least start counting at zero.

121
00:08:50,460 --> 00:08:55,620
And then we assign this item to the holder, the active item, the text.

122
00:08:55,980 --> 00:08:56,620
What is that?

123
00:08:57,030 --> 00:09:01,140
Well, it's this TV item here inside our view holder.

124
00:09:02,180 --> 00:09:08,240
OK, so this TV item, which is in terms or in the end, is this item's role here?

125
00:09:08,440 --> 00:09:09,350
This TV item?

126
00:09:10,370 --> 00:09:11,570
OK, so then.

127
00:09:12,880 --> 00:09:17,380
The next thing I do here, so this is just additional code that I added, it's not really something

128
00:09:17,380 --> 00:09:25,000
that you will need, but I added this in order to make a change between the colors so that not all of

129
00:09:25,000 --> 00:09:28,470
them are with a white background, but some of them have a gray background.

130
00:09:28,780 --> 00:09:33,740
So what I'm just saying is, is the position modulo two zero.

131
00:09:33,760 --> 00:09:38,950
So can you divide the position by two and will it have no remainder?

132
00:09:39,400 --> 00:09:43,290
Then please go ahead and set the color to be a light gray.

133
00:09:44,050 --> 00:09:45,310
So which is the case here?

134
00:09:45,340 --> 00:09:47,930
So zero divided by two is zero.

135
00:09:48,070 --> 00:09:53,530
So we get it this great and then otherwise make the background white.

136
00:09:53,650 --> 00:10:01,120
So here Holder TV items said background, color, context, compact color context are color white.

137
00:10:01,420 --> 00:10:03,880
So it's pretty much the same code as we have here.

138
00:10:03,880 --> 00:10:05,860
Only looks a little different.

139
00:10:05,870 --> 00:10:11,890
So let's bring it into the same format so that it's a little more comparable.

140
00:10:13,550 --> 00:10:19,940
OK, so this is pretty much the same coat, only in one case we said it to Gray and in one case we said

141
00:10:19,940 --> 00:10:27,140
it to white so that it looks a little better and it's easier to distinguish the list items from each

142
00:10:27,140 --> 00:10:27,410
other.

143
00:10:27,620 --> 00:10:33,650
Because what you can also see here is that one could imagine that this is just one list item, right.

144
00:10:33,680 --> 00:10:41,030
So this whole row here could be just one row, but in the end is actually two and even three list items

145
00:10:41,030 --> 00:10:42,650
in this case, one, two and three.

146
00:10:43,280 --> 00:10:45,740
And it's easier to distinguish them if they have different colors.

147
00:10:46,190 --> 00:10:50,600
OK, so that's something that, as I said, is just a cherry on top.

148
00:10:50,600 --> 00:10:54,560
You don't need to do that, but that's in order to make it a little more readable.

149
00:10:54,830 --> 00:11:00,680
OK, so that's the preparation of the item adapter and you can create those exactly.

150
00:11:00,680 --> 00:11:01,130
This way.

151
00:11:01,130 --> 00:11:03,410
You can just copy this code and you can reused.

152
00:11:03,410 --> 00:11:04,090
Then every time.

153
00:11:04,100 --> 00:11:08,000
The only thing that you could then or would have to change if you want to have a different design,

154
00:11:08,240 --> 00:11:16,370
is the items all XML so you could go ahead and create a very own design for every single item element.

155
00:11:16,370 --> 00:11:20,030
And that is super powerful because now you could go ahead and add buttons in here.

156
00:11:20,030 --> 00:11:27,170
You could add a bunch of options, image, views and so forth inside of these items.

157
00:11:28,250 --> 00:11:32,210
And yeah, you could customize your list.

158
00:11:32,220 --> 00:11:39,110
You want your recycler of you, and that is something that is super valuable and super important whenever

159
00:11:39,380 --> 00:11:46,310
working with apps nowadays, because almost any app that you will use has at one point a recycler of

160
00:11:46,310 --> 00:11:46,490
you.

161
00:11:47,430 --> 00:11:52,530
Or a list type of approach, either great format or less format.

162
00:11:53,040 --> 00:11:56,870
All right, so now let's look at the main activity and the main activity.

163
00:11:57,240 --> 00:12:00,620
What I have is this value list, view and grid view.

164
00:12:00,630 --> 00:12:07,980
The only thing that they do is they store a value which we then know whether we currently have the list

165
00:12:07,980 --> 00:12:10,190
you visible or grid view visible.

166
00:12:10,380 --> 00:12:12,990
So that's just something that I used in order to make this possible.

167
00:12:13,020 --> 00:12:16,040
What you can see here that I can move around between the two.

168
00:12:16,290 --> 00:12:18,140
So now I'm in the grid view.

169
00:12:18,150 --> 00:12:23,730
So our current visible view, this variable here, will have the value of grid view.

170
00:12:24,950 --> 00:12:28,590
And otherwise, now it will have the value of list view.

171
00:12:28,940 --> 00:12:34,240
OK, so that's the idea behind those variables, then we have to create another nothing too fancy here

172
00:12:34,490 --> 00:12:36,640
and then we call this functionalist you.

173
00:12:36,650 --> 00:12:38,180
So what is this functionalist view?

174
00:12:39,680 --> 00:12:46,430
This function is used to show the items in the list format, so I'm setting the current visible view

175
00:12:46,430 --> 00:12:53,380
to being LASU and then I set the layout manager to be a linear layout manager.

176
00:12:53,390 --> 00:12:56,030
So I want them to appear in a linear layout.

177
00:12:56,360 --> 00:13:03,650
And then I create an item adapter object, which I call item adapter, and I assign it to this Arvi

178
00:13:03,650 --> 00:13:06,740
item list, which is of type linear layout.

179
00:13:07,070 --> 00:13:08,840
So let's look at this RV item list.

180
00:13:09,350 --> 00:13:17,360
It is this recycler view widget that I created in my content maint, which then in turn is called an

181
00:13:17,360 --> 00:13:20,480
activity made so we could pretty much do the same thing.

182
00:13:20,490 --> 00:13:23,630
We could have done this whole thing and activity main.

183
00:13:23,870 --> 00:13:28,700
So it could have been here instead, just like that without including the content.

184
00:13:29,360 --> 00:13:36,680
So if you have never worked with basic activities, then you will not have used content main.

185
00:13:36,920 --> 00:13:40,010
You will only be familiar with activity.

186
00:13:40,010 --> 00:13:40,340
You mean.

187
00:13:40,820 --> 00:13:41,290
All right.

188
00:13:41,600 --> 00:13:44,430
But it's the same type of concept.

189
00:13:44,630 --> 00:13:51,670
So in our case, we have a coordinator layout in which we have a HEPA layout with the toolbar.

190
00:13:51,680 --> 00:13:58,910
So this thing here at the top, then we in our case now have the recycler view and the floating action

191
00:13:58,910 --> 00:14:01,400
button, which is displayed in here at the bottom.

192
00:14:01,550 --> 00:14:04,340
So this is the UI that we have here.

193
00:14:04,670 --> 00:14:11,150
And what I'm saying is that I want to assign the adapter to this item list.

194
00:14:11,630 --> 00:14:13,250
So to this recycler view.

195
00:14:14,600 --> 00:14:19,370
So coming back to our main activity, that's what I'm doing in here.

196
00:14:22,090 --> 00:14:28,900
And then setting the item adopted to be the actual adapter of this Arvi items list, now, of course,

197
00:14:29,050 --> 00:14:39,280
if I do as I did with activity men, so instead of having it in here just as a include and using it

198
00:14:39,280 --> 00:14:40,780
in there, I get this error.

199
00:14:40,930 --> 00:14:44,020
But I just did that to demonstrate the point.

200
00:14:44,650 --> 00:14:46,740
OK, so that's the list you method.

201
00:14:46,750 --> 00:14:49,920
And then we have the similar approach for a grid view.

202
00:14:50,170 --> 00:14:54,750
So here we just say that the current divisible view is the grid itself.

203
00:14:55,120 --> 00:14:59,230
And then we set the layout manager to be a grid layout manager.

204
00:14:59,560 --> 00:15:02,800
OK, so it's a different type of layout.

205
00:15:02,830 --> 00:15:10,240
If we go back here and we would go ahead and create a new grid layout, you can see that's pretty much

206
00:15:10,240 --> 00:15:13,270
the same thing as if I would go ahead and create a grid layout in here.

207
00:15:13,510 --> 00:15:16,780
That's the code here that does that.

208
00:15:17,730 --> 00:15:22,510
And what I can say is the context and the span count.

209
00:15:22,510 --> 00:15:25,560
So how many columns do I want to have?

210
00:15:25,570 --> 00:15:27,490
So let's say I only want to have two columns.

211
00:15:27,490 --> 00:15:29,460
Then I would change to spend count to two.

212
00:15:29,830 --> 00:15:33,160
Let's run this again just to see if that is actually applied.

213
00:15:35,070 --> 00:15:35,840
So that we are.

214
00:15:35,910 --> 00:15:43,020
Let's look at the review and you see now the elements are next to each other just with two columns,

215
00:15:43,170 --> 00:15:45,290
and that is what you can achieve with the Spanker.

216
00:15:45,300 --> 00:15:48,600
And, of course, you can increase it to four or five and whatsoever.

217
00:15:48,930 --> 00:15:52,310
And that will change the amount of columns that you have.

218
00:15:52,860 --> 00:16:00,810
And then we again create an item adapter object, which we then assigned to the ROV item list adapter

219
00:16:00,870 --> 00:16:01,500
property.

220
00:16:02,340 --> 00:16:11,580
So you can assign an adapter to something which is of type either layout or linear layout, because

221
00:16:11,580 --> 00:16:18,600
a linear layout also just displays things on top of each other or in the list, so to speak.

222
00:16:18,700 --> 00:16:21,130
That's why we can or why it has an adapter.

223
00:16:21,570 --> 00:16:27,330
And then finally, I have this GETRUDE here, which gets item lists and it returns an array list.

224
00:16:27,330 --> 00:16:32,320
So we create this little list, which is of type array list, and then we assign a bunch of values here.

225
00:16:32,520 --> 00:16:34,110
So I have 12 values.

226
00:16:34,110 --> 00:16:38,490
So let's say I want to add another one item thirteen.

227
00:16:41,520 --> 00:16:42,330
And.

228
00:16:44,680 --> 00:16:47,050
Item chocolate.

229
00:16:49,740 --> 00:16:51,150
And another item.

230
00:16:52,710 --> 00:16:53,470
Popcorn.

231
00:16:54,240 --> 00:16:55,020
Something like that.

232
00:16:55,410 --> 00:17:00,630
So now let's run this again just to see, because so far when we are on this list, you we couldn't

233
00:17:00,630 --> 00:17:03,150
scroll right, because there was nothing to scroll.

234
00:17:03,180 --> 00:17:04,800
There was nothing underneath it.

235
00:17:05,190 --> 00:17:06,810
But now let's look at it and see.

236
00:17:06,810 --> 00:17:09,550
Now we have a scrollable list here.

237
00:17:09,569 --> 00:17:15,119
Now we can actually scroll and get this little effect indicating, OK, you're done, you're at the

238
00:17:15,119 --> 00:17:17,490
bottom of the list or you are at the top of the list.

239
00:17:18,770 --> 00:17:24,190
OK, and then we returned this list, so we add all of the different items that we want to add and we

240
00:17:24,260 --> 00:17:25,569
return this list.

241
00:17:26,690 --> 00:17:27,180
All right.

242
00:17:27,589 --> 00:17:29,390
Now, we looked at the different function.

243
00:17:29,390 --> 00:17:34,400
Let's go back to our uncreate method, because that's where we even started with this list view.

244
00:17:34,760 --> 00:17:41,960
And now the only thing that I have in here is this fab switch, which changes between the two different.

245
00:17:44,030 --> 00:17:45,650
So one of them is a great view.

246
00:17:45,680 --> 00:17:50,630
The other one is a list you so that's everything that this web which does, because if you look at it,

247
00:17:50,900 --> 00:17:53,290
it's this floating action pattern.

248
00:17:53,300 --> 00:18:00,680
That's why I called fab fab floating actual button, which then just is called fab switch.

249
00:18:01,250 --> 00:18:09,910
And whenever we click on it, we change it from list view to great view and the other way around.

250
00:18:10,250 --> 00:18:16,070
And what we do here with this fab switch, that image drawable is change the little image that we see

251
00:18:16,070 --> 00:18:16,440
here.

252
00:18:16,460 --> 00:18:23,360
So there's a little icon here at the bottom right corner, which is either this list or this grid image

253
00:18:23,990 --> 00:18:28,390
and which are actually visible in our drawable folder.

254
00:18:28,400 --> 00:18:29,000
So I see.

255
00:18:29,000 --> 00:18:30,290
Great, that's great.

256
00:18:30,500 --> 00:18:31,630
And I see list.

257
00:18:32,150 --> 00:18:33,140
That's this list here.

258
00:18:34,380 --> 00:18:42,840
All righty, so this is how you can work with recycled views and we're going to use recycled views quite

259
00:18:42,840 --> 00:18:48,450
a bit because, as I said, almost every app that you can use or that you can think of where you have

260
00:18:48,450 --> 00:18:55,380
any type of amount of information that is bigger than just showing one or two elements is usually done

261
00:18:55,380 --> 00:19:02,040
with a list view or a recycler view, to be more precise, because very often you just don't know how

262
00:19:02,040 --> 00:19:06,570
many entries you have, especially when the data comes from the web or from the database.

263
00:19:06,960 --> 00:19:08,730
You never know how many entries there are.

264
00:19:08,940 --> 00:19:12,060
And that's why recycled views are amazing to do that.

265
00:19:13,640 --> 00:19:20,510
I would recommend that you just download this project and then you go ahead and play around with the

266
00:19:20,510 --> 00:19:27,290
value, so, for example, play around with this one here, the spend count, just to see how it looks

267
00:19:27,300 --> 00:19:28,630
when you have different spans.

268
00:19:29,350 --> 00:19:33,370
Then another thing that you could change is the colors that you want to have as a background.

269
00:19:33,650 --> 00:19:41,300
So instead of having color gray, you could go ahead and use something pretty cool, like primary color,

270
00:19:41,550 --> 00:19:42,980
whatever our primary color is.

271
00:19:42,980 --> 00:19:45,180
You can look that up in colors here.

272
00:19:45,920 --> 00:19:47,660
Our primary color is this.

273
00:19:49,530 --> 00:19:56,820
Greenish here, the staircase, and then you could even create the different structures, so it's not

274
00:19:56,820 --> 00:20:01,670
modulo two, but maybe modulo three and then you have three different versions.

275
00:20:01,680 --> 00:20:06,410
So if modulo three is one, then you have the primary color.

276
00:20:06,420 --> 00:20:10,430
If mother of three is two, then you have a white color.

277
00:20:10,440 --> 00:20:15,810
And if it's something else, then you would have, I don't know, like the secondary primary color or

278
00:20:15,810 --> 00:20:19,320
something like that, because if we run that, we will now have this other color.

279
00:20:19,650 --> 00:20:24,750
And then another thing that I would like you to do is, and that's the most interesting one, is to

280
00:20:24,750 --> 00:20:30,440
adjust this item's role, because instead of just having a TextView, you could go ahead and add image

281
00:20:30,450 --> 00:20:31,380
views in here.

282
00:20:31,680 --> 00:20:35,070
And I'm just going to do that real quick just to demonstrate that.

283
00:20:35,070 --> 00:20:37,290
So I know this video is getting a little long.

284
00:20:37,290 --> 00:20:38,130
I'm sorry for that.

285
00:20:38,370 --> 00:20:41,100
But I think this is super useful to see.

286
00:20:41,430 --> 00:20:48,930
So we have this image for you and it's just going to wrap its own content and then I'm going to set

287
00:20:48,930 --> 00:20:49,830
as a source.

288
00:20:51,690 --> 00:20:59,340
The drawing that we have so drawable gret because we don't have many options here, so let's run it

289
00:20:59,340 --> 00:21:00,790
again and see what's happening.

290
00:21:01,410 --> 00:21:04,530
So this is, by the way, the one example.

291
00:21:04,740 --> 00:21:09,090
It looks awful in my opinion, but this you see how you can change the color.

292
00:21:11,200 --> 00:21:17,410
So that we are back and you can see now we have this image here for every single list item here at the

293
00:21:17,410 --> 00:21:23,620
left hand side, and it's barely visible because it's just just like gray image with white background.

294
00:21:23,620 --> 00:21:25,720
So it's not a perfect example.

295
00:21:25,720 --> 00:21:29,590
But you can see even in the grid view, it's not the same for all of them.

296
00:21:29,600 --> 00:21:31,840
So you could design it as you like.

297
00:21:31,840 --> 00:21:32,050
So.

298
00:21:32,290 --> 00:21:32,650
All right.

299
00:21:32,650 --> 00:21:37,420
So probably you can already imagine how this will be useful, because now you could go ahead and create

300
00:21:37,750 --> 00:21:45,400
a whole list item that looks like a list item in, for example, Instagram or Facebook or whatever app

301
00:21:45,400 --> 00:21:47,500
you're using because they have list items there as well.

302
00:21:47,500 --> 00:21:54,490
And one list item would be, for example, an image, then the poster when it was posted and some further

303
00:21:54,490 --> 00:21:59,920
information so you could get all of that into one of your item roll elements.

304
00:22:00,880 --> 00:22:02,410
OK, so I think that's enough.

305
00:22:02,770 --> 00:22:04,300
Let's make a break here.

306
00:22:04,330 --> 00:22:06,330
We are going to use recycled use quite a bit.

307
00:22:06,340 --> 00:22:12,160
So no worries if that was a little too fast and you didn't understand every single thing because practice

308
00:22:12,160 --> 00:22:16,620
makes perfect and practice really helps to make those concepts stick.

309
00:22:16,630 --> 00:22:19,080
And we are going to use them in almost every app.

310
00:22:19,090 --> 00:22:21,540
So I'd say, let's go to the next one.

311
00:22:21,610 --> 00:22:22,170
See you there.