In this section we're going to create another app.
This one is a Flickr browser, which will allow us to query and download a list of recent photos from
the hugely popular Flickr Web site.
And it's also going to be our first taste of material design.
Now google introduced material design in Android 5 lollipop,
that's API 21, to encourage good design and allow a consistent user experience across different platforms
and device sizes.
And as you can see here on their website they've got a pretty good comprehensive description of material
design, and the link to this is in the resources section.
So specifically in this section we're going to cover the following topics: Material Design, Compatibility
with previous Android versions, Downloading JSON data from the web.
Now we've seen how to download and process xml in the top 10 downloader, but this time we're going to use
an async task to get JSON data rather than XML, and Async task,
we're going to be using callback functions and interfaces. We're going look at the RecyclerView and Recycler
ViewAdapter.
Now the RecyclerView is the younger brother of the ListView,
and really it's worth switching to the RecyclerView instead of a ListView when you want to display a list of
scrolling items.
We're going to be figuring out how to listen for taps on a RecyclerView and what the purpose of a Gesture
Detector is.
We're going to look at themes and styles and look at how they work for different versions of Android,
and our app will also allow us to search for different types of photos from Flickr.
And to do that we need to have a look at SearchView, which is a component of Android so that you can
include the ability to search for things in your own apps.
Alright so here we are with the app that we're going to be creating in this section of the course running.
And we've actually got a RecylcerView showing the 20 photos from the Flickr feed
Now I can scroll through this list and when I do that,
notice the thumbnail is getting populated.
There's a placeholder image there and that's getting populated as I scroll down. Now depending on your internet
connection speed you might not see the placeholder images that briefly appear, before the thumbnails get
downloaded.
Now if we tap on of these entries we get a Toast message playing on the screen.
It just shows us the position number within the RecyclerView.
Now that's not really functionality we'd leave in the app, but we'd done it to show you how you can
respond to normal taps and long taps, because when I hold down and do a longer tap,
you can see that we get another screen opening, and we get a full representation of that image as well as
some additional data relating to that.
So basically the full image is downloaded. Now it's possible to scale the image to fit completely
on the screen.
And we saw how to do that in section 5.
But for this app I've made the images scrollable instead.
So if an image is too high on the screen we can just scroll it, and that also allows the tags and the
title to appear as well.
Now the back button that will take us back to the list. back to the full list of the various trucks
in this case that I searched for, and from there we can search for different photos as well.
Now I tap the search icon on the toolbar up here, that launches the search activity that we'll be
creating and from there I can actually enter different search terms to bring up different photos
relating to that.
So for example I can type water, press enter,
and that brings up a different set of images,
and you can see that throws in some good photos again. We can do the same process as scrolling down, we can do a
long tap to find that
the full image downloaded,
and see what that looks like on the device.
Alright so that's our basic app. It uses a RecyclerView to display the initial list, and lets us
launch different activities to display the full photos and perform a search.
So we're going to start off by focusing on the downloading and processing of the data from the Flickr
feed, and you actually understand what the Flickr feed is as well as we make progress through this
section of the course. When that's working we then add user interface to display the thumbnails and
the full photographs.
So let's get started.