1
00:00:05,460 --> 00:00:10,910
Alright so we started creating our recycler view adapter class in the last video. In this one we're going to continue

2
00:00:10,910 --> 00:00:13,490
writing the code to finish the adapter.

3
00:00:13,490 --> 00:00:18,790
Now specifically the function that we haven't yet finished is the on bind view holder.

4
00:00:18,980 --> 00:00:24,950
So this method's called by the recycler view when it wants new data to be stored in a view holder so

5
00:00:24,950 --> 00:00:26,690
that it can display it.

6
00:00:26,690 --> 00:00:33,320
Now as items scroll off the screen, the recycler will provide a recycled view holder object, and

7
00:00:33,320 --> 00:00:37,350
tell us the position of the data object that it needs to display.

8
00:00:37,730 --> 00:00:43,160
So what we have to do in this function is get that item from the list, and put its values into the view

9
00:00:43,160 --> 00:00:44,800
holder widgets.

10
00:00:44,810 --> 00:00:46,160
Now that's normally quite easy.

11
00:00:46,160 --> 00:00:51,530
We just store the photo's title in the text view, and the thumbnail image in the image view. Now

12
00:00:51,590 --> 00:00:56,240
looking at our FlickrImageViewHolder class that we created at the top here,

13
00:00:56,660 --> 00:01:01,040
it's got a text view called title and an image view called thumbnail.

14
00:01:01,040 --> 00:01:05,440
Now the problem we've got though, is that we're not storing the actual photo,

15
00:01:05,690 --> 00:01:09,720
rather we're storing a URL showing where to get that photo from.

16
00:01:09,740 --> 00:01:14,750
Now if we had nothing better to do and perhaps we were reinventing the wheel, we could create an async

17
00:01:14,750 --> 00:01:17,180
task object to download the image.

18
00:01:17,210 --> 00:01:22,360
In fact, you know now everything you need to do that if you really wanted to. It's really not that complicated.

19
00:01:23,240 --> 00:01:24,620
However, there is a better way.

20
00:01:24,950 --> 00:01:29,570
There's an open source library called Picasso that does exactly what we want.

21
00:01:29,630 --> 00:01:34,510
In fact it's better than that, because it maintains a cache of the photos we download so that they're

22
00:01:34,520 --> 00:01:36,320
not downloaded again.

23
00:01:36,320 --> 00:01:41,780
And that really improves performance as well as saving the devices battery, because it's not using the

24
00:01:41,780 --> 00:01:44,540
Wifi or data connection as much.

25
00:01:44,630 --> 00:01:47,480
So let's actually see how that works.

26
00:01:47,480 --> 00:01:53,150
So the first step we need to do is add the picasso library as a dependency.

27
00:01:53,150 --> 00:01:54,640
Now there's two ways to do that.

28
00:01:54,710 --> 00:02:00,080
One would be just to edit the build dot gradle file for the module, and type the details in there.

29
00:02:00,110 --> 00:02:04,800
Now that's great if you know exactly what the library's called, but we're going to do it another way,

30
00:02:04,980 --> 00:02:07,210
that lets Android Studio help us out.

31
00:02:07,220 --> 00:02:09,150
So what I want to do is come over here to the file

32
00:02:09,160 --> 00:02:13,990
menu in Android studio, and we want to select Project Structure,

33
00:02:16,910 --> 00:02:18,900
then we want to come down here and click on app under

34
00:02:18,920 --> 00:02:23,110
the modules heading, at the bottom of the left hand pane

35
00:02:23,120 --> 00:02:29,840
as you saw me click. Now we want this dependencies tab over here in the top right, so that we can see what's

36
00:02:29,840 --> 00:02:33,420
currently being used, because in here that's a list of everything that is being used.

37
00:02:33,500 --> 00:02:37,500
Now the recycler view and card view libraries were added for us when we created the layouts.

38
00:02:37,730 --> 00:02:40,940
That's what Android Studio did after asking if we wanted to add the libraries.

