1 00:00:05,440 --> 00:00:08,360 In this section we're going to create another app. 2 00:00:08,380 --> 00:00:13,810 This one is a Flickr browser, which will allow us to query and download a list of recent photos from 3 00:00:13,810 --> 00:00:16,480 the hugely popular Flickr Web site. 4 00:00:16,840 --> 00:00:20,590 And it's also going to be our first taste of material design. 5 00:00:20,590 --> 00:00:24,570 Now google introduced material design in Android 5 lollipop, 6 00:00:24,820 --> 00:00:31,570 that's API 21, to encourage good design and allow a consistent user experience across different platforms 7 00:00:31,660 --> 00:00:33,340 and device sizes. 8 00:00:34,090 --> 00:00:39,280 And as you can see here on their website they've got a pretty good comprehensive description of material 9 00:00:39,280 --> 00:00:42,840 design, and the link to this is in the resources section. 10 00:00:42,910 --> 00:00:48,910 So specifically in this section we're going to cover the following topics: Material Design, Compatibility 11 00:00:48,970 --> 00:00:53,770 with previous Android versions, Downloading JSON data from the web. 12 00:00:53,860 --> 00:00:58,690 Now we've seen how to download and process xml in the top 10 downloader, but this time we're going to use 13 00:00:58,690 --> 00:01:04,160 an async task to get JSON data rather than XML, and Async task, 14 00:01:04,160 --> 00:01:10,190 we're going to be using callback functions and interfaces. We're going look at the RecyclerView and Recycler 15 00:01:10,350 --> 00:01:11,560 ViewAdapter. 16 00:01:11,560 --> 00:01:14,480 Now the RecyclerView is the younger brother of the ListView, 17 00:01:14,710 --> 00:01:19,930 and really it's worth switching to the RecyclerView instead of a ListView when you want to display a list of 18 00:01:19,930 --> 00:01:21,560 scrolling items. 19 00:01:21,690 --> 00:01:27,340 We're going to be figuring out how to listen for taps on a RecyclerView and what the purpose of a Gesture 20 00:01:27,340 --> 00:01:28,370 Detector is. 21 00:01:28,410 --> 00:01:33,310 We're going to look at themes and styles and look at how they work for different versions of Android, 22 00:01:33,810 --> 00:01:38,320 and our app will also allow us to search for different types of photos from Flickr. 23 00:01:38,650 --> 00:01:43,450 And to do that we need to have a look at SearchView, which is a component of Android so that you can 24 00:01:43,450 --> 00:01:46,410 include the ability to search for things in your own apps. 25 00:01:47,720 --> 00:01:51,760 Alright so here we are with the app that we're going to be creating in this section of the course running. 26 00:01:52,190 --> 00:01:57,560 And we've actually got a RecylcerView showing the 20 photos from the Flickr feed 27 00:01:57,580 --> 00:02:00,720 Now I can scroll through this list and when I do that, 28 00:02:00,740 --> 00:02:03,410 notice the thumbnail is getting populated. 29 00:02:03,650 --> 00:02:08,210 There's a placeholder image there and that's getting populated as I scroll down. Now depending on your internet 30 00:02:08,210 --> 00:02:13,220 connection speed you might not see the placeholder images that briefly appear, before the thumbnails get 31 00:02:13,220 --> 00:02:14,220 downloaded. 32 00:02:14,270 --> 00:02:19,290 Now if we tap on of these entries we get a Toast message playing on the screen. 33 00:02:19,830 --> 00:02:22,760 It just shows us the position number within the RecyclerView. 34 00:02:23,090 --> 00:02:27,170 Now that's not really functionality we'd leave in the app, but we'd done it to show you how you can 35 00:02:27,170 --> 00:02:32,290 respond to normal taps and long taps, because when I hold down and do a longer tap, 36 00:02:32,660 --> 00:02:37,910 you can see that we get another screen opening, and we get a full representation of that image as well as 37 00:02:37,910 --> 00:02:40,090 some additional data relating to that. 38 00:02:40,340 --> 00:02:45,230 So basically the full image is downloaded. Now it's possible to scale the image to fit completely 39 00:02:45,230 --> 00:02:46,010 on the screen. 40 00:02:46,220 --> 00:02:48,480 And we saw how to do that in section 5. 41 00:02:48,770 --> 00:02:52,280 But for this app I've made the images scrollable instead. 42 00:02:52,610 --> 00:02:57,620 So if an image is too high on the screen we can just scroll it, and that also allows the tags and the 43 00:02:57,620 --> 00:02:59,710 title to appear as well. 44 00:02:59,720 --> 00:03:05,420 Now the back button that will take us back to the list. back to the full list of the various trucks 45 00:03:05,420 --> 00:03:09,170 in this case that I searched for, and from there we can search for different photos as well. 46 00:03:09,220 --> 00:03:14,660 Now I tap the search icon on the toolbar up here, that launches the search activity that we'll be 47 00:03:14,660 --> 00:03:19,480 creating and from there I can actually enter different search terms to bring up different photos 48 00:03:19,490 --> 00:03:20,400 relating to that. 49 00:03:20,570 --> 00:03:25,250 So for example I can type water, press enter, 50 00:03:25,790 --> 00:03:27,800 and that brings up a different set of images, 51 00:03:27,970 --> 00:03:32,130 and you can see that throws in some good photos again. We can do the same process as scrolling down, we can do a 52 00:03:32,150 --> 00:03:34,060 long tap to find that 53 00:03:34,520 --> 00:03:35,930 the full image downloaded, 54 00:03:35,930 --> 00:03:38,750 and see what that looks like on the device. 55 00:03:38,750 --> 00:03:44,140 Alright so that's our basic app. It uses a RecyclerView to display the initial list, and lets us 56 00:03:44,150 --> 00:03:48,670 launch different activities to display the full photos and perform a search. 57 00:03:48,980 --> 00:03:53,550 So we're going to start off by focusing on the downloading and processing of the data from the Flickr 58 00:03:53,550 --> 00:03:57,580 feed, and you actually understand what the Flickr feed is as well as we make progress through this 59 00:03:57,590 --> 00:04:02,600 section of the course. When that's working we then add user interface to display the thumbnails and 60 00:04:02,600 --> 00:04:03,820 the full photographs. 61 00:04:04,280 --> 00:04:05,550 So let's get started.