Alright so we started creating our recycler view adapter class in the last video. In this one we're going to continue
writing the code to finish the adapter.
Now specifically the function that we haven't yet finished is the on bind view holder.
So this method's called by the recycler view when it wants new data to be stored in a view holder so
that it can display it.
Now as items scroll off the screen, the recycler will provide a recycled view holder object, and
tell us the position of the data object that it needs to display.
So what we have to do in this function is get that item from the list, and put its values into the view
holder widgets.
Now that's normally quite easy.
We just store the photo's title in the text view, and the thumbnail image in the image view. Now
looking at our FlickrImageViewHolder class that we created at the top here,
it's got a text view called title and an image view called thumbnail.
Now the problem we've got though, is that we're not storing the actual photo,
rather we're storing a URL showing where to get that photo from.
Now if we had nothing better to do and perhaps we were reinventing the wheel, we could create an async
task object to download the image.
In fact, you know now everything you need to do that if you really wanted to. It's really not that complicated.
However, there is a better way.
There's an open source library called Picasso that does exactly what we want.
In fact it's better than that, because it maintains a cache of the photos we download so that they're
not downloaded again.
And that really improves performance as well as saving the devices battery, because it's not using the
Wifi or data connection as much.
So let's actually see how that works.
So the first step we need to do is add the picasso library as a dependency.
Now there's two ways to do that.
One would be just to edit the build dot gradle file for the module, and type the details in there.
Now that's great if you know exactly what the library's called, but we're going to do it another way,
that lets Android Studio help us out.
So what I want to do is come over here to the file
menu in Android studio, and we want to select Project Structure,
then we want to come down here and click on app under
the modules heading, at the bottom of the left hand pane
as you saw me click. Now we want this dependencies tab over here in the top right, so that we can see what's
currently being used, because in here that's a list of everything that is being used.
Now the recycler view and card view libraries were added for us when we created the layouts.
That's what Android Studio did after asking if we wanted to add the libraries.
Well actually that's what used to happen, because we didn't actually get prompted for that like we used
to, and I did say that the recycler view library's been added but it hasn't, because it used to be
but Google are changing things. Now
they may well change things back again, but this is one reason why I mentioned the recycler view library.
The other reason is to draw your attention to the fact that things do change.
Now if Google hadn't moved the recycler view out of it's own library, then it's possible that they'll
do the same for the card view.
So don't worry if you don't see a reference to support card view. Now we have got that reference here,
but don't worry if you're not seeing it in there, because you can see here that clearly the recycler view is working,
but it's not showing up under our list of dependencies here.
So the card view was added to the layout,
so you know that it's available in the project. As of the time I'm recording this,
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
7, then colon 26.1.0, but that may well be missing altogether when you come to create this app if
Google make further changes.
Now we've also got the design support library here, and also appcompact, because we chose to make this app compatible
with older versions of Android.
So to add in your library, we want to click the plus button, which depending on your operating system may
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,
and we get the option there to select the type of dependency. We want to click on and choose library dependency.
Now we know the one that we need is called picasso, so we can just type that into the search box and press enter,
so picasso, or we could click on the search icon on the right. So that used to happen.
So now that we've done that we should get a list of the
libraries matching. Click on OK.
Now that's something that should have happened, and may well happen again in the future,
but at the moment though, Google are changing the repositories,
and as you can see this doesn't work.
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
there,
I've got nothing to show
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
fact that Google are changing something at the moment and the search is not working.
So I'm going to type com dot square up dot picasso colon picasso colon 2.5.2 and do a search,
and you can see that was automatically added to the list of dependencies there.
Now you may have found an earlier version of picasso in the list that popped up,
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
box just now.
Now at times like this, a Google search is the best way to proceed.
So I'm going to switch my browser, I'll switch to my browser rather.
We're going to do a search here,
for android picasso.
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
was named after this library.
The first one that should be returned, and it is in my case, is the square dot github dot
io dot picasso. Click on that to have a look.
So we get a lot of information, a load of information in fact, about the picasso library, and I'm not
going to go through it all now.
But there's code samples and a load of other information if you follow the links over here to the right. Down at
the bottom is the instructions we really need, down here, and as I scroll down there's lots of information there,
right down to including the line that we need to add to our build dot gradle file. So basically we want com
got squareup dot picasso colon picasso colon 2.5.2, and you saw me type that in to the
search bar previously.
So this is the website for the creators, and the version showing is the latest version.
So this technique can be used whenever you want to include a library in your Android project.
You'll find that the Google documentation isn't always updated straight away, and they update stuff so frequently
that changing the docs every time would be a mammoth task.
So you'll often want to use a later version that appears in the Android docs. The list in Android Studio
is updated from the repositories, and will have the latest version that's available.
Alright so going back to android studio.
So we never got that list of matching libraries populated, but we now know it's com dot squareup dot picasso
colon picasso dot 2.5.2 and obviously I clicked OK.
So now that it's been added to the dependencies, we can get out of this screen by clicking on OK again,
and when we do that we need to wait a little while Android Studio resyncs the project, and it's actually downloading
the library as well.
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
actually done for us.
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
gradle module app. There are two build dot gradle files listed under gradle scripts, you can see the one above
that as well.
We normally work with the module one.
It's very rare that you need to change the project one.
And as you can see down here at the bottom of the build dot gradle file,
are all the dependencies and all the entries we saw in the dialogue a minute ago.
So the picasso library's been added as you can see there on line 35, and you can see there's the card
view as well.
And the recycler view may be there if Google have decided to change things, but obviously it's not showing at the
moment in this video, and so on. Now we could have just added the implementation line in here,
but often, going through the project structure is easier, and there's less chance of a typo.
That's when it works of course.
Alright so at this point we've got the picasso library added.
Let's see how to use it.
So what we want to do is, we're going to close down the build dot gradle file, and we want to go back
to our Flickr recycler view adapter class, which I'm in. We want to go specifically down to the on bind view
holder method.
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
here to say this is "Called by the layout manager when it wants new data in an existing view".
Right so in terms of the code of it's going to be val photo item is equal to photoList square brackets
position, position being a parameter passed to this function.
Then we're going to log something, Log.d parentheses TAG comma double quotes, it's going to be dot onBindViewHolder
colon and then we're going to put a space dollar sign, left and right curly braces photoItem dot title, and then
we'll put an
arrow,
so two dashes and a greater than sign, and we'll put dollar position.
Then we're going to do Picasso
with a capital P, which is the library we just added, dot width parentheses
holder dot thumbnail dot context, parentheses dot load parentheses again, photoItem dot image.
Then on the next line I'm going to indent that and put dot error parentheses R dot drawable dot placeholder.
Next line going to be dot placeholder R dot drawable dot placeholder, then on the next line dot into holder
dot thumbnail
parentheses.
Then on the next line, well next line we're going to leave a blank line there, holder dot title dot
text is equal to photoItem dot title.
Alright.
So the first thing we'll do is retrieve the
correct
photo object from the list, that's line 42. Now the recycler view tells us the position of the data we need in the
position parameter, and that's what we're using to retrieve from the array list, and on the next line we're
logging what we've retrieved as that's always useful when developing.
We then use this Picasso dot with function on 1ine 44 to get a Picasso object.
Now the picasso class is a singleton,
so instead of using new to create a new object, we're using that static function.
So make sure that there's only ever one Picasso object in our app.
Now you can learn more about the functions from the website and by searching on-line, which is always a good
idea when you're using a library.
You can hold down the control key and click on the method names, or command on a Mac,
also to view the source code.
Remember that the comments for the functions though when you do that, appear just before the actual function
in the source.
Alright so moving on.
Picasso needs a context as an argument to with. Now we could have passed a context in our flickr
recycler view adapter's constructor, like we did for the list view's adapter, but I wanted to show you
another way to get a context.
All views exist in a context, and they all have a get context function, or to be more accurate
as this is Kotlin,
we can just refer to the context property.
Now we've got a couple of view objects here.
We've got a text view holding the photos title, and an image view holding the image.
So to get the context for Picasso to use,
we can just use the context property of our thumbnail
image view, and we're doing that as you can see on line 44 there. Now the load method that we're actually calling
there after that,
well that loads an image from our URL, and we store the thumbnail URL in the image field of the photo
class. Now picasso's been designed so that we can chain the method calls together, which is again
a common way to design libraries these days.
So after loading the image we can continue calling these other functions.
So our code sets the placeholder image to be used if there's an error,
you can see that on line 45, and Android Studio is nice enough to give us a quick representation
of what that image is going to look like.
Then on line 46, we also set the placeholder,
and that's to help while the images are downloading. Now on a Google page where we downloaded the
placeholder image,
there's another icon representing a broken image.
So you could download that and use that for the error image instead if you wanted to.
And finally we store the downloaded image in the image view widget, in the view holder, this dot into. Now
picasso will download the image from the URL on a background thread, and puts it into the image
view once it's downloaded.
Now our function doesn't have to wait, or doesn't wait, for the download to finish.
Alright so once the download's finished, picasso updates the image view and we see the thumbnail. Now we're
almost ready to test this.
The last thing we need to do though, to make it work, is to associate this adapter with the recycler view
So we're going to work on that in the next video.