39
00:02:40,940 --> 00:02:45,800
Well actually that's what used to happen, because we didn't actually get prompted for that like we used

40
00:02:45,800 --> 00:02:51,230
to, and I did say that the recycler view library's been added but it hasn't, because it used to be

41
00:02:51,230 --> 00:02:53,730
but Google are changing things. Now

42
00:02:53,760 --> 00:02:58,990
they may well change things back again, but this is one reason why I mentioned the recycler view library.

43
00:02:59,150 --> 00:03:03,580
The other reason is to draw your attention to the fact that things do change.

44
00:03:03,620 --> 00:03:08,910
Now if Google hadn't moved the recycler view out of it's own library, then it's possible that they'll

45
00:03:08,920 --> 00:03:10,520
do the same for the card view.

46
00:03:10,880 --> 00:03:15,940
So don't worry if you don't see a reference to support card view. Now we have got that reference here,

47
00:03:16,280 --> 00:03:21,080
but don't worry if you're not seeing it in there, because you can see here that clearly the recycler view is working,

48
00:03:21,400 --> 00:03:24,040
but it's not showing up under our list of dependencies here.

49
00:03:24,560 --> 00:03:26,680
So the card view was added to the layout,

50
00:03:26,810 --> 00:03:30,920
so you know that it's available in the project. As of the time I'm recording this,

51
00:03:30,950 --> 00:03:38,550
you can see here that the dependency, or it needs a dependency, on com dot Android dot support dot card view, then we've got here version

52
00:03:38,550 --> 00:03:46,130
7, then colon 26.1.0, but that may well be missing altogether when you come to create this app if

53
00:03:46,190 --> 00:03:48,170
Google make further changes.

54
00:03:48,190 --> 00:03:56,510
Now we've also got the design support library here, and also appcompact, because we chose to make this app compatible

55
00:03:56,510 --> 00:03:58,150
with older versions of Android.

56
00:03:58,520 --> 00:04:04,160
So to add in your library, we want to click the plus button, which depending on your operating system may

57
00:04:04,160 --> 00:04:10,220
be either in the top right, or in the case of the one on my Mac, it's at the bottom left. Now click on that anyway,

58
00:04:11,400 --> 00:04:18,390
and we get the option there to select the type of dependency. We want to click on and choose library dependency.

59
00:04:18,390 --> 00:04:24,920
Now we know the one that we need is called picasso, so we can just type that into the search box and press enter,

60
00:04:24,950 --> 00:04:32,800
so picasso, or we could click on the search icon on the right. So that used to happen.

61
00:04:32,800 --> 00:04:34,860
So now that we've done that we should get a list of the

62
00:04:34,910 --> 00:04:37,590
libraries matching. Click on OK.

63
00:04:38,100 --> 00:04:42,300
Now that's something that should have happened, and may well happen again in the future,

64
00:04:42,440 --> 00:04:45,250
but at the moment though, Google are changing the repositories,

65
00:04:45,400 --> 00:04:48,140
and as you can see this doesn't work.

66
00:04:48,200 --> 00:04:53,490
So if you do get a list, you can select the correct library, but as you can see that what I'm trying to search

67
00:04:53,490 --> 00:04:54,170
there,

68
00:04:54,360 --> 00:04:55,220
I've got nothing to show

69
00:04:55,230 --> 00:05:00,900
there. So if you have got anything just type in the full library name. That's what I'll need to do because of the

70
00:05:00,900 --> 00:05:04,640
fact that Google are changing something at the moment and the search is not working.

71
00:05:04,720 --> 00:05:16,710
So I'm going to type com dot square up dot picasso colon picasso colon 2.5.2 and do a search,

72
00:05:20,460 --> 00:05:24,880
and you can see that was automatically added to the list of dependencies there.

73
00:05:25,030 --> 00:05:29,170
Now you may have found an earlier version of picasso in the list that popped up,

74
00:05:29,200 --> 00:05:33,790
so let's have a look at how you'd work out which version to use, and how I knew what to type into the search

75
00:05:33,790 --> 00:05:35,350
box just now.

