1 00:00:05,420 --> 00:00:09,780 Alright so just before we move on I just wanted to clarify again this on bind 2 00:00:09,890 --> 00:00:12,460 view holder. Just to finish off, that 3 00:00:12,960 --> 00:00:19,010 picasso will download the image from the URL on a background thread, and it puts it into the image 4 00:00:19,040 --> 00:00:22,100 view, the downloaded image, once it's downloaded. 5 00:00:22,230 --> 00:00:29,130 So this method doesn't wait, so our function here, the on bind view holder, doesn't wait for the download 6 00:00:29,130 --> 00:00:29,950 to finish. 7 00:00:30,390 --> 00:00:35,820 And that's the image dealt with, and then this last line here on line 49, that actually puts the title into 8 00:00:35,820 --> 00:00:37,840 the text view, and we're actually done. 9 00:00:37,950 --> 00:00:42,140 Now the recycler view still has a reference to the view holder that it's passed in. 10 00:00:42,270 --> 00:00:48,210 So when this function finishes, the recycler view can then display the holder in its list. And keep in mind 11 00:00:48,210 --> 00:00:50,570 that the image may not have finished downloading at that point, 12 00:00:50,850 --> 00:00:55,380 and that's why you'll see the placeholder in the list briefly, and you've seen that when I've downloaded the application 13 00:00:55,690 --> 00:00:58,530 earlier in this section. 14 00:00:58,530 --> 00:01:03,810 And again once the download finishes, picasso updates the image view and we get to see the thumbnail, the 15 00:01:04,019 --> 00:01:06,440 actual thumbnail of the image downloaded. 16 00:01:06,680 --> 00:01:09,730 Alright so at this point again, we're almost ready to test it. 17 00:01:09,750 --> 00:01:15,140 The last thing we need to do though to make this work is to associate this adapter with the recycler view, 18 00:01:15,480 --> 00:01:17,650 and we do that in main activity. 19 00:01:17,820 --> 00:01:25,530 So we're going to open up main activity. We need to add some code in the onCreate function to do that, and we go up to the 20 00:01:25,530 --> 00:01:31,350 onCreate function. Firstly though we need to, we need a field rather, to hold the recycler view 21 00:01:31,350 --> 00:01:31,730 adapter. 22 00:01:31,880 --> 00:01:36,470 Let's go ahead and add that at the top of the class, below the definition for our tag. 23 00:01:36,760 --> 00:01:46,410 So it's going to be private val flickrRecyclerViewAdapter equals, and it's going to be FlickrRecyclerView 24 00:01:46,490 --> 00:01:53,790 Adapter, parentheses ArrayList parentheses, and closing parentheses. 25 00:01:54,150 --> 00:02:01,120 Right then in terms of the code in the onCreate method, we're going to add the code below the set support action bar 26 00:02:01,150 --> 00:02:09,039 line on line 20, and before the call to create your uri. We're going to do recycler 27 00:02:09,150 --> 00:02:11,620 underscore view dot 28 00:02:12,250 --> 00:02:20,250 layoutManager equals LinearLayoutManager parentheses this. 29 00:02:20,430 --> 00:02:31,580 Then the next line, recycler underscore view dot adapter equals flickrRecyclerViewAdapter. 30 00:02:31,650 --> 00:02:35,200 Now the recycler view doesn't take care of handling the layouts. 31 00:02:35,280 --> 00:02:41,970 That's done by a layout manager. In fact the recycler view class itself is much simpler than the list view. 32 00:02:42,240 --> 00:02:48,780 It doesn't do much beyond recycling views, and everything else is left to other objects. So the data and 33 00:02:48,780 --> 00:02:52,860 the view to display are provided by a recycler adapter, 34 00:02:52,860 --> 00:02:58,310 the layout is performed by a layout manager and the views themselves live in a view holder. 35 00:02:58,540 --> 00:03:04,180 So by delegating responsibility like this, the recycler view becomes far more flexible than a list view, 36 00:03:04,370 --> 00:03:06,240 and it also performs a lot better. 37 00:03:06,570 --> 00:03:11,990 Fortunately though, we don't have to write our own layout manager. We just create a new linear layout manager object, 38 00:03:12,320 --> 00:03:16,710 and tell the recycler view to use that, and that's what I've done on line 24. 39 00:03:16,710 --> 00:03:18,570 Now you can write your own layout manager 40 00:03:18,600 --> 00:03:19,510 if you need to. 41 00:03:19,680 --> 00:03:26,640 It's pretty advanced, but does mean you have full control of what's going on and how things are displayed. 42 00:03:26,670 --> 00:03:29,090 Normally though it's not necessary but the option's there 43 00:03:29,310 --> 00:03:37,100 if you want to. We then associate the new instance of our recycler view adapter with the recycler view, by assigning 44 00:03:37,100 --> 00:03:43,480 our adapter to the recycler view's dot adapter property, or adapter property, doing that on line 25. 45 00:03:44,100 --> 00:03:50,250 So at this point all that's left now to do, is put our data into the adapter. 46 00:03:50,250 --> 00:03:57,060 Now the place to do that is when we receive new data, and that happens in the onDataAvailable method. 47 00:03:57,750 --> 00:04:03,400 So we come down here and go back to that function that we've already created, onDataAvailable, 48 00:04:03,520 --> 00:04:09,120 and we've got this code here to basically tell us the data and when it starts and ends. So I want to put some 49 00:04:09,120 --> 00:04:13,000 code in there, and the code in there is going to be flickr 50 00:04:14,240 --> 00:04:18,029 RecyclerViewAdapter dot loadNewData, then in parentheses 51 00:04:18,029 --> 00:04:24,780 it's going to be data, data being an object which is the list of photo objects passed as a parameter to this 52 00:04:24,780 --> 00:04:26,190 function. 53 00:04:26,190 --> 00:04:31,200 And if you recall we created the loadNewData function to allow new data to be provided, and we're calling 54 00:04:31,200 --> 00:04:38,170 it here, passing it the list of photos that we've just parsed from the json data. And what I'll do is also change 55 00:04:38,250 --> 00:04:43,620 the log entry while we're here so we're not logging all that data in our log cat. So I'm just going to change that to put onData 56 00:04:43,710 --> 00:04:47,280 Available called, delete the rest. 57 00:04:47,610 --> 00:04:52,530 Now we can almost test the app but we've got an error in the search activity class. If we come back and 58 00:04:52,530 --> 00:04:53,360 have a look there. 59 00:04:55,400 --> 00:05:00,650 We deleted the floating action button from the layout, but we've still got a reference to it in onCreate. 60 00:05:00,800 --> 00:05:02,570 So I'm going to delete that entire block of code. 61 00:05:02,570 --> 00:05:08,610 Should fix that error and keep Android Studio happy. 62 00:05:08,690 --> 00:05:15,060 So lets actually test the app now, to see what it looks like in the emulator, so I'm going to start that, and I've 63 00:05:15,370 --> 00:05:17,350 got my emulator running already. 64 00:05:25,490 --> 00:05:27,370 OK so you can see that that seems to be working. 65 00:05:27,370 --> 00:05:29,000 It doesn't look too bad at all. 66 00:05:29,030 --> 00:05:33,680 So you should be able to scroll through the photos, and you can see the placeholder object being replaced by 67 00:05:33,680 --> 00:05:37,870 the actual images as the picasso library is downloading those for us, 68 00:05:37,970 --> 00:05:44,800 and the recycler view is then updating itself with the view. And if we look at the log cat, we 69 00:05:44,800 --> 00:05:47,290 can see there's a lot of data in there. 70 00:05:52,220 --> 00:05:56,500 And what we might to do is clear this a little bit now, because we've still got a filter on there now so we can see everything, 71 00:05:56,760 --> 00:06:01,930 and we can see recycler view being called, get item count being called, go right up to the top. 72 00:06:02,080 --> 00:06:11,540 We can see, if we scroll down a little bit further, there's the downloading complete, onDataAvailable, onPostExecute and there's our 73 00:06:11,750 --> 00:06:17,370 onCreate view holder being called, and there's our onBindViewHolder also being called for us. 74 00:06:17,500 --> 00:06:22,430 And you can see that's being called continually. Basically we've seen the initial calls to onCreateViewHolder, 75 00:06:22,730 --> 00:06:25,930 and then calls to onBindViewHolder as the list is scrolled. 76 00:06:26,240 --> 00:06:32,330 And notice also that get item count is actually also called fairly often as well. 77 00:06:32,330 --> 00:06:35,750 Bottom line here is that all the components are working together. 78 00:06:35,840 --> 00:06:43,340 The downloaded data's going into the flickr rrecycler view adapter, which is feeding the recycler view fine. I'm going to stop the 79 00:06:43,340 --> 00:06:48,320 video here, and in the next one we're going to extend the app, to view the full sized photo and some of 80 00:06:48,320 --> 00:06:51,870 its details like the author and the tags associated with it. 81 00:06:52,100 --> 00:06:53,220 So I'll see you in the next video.