Alright so we're now ready to get started on the user interface for our flickr browser, so we can display
the results of our searches.
Now we're going to have three different activities, and on the screen you can see that I'm running the flickr browser
app on my emulator again, just to remind you of what we're doing.
So this first screen, this is the main activity, and this displays a list of the photos and their description
from the json data. Now another activity's used to display the full photo when I long tap on it. That's
going to be our photo details activity, and when I long
tap on one of these photos, notice how that opens up and the photo is displayed in a much larger size.
And again that's the photo details activity. Now notice at the top here,
it's got a toolbar, and tapping the up button to go back to activity,
there's another toolbar here as well as you can see.
Now we can search for different photos which'll just change the tags that we include in the flickr url.
So when I tap this search icon here, on the toolbar, we get another activity launched.
This is our search activity. Now notice that this has also got a toolbar,
even though it doesn't look like one. This search bar here at the top, where we'll type the tags that we want
to find, is also a toolbar. It's just styled differently to the other ones.
So we'll need some simple code in each activity to display the toolbar, and I'm going to show you a way to do
that without having to duplicate the code in each class.
So going back to the main screen again.
Now this is using something called a recycler view to display the thumbnails
and let's us scroll up and down, like so.
Now a recycler view's a newer replacement for the list view that we've already seen.
And I'm going to talk more about it when we come to use it. But let's start by creating this layout.
So I'm going to move over now back to Android Studio. Now in this app we've got two XML layout files:
activity underscore main, and content underscore main.
And these are in the app res layout subfolder. So Google decided to split up things this way,
for apps that use a toolbar and a floating action button. Now I'm going to open up activity underscore main
by double clicking it. I'm also going to click over here
in the top left project to give us a bit more space.
So you can see that this has got a blank toolbar at the top,
and we've also got a floating action button as well,
an fab down the bottom right hand corner of the screen. So I've also got a Hello World widget here,
so I'm going to delete that, except though I can't. I can't select it or do anything with it,
and it's not actually showing up either in the component tree. You can see over here to the left there's no text view.
So what we have got in the component tree though is our main layout, a coordinator layout. Now a coordinator layout's
intended to be used as a top level layout, when you want the child views to interact, so that you can do neat things
like make the toolbar fold up when scrolling, then fold down again, when you've scrolled all the way back up.
And you can also use it to include other layouts in a different file, and
that's actually what's happening here. Now in the coordinator
layout is an AppBar layout containing the toolbar, so you can see we've got this AppBar layout and a toolbar is within
the AppBar layout.
And at the bottom is this floating action button that we've talked about, the fab, but in the middle here
there's this include thing, and as you can see there the name of that is content underscore main.
So it's Google's way of including the content underscore main layout. Basically,
Google's way of separating out widgets that make up the display from things like the toolbar and the fab.
Now we're going to be making all our changes in content underscore main, and that'll be included
in activity underscore main when the app runs, because of this include widget that's in the component tree.
Now they've made the layout design as rendering engine display the layout,
so that the included items show, which is cool, but we can't directly edit them from here.
So what we need to do is to edit in this case, the text view, is to open up content underscore main.
So I'm going to go ahead and do that. I'm just going to double click content underscore main
to open it and then close the project view again. Now that we've got the content underscore main open,
over here, I can now select the Hello World, because we've got a text view over here to the left hand side, and I can
actually press del to actually delete that.
At this point now, in content underscore main, we've got a blank constraint layout just as we've used before
in the other apps we've created in this course. Now again, Google have done this to make life easier.
If we had the toolbar and the fab in this layout, then they'd end up getting in the way as we try to design
the stuff we we're interested in.
So when you create a new project and choose a template that includes the toolbar and fab, you get these
two layout files. Templates without the toolbar just create the single layout file.
So just remember that if there's only activity underscore main, then you add your widgets to that,
but if there's two layout files, content underscore main and activity underscore main, then it's best to add your
widgets to content underscore main.
Now we're not going to be using the fab in this app, and we'll be deleting the code that references it in
the activities,
but I'm going to leave it on the screen until nearer the end of the section. That's so you can see the effect
of starting on it
when we look at material design. Alright so next what we're going to do is drag a recycler view onto this layout.
So the first step's finding it in the pallet, and it's part of the support library.
So basically I'm just scrolling,
you can scroll right down to the bottom of the list in this case to find it.
It's right down the bottom, recycler view, but you could also have selected AppCompat and selected it from there.
And this also then includes in AppCompat, the other widgets that were added to Android via the support library.
Now previous versions of Android Studio used to pop up a dialogue asking about adding the recycler view library
to the project, when you selected or dragged it into, or onto a screen. Now this shouldn't happen
now, but if you happen to get that dialogue, then just accept the suggestion by clicking OK.
You also want to make sure at this point that auto connect's turned off, so come over here, make sure that's selected
and turned off as it is in my case.
The next thing we want to do is drag the recycler view onto the layout, so I'm going to do that but not release
the mouse button yet.
Now I want auto connect off because there's another neat feature that Google have added to the layout designer.
Now of course they may well remove it again,
so if this next bit doesn't work for you then just create the constraints by dragging the handles.
Now we should have a recycler view on the layout with no constraints set,
so there's a little button going now, and you can see there that we've got no constraints up here that have been set at the moment.
And again making sure that I've got recyclerview set, and clearly, selected rather, and you can see that there's
no constraints at the moment, and we're looking in the Inspector in the top right. Now each of the constraints
though is showing a plus, these ones here, and clicking on these will automatically create a constraint to
the corresponding edge of the layout.
So if you click each one in turn, and our recycler view widget should now be correctly constrained
on all four edges once I've finished, so I'm going to click on that now.
And you can see it's automatically adding those constraints for us, and we've now correctly got constraints,
the top left bottom and right.
So that's pretty cool, it saves messing about when the widget fills the layout, but what's not quite so cool
and will hopefully change, is that the cost the constraints are fixed rather than match constraint.
So why would that be a problem?
Well the easiest way to demonstrate this is to switch the layout into landscape and see what happens,
and you can see what happens straight away when we do that. Those fixed width and height are based on the portrait
size of a Nexus 4, so they're way off in landscape.
So watch out for that and change the horizontal and vertical constraints to match underscore constraint
before continuing. So let's go ahead and do that now,
and you can see that's now a lot better and it fits in landscape,
and if you go back to portrait, you can see that it's still working nicely in that size as well.
Alright so looking much better. Now in terms of the screen that we're building, we're going to want to scroll
up and down through the photos,
so therefore we need a vertical scrollbar. Now at the moment the scrollbar's attribute appears in the attributes
pane, you can see here, over here under scrollbars. Now depending on what Google decide to do, scrollbars
may be available without having to expand the properties.
But if you can't find a setting you want to change, then just come over here and use the double arrows
to get access to all the properties. Now we want a vertical scrollbar, so I can choose that from the list
over here, so we'll just click into here and choose vertical, click on OK.
So we've now got our recycler view filling the screen, with all constraints set to the edges of the screen,
and the margins as you can see over here are all set to 8dp, and the width and height are both set to match
constraint. So the only other thing left to do now, is to give it an ID so we can access it in our code.
So I'm going to go with the unoriginal name, recycler underscore view.
Now one thing you may notice is that the recycler view can show behind the toolbar at the top
of the screen. If this happens that shows up best in the blueprint,
but even in the design you might see that items 0 1 2 and 3 not showing, because the toolbar's
obscuring them. Now there's a layout setting that controls this behavior,
so I'm going to remove my setting to show you what I mean by the recycler view showing behind the toolbar.
So if I go into the component tree, so come over here to constraint layout, and I'm going to select that, then I'm going to
expand the attributes pane. But look for the property that's called layout behavior,
I think it's that one there, we can't quite read it. There it is, layout underscore behavior, and generally it's at the top
of the attributes list because it's value's been changed from the default.
So when I delete the value for that item,
you can see straight away when I did that, items 0, 1 and a little bit of item 2 are now behind the toolbar, and the
blueprint's showing the screen is now extending up into the area occupied by the toolbar.
So the fix for that is always to make sure that you always set the layout underscore behaviour, if you want
to keep your content below the toolbar. And to set it if it wasn't actually selected automatically, come
over here into layout behaviour, click on the ellipsis here. Now there's a lot of properties that are showing
on the screen now, but the one we're interested in is the one concerning the AppBar.
So I'm going to type appbar in the search box,
and you can see that it only returns, in this case, one property, appbar underscore scrolling underscore
view underscore behavior. So that's the one we want, so we can just make sure that it's selected,
and click OK.
And you can see once we've selected and chosen that value again, that it now looks better,
and we've now correctly got a toolbar without the recycler view showing behind it. Now some versions of Android
Studio didn't automatically set that value,
so it's a useful property to know about if you find the toolbars, or your toolbars, are sitting on top
of other content. Alright so that's the lay finished.
So I'm just going to go into the XML for our content underscore main. I'm going to reformat the code,
and if we go back and close content underscore main now, and go back and look at activity underscore
main now, you can see that the recycler view widget's now being displayed.
And that's because content underscore main is included in this file.
Now we're finished with activity underscore main as well,
so I'm going to close that again after reformatting the code.
I'll open the project pane again.
So in the next video we're going to create the layout that the recycler view's going to use to display
the photo details. So I'll see you in the next video.