76
00:05:35,380 --> 00:05:39,620
Now at times like this, a Google search is the best way to proceed.

77
00:05:39,940 --> 00:05:42,870
So I'm going to switch my browser, I'll switch to my browser rather.

78
00:05:43,090 --> 00:05:44,640
We're going to do a search here,

79
00:05:46,030 --> 00:05:47,250
for android picasso.

80
00:05:52,170 --> 00:05:56,710
Now I've included the word Android so I don't get loads of results about the life and works of the famous artist who

81
00:05:56,710 --> 00:05:58,230
was named after this library.

82
00:05:58,540 --> 00:06:02,800
The first one that should be returned, and it is in my case, is the square dot github dot 

83
00:06:02,950 --> 00:06:06,690
io dot picasso. Click on that to have a look.

84
00:06:07,030 --> 00:06:12,310
So we get a lot of information, a load of information in fact, about the picasso library, and I'm not

85
00:06:12,310 --> 00:06:13,860
going to go through it all now.

86
00:06:14,230 --> 00:06:19,350
But there's code samples and a load of other information if you follow the links over here to the right. Down at

87
00:06:19,360 --> 00:06:26,350
the bottom is the instructions we really need, down here, and as I scroll down there's lots of information there,

88
00:06:27,670 --> 00:06:34,210
right down to including the line that we need to add to our build dot gradle file. So basically we want com

89
00:06:34,200 --> 00:06:40,750
got squareup dot picasso colon picasso colon 2.5.2, and you saw me type that in to the

90
00:06:40,750 --> 00:06:42,090
search bar previously.

91
00:06:42,580 --> 00:06:47,220
So this is the website for the creators, and the version showing is the latest version.

92
00:06:47,500 --> 00:06:53,540
So this technique can be used whenever you want to include a library in your Android project.

93
00:06:53,620 --> 00:06:59,470
You'll find that the Google documentation isn't always updated straight away, and they update stuff so frequently

94
00:06:59,470 --> 00:07:02,330
that changing the docs every time would be a mammoth task.

95
00:07:02,590 --> 00:07:08,200
So you'll often want to use a later version that appears in the Android docs. The list in Android Studio

96
00:07:08,200 --> 00:07:12,620
is updated from the repositories, and will have the latest version that's available.

97
00:07:13,190 --> 00:07:14,680
Alright so going back to android studio.

98
00:07:17,670 --> 00:07:22,500
So we never got that list of matching libraries populated, but we now know it's com dot squareup dot picasso

99
00:07:22,500 --> 00:07:26,660
colon picasso dot 2.5.2 and obviously I clicked OK.

100
00:07:27,150 --> 00:07:31,170
So now that it's been added to the dependencies, we can get out of this screen by clicking on OK again,

101
00:07:31,920 --> 00:07:37,220
and when we do that we need to wait a little while Android Studio resyncs the project, and it's actually downloading

102
00:07:37,260 --> 00:07:40,150
the library as well.

103
00:07:40,290 --> 00:07:44,790
When it's done we're going to just open up the build dot gradle file and just have a bit of a look in there, and see what it's

104
00:07:44,790 --> 00:07:46,070
actually done for us.

105
00:07:46,500 --> 00:07:53,520
OK it's done now so I'm going to open it up, and by the way I opened the module. You saw me click on the build

106
00:07:53,530 --> 00:07:59,500
gradle module app. There are two build dot gradle files listed under gradle scripts, you can see the one above

107
00:07:59,500 --> 00:08:00,530
that as well.

108
00:08:00,610 --> 00:08:02,440
We normally work with the module one.

109
00:08:02,590 --> 00:08:04,950
It's very rare that you need to change the project one.

110
00:08:05,320 --> 00:08:09,080
And as you can see down here at the bottom of the build dot gradle file,

111
00:08:09,200 --> 00:08:12,840
are all the dependencies and all the entries we saw in the dialogue a minute ago.

112
00:08:13,210 --> 00:08:18,370
So the picasso library's been added as you can see there on line 35, and you can see there's the card

113
00:08:18,410 --> 00:08:19,470
view as well.

114
00:08:19,610 --> 00:08:24,490
And the recycler view may be there if Google have decided to change things, but obviously it's not showing at the

115
00:08:24,490 --> 00:08:30,660
moment in this video, and so on. Now we could have just added the implementation line in here,

116
00:08:30,910 --> 00:08:35,260
but often, going through the project structure is easier, and there's less chance of a typo.

117
00:08:35,530 --> 00:08:37,419
That's when it works of course.

118
00:08:37,419 --> 00:08:39,929
Alright so at this point we've got the picasso library added.

119
00:08:40,150 --> 00:08:41,200
Let's see how to use it.

120
00:08:41,200 --> 00:08:45,760
So what we want to do is, we're going to close down the build dot gradle file, and we want to go back

121
00:08:45,760 --> 00:08:51,960
to our Flickr recycler view adapter class, which I'm in. We want to go specifically down to the on bind view

122
00:08:51,990 --> 00:08:52,290
holder method.

123
00:08:52,330 --> 00:08:59,870
So I'm going to delete the TODO reference there, and we're going to start typing some code, and we'll put an entry

124
00:08:59,890 --> 00:09:04,570
here to say this is "Called by the layout manager when it wants new data in an existing view".

125
00:09:13,520 --> 00:09:20,380
Right so in terms of the code of it's going to be val photo item is equal to photoList square brackets

126
00:09:20,380 --> 00:09:24,730
position, position being a parameter passed to this function.

127
00:09:24,730 --> 00:09:32,290
Then we're going to log something, Log.d parentheses TAG comma double quotes, it's going to be dot onBindViewHolder

128
00:09:32,290 --> 00:09:40,360
colon and then we're going to put a space dollar sign, left and right curly braces photoItem dot title, and then

129
00:09:40,360 --> 00:09:43,710
we'll put an 

130
00:09:43,760 --> 00:09:43,970
arrow,

131
00:09:43,990 --> 00:09:49,830
so two dashes and a greater than sign, and we'll put dollar position.

132
00:09:50,330 --> 00:09:51,410
Then we're going to do Picasso

133
00:09:51,430 --> 00:09:58,280
with a capital P, which is the library we just added, dot width parentheses

134
00:09:58,480 --> 00:10:11,710
holder dot thumbnail dot context, parentheses dot load parentheses again, photoItem dot image.

135
00:10:13,160 --> 00:10:23,050
Then on the next line I'm going to indent that and put dot error parentheses R dot drawable dot placeholder.

136
00:10:23,080 --> 00:10:39,090
Next line going to be dot placeholder R dot drawable dot placeholder, then on the next line dot into holder

137
00:10:39,240 --> 00:10:39,620
dot thumbnail

138
00:10:39,630 --> 00:10:41,890
parentheses.

139
00:10:42,510 --> 00:10:48,190
Then on the next line, well next line we're going to leave a blank line there, holder dot title dot

140
00:10:48,240 --> 00:10:54,220
text is equal to photoItem dot title.

141
00:10:54,360 --> 00:10:55,950
Alright.

142
00:10:56,150 --> 00:10:58,590
So the first thing we'll do is retrieve the 

143
00:10:58,610 --> 00:10:59,090
correct

144
00:10:59,090 --> 00:11:07,460
photo object from the list, that's line 42. Now the recycler view tells us the position of the data we need in the

145
00:11:07,460 --> 00:11:13,030
position parameter, and that's what we're using to retrieve from the array list, and on the next line we're

146
00:11:13,030 --> 00:11:17,170
logging what we've retrieved as that's always useful when developing.

147
00:11:17,170 --> 00:11:24,230
We then use this Picasso dot with function on 1ine 44 to get a Picasso object.

148
00:11:24,620 --> 00:11:26,930
Now the picasso class is a singleton,

149
00:11:27,110 --> 00:11:31,980
so instead of using new to create a new object, we're using that static function.

150
00:11:32,100 --> 00:11:36,440
So make sure that there's only ever one Picasso object in our app.

151
00:11:36,870 --> 00:11:41,690
Now you can learn more about the functions from the website and by searching on-line, which is always a good

152
00:11:41,690 --> 00:11:43,390
idea when you're using a library.

153
00:11:43,760 --> 00:11:47,910
You can hold down the control key and click on the method names, or command on a Mac,

154
00:11:47,920 --> 00:11:50,090
also to view the source code.

155
00:11:50,390 --> 00:11:55,310
Remember that the comments for the functions though when you do that, appear just before the actual function

156
00:11:55,310 --> 00:11:56,490
in the source.

157
00:11:57,110 --> 00:11:57,740
Alright so moving on.

158
00:11:57,740 --> 00:12:04,110
Picasso needs a context as an argument to with. Now we could have passed a context in our flickr 

159
00:12:04,130 --> 00:12:09,350
recycler view adapter's constructor, like we did for the list view's adapter, but I wanted to show you

160
00:12:09,350 --> 00:12:11,600
another way to get a context.

161
00:12:11,600 --> 00:12:18,410
All views exist in a context, and they all have a get context function, or to be more accurate

162
00:12:18,420 --> 00:12:19,520
as this is Kotlin,

163
00:12:19,700 --> 00:12:22,660
we can just refer to the context property.

164
00:12:22,700 --> 00:12:24,700
Now we've got a couple of view objects here.

165
00:12:24,800 --> 00:12:30,630
We've got a text view holding the photos title, and an image view holding the image.

166
00:12:30,630 --> 00:12:33,290
So to get the context for Picasso to use,

167
00:12:33,590 --> 00:12:36,550
we can just use the context property of our thumbnail

168
00:12:36,550 --> 00:12:42,950
image view, and we're doing that as you can see on line 44 there. Now the load method that we're actually calling

169
00:12:42,950 --> 00:12:44,000
there after that,

170
00:12:44,400 --> 00:12:50,570
well that loads an image from our URL, and we store the thumbnail URL in the image field of the photo

171
00:12:50,570 --> 00:12:57,060
class. Now picasso's been designed so that we can chain the method calls together, which is again

172
00:12:57,080 --> 00:12:59,310
a common way to design libraries these days.

173
00:12:59,330 --> 00:13:03,610
So after loading the image we can continue calling these other functions.

174
00:13:03,890 --> 00:13:07,710
So our code sets the placeholder image to be used if there's an error,

175
00:13:08,330 --> 00:13:13,610
you can see that on line 45, and Android Studio is nice enough to give us a quick representation

176
00:13:13,610 --> 00:13:15,480
of what that image is going to look like.

177
00:13:15,560 --> 00:13:19,660
Then on line 46, we also set the placeholder,

178
00:13:19,940 --> 00:13:25,400
and that's to help while the images are downloading. Now on a Google page where we downloaded the

179
00:13:25,460 --> 00:13:26,590
placeholder image,

180
00:13:26,660 --> 00:13:29,760
there's another icon representing a broken image.

181
00:13:30,050 --> 00:13:33,520
So you could download that and use that for the error image instead if you wanted to.

182
00:13:33,830 --> 00:13:40,680
And finally we store the downloaded image in the image view widget, in the view holder, this dot into. Now

183
00:13:40,690 --> 00:13:48,350
picasso will download the image from the URL on a background thread, and puts it into the image

184
00:13:48,350 --> 00:13:49,970
view once it's downloaded.

185
00:13:50,010 --> 00:13:54,150
Now our function doesn't have to wait, or doesn't wait, for the download to finish.

186
00:13:54,490 --> 00:14:01,390
Alright so once the download's finished, picasso updates the image view and we see the thumbnail. Now we're

187
00:14:01,390 --> 00:14:03,400
almost ready to test this.

188
00:14:03,430 --> 00:14:09,020
The last thing we need to do though, to make it work, is to associate this adapter with the recycler view

189
00:14:09,340 --> 00:14:11,350
So we're going to work on that in the next video.