Alright so let's now continue working with the layouts, starting with the search activity.
So what we want to do is right click the package name under the java folder, so the subfolder package,
and we're going to get the Android wizard to do most of the work for us. So I'm going to click on, right click
New, select Activity,
and we're going to choose basic activity.
And if you can't remember which activities which, then you can go through the gallery instead, as I've shown you in
earlier sections of this course. But again to do that we can right click over here again, select New, this time
instead of choosing activity,
we're going to actually choose Gallery instead, under activity, and there's the gallery with the pictures of what we'll be
getting from each template.
Now in this particular case we want basic activity, because we want a toolbar, so click on that, and click on
next. So we're now in exactly the same place we were, when I cancelled the first wizard,
so it doesn't really matter which option you choose to get here.
Now the activity name is going to be search activity, and there's only one other thing other than typing that in
which I'll do first.
So only one other thing we need to do on this screen, and that's because Android automatically handles going
back to what it knows as the parent activity, when you click the up button on the toolbar.
But to do that, it has to know what the parent activity is.
So we tell it to do that by adding an entry in the manifest, or to the manifest.
However the wizard can do this for us if we enter an activity in the hierarchical parent box here,
and that may be off the screen or in my case not showing correctly because I've enlarged the fonts for video
presentation, but you may need to scroll down to see it on your version of Android Studio.
Now you can't select the parent activity using the dropdown though,
unfortunately. It probably should work but hasn't been working in the last few versions of Android Studio.
Now we can use the ellipsis button at the end to choose main activity from the list.
So if nothing appears in the list after a couple of seconds, close the window and click on the ellipsis button
again. You can see that took a few seconds before it actually appeared in my case.
We'll have a look at the manifest later to see what it's just done,
but for now we're going to select that and click OK.
And although you can't see it very well it is actually main activity as the hierarchical parent on the
screen now.
Now the final dropdown, if I scroll down a little bit more to see that, is source language. This lets you choose Kotlin
support,
so choose Java if you want Java code, and use it to select Kotlin
if you want Kotlin code.
So if everything else is fine at this point you can click on finish.
Now what's happened now is it's created two additional source files for us.
We've got activity underscore search dot XML, this one here, and also content underscore search dot
XML.
We're just waiting for the spiel to actually finish.
Now we're not going to add anything to this layout.
It's just going to have a toolbar for the search function.
Now we don't really need content underscore search as there isn't any content, and for that reason I'm
going to go ahead and delete that.
So coming over here to content underscore search dot XML.
But before I delete it, it is being included in activity underscore search, so it's best to open up activity
underscore search first, which is already open for me.
And I'll just close down the project pane to make a bit more space, and come over here to the component tree,
and you can see it's included over here.
So I'm just going to select that, and delete the include entry on that line, and you can see that's now disappeared.
And the easiest way was how I've shown you, by selecting it in the component tree, and deleting it from there.
And while I'm here I'm also going to delete the floating action button because we're not going to use that
either.
It comes with this basic activity template but we only want to use the toolbar.
So we'll go ahead and delete the floating action button,
and we've still got the toolbar there as you can see. So now that I've done that, I'm going to delete the XML file from the layout
folder, making sure I delete the correct file.
So I want to to open that up again,
Project pane, and content underscore searche dot XML is the one we want to delete, and that's because
we do need the activity underscore search dot XML. So I'm deleting content search,
click on OK, and it's now disappeared, and we've still got our activity underscore search there with the toolbar.
Alright,
so I'll just reformat the XML for that,
Back to design.
Alright so at this point now the search layout's done, so I'm going to close down activity underscore search dot XML.
Now the third layout we need in this app, is for displaying the full photos when we select one from the
list.
So I'm going to create a new basic activity, just as we've done for the search activities.
So I'm going to right click the package name, select New, come down to activity. And this time we're going to choose basic activity, and then again there's
no need to go into the gallery because we've done it.
And even I haven't forgotten which template to use in that short time. Now the activity, let's call
that photo details activity.
This time I'm not going to set the hierarchical parent,
so we can see the difference later. Now I'm going to change the title to include a space,
and remove the word activity, so photo details in other words.
That's what the user will see in the toolbar so photo details will look a bit nicer. Everything else at this point
is fine.
So as long as you've got the correct language selected here, and source language, depending on whether
you want Kotlin or Java, you can then click on finish.
Alright and this time we don't need to do anything with the details file, in this case the activity underscore
photo underscore details,
because we're going to be adding our widgets to content underscore photo underscore details.
So I'm going to open that up in the layout designer.
Well in my case it's actually already open.
So I'm going to close down the project pane to make a bit more space.
Now we're going to do something a little bit different for this layout.
Now some of the photos will be too long to fit on the display, especially with a text that will
also be showing, so to cope with this,
we're going to use a scroll view. Now if you want to make things scrollable when they otherwise wouldn't
be,
you can drop them into a scroll view widget. Now scroll view is classified as a container, and
appears in a containers category. So I'm going to select that, and you can see scroll view's actually there, but we
won't actually add it from here though.
What we're going to do instead is replace the constraint layout down here in the component tree, with a scroll
view.
Now there's no need to use a layout
when the only thing it contains is a scroll view. Now we could drag a scroll view onto our existing
constraint layout,
but that really results in an unnecessary level of nesting.
And unfortunately there's currently no way to delete the constraint layout. The del key doesn't work. I'll select that and
try and delete it.
You can see nothing's happening there other than getting it de-selected.
So what we're going to have to do is edit the XML.
It's a bit more complicated but we end up with a cleaner layout in the end.
So come down here, we're going to click on the text tab. We're going to replace this android dot support
dot constraint dot constraint layout. We're going to replace that all with scroll view,
scroll view, like so, and you can see that Android Studio helped by actually adding it at the end so we only
had to type it once. And it will actually provide a list that we can select from as well,
if you delete it and start typing. But
pretty cool
how you notice how the closing tag changes automatically which prevents us from forgetting to change
it.
Alright so that's all we really have to do.
It's not really that painful, even though we had to mess with the XML a bit.
As long as you use the correct case for scroll view,
it'll work fine. Choosing it from a tool-tip makes life easier and less error prone.
Now it's probably not obvious from the demo of the app, but there's a bit of nesting of views inside
other views going on, to get the effects we saw.
Now as I start dragging widgets and layouts onto the design,
you might be left scratching your head and wondering what's going on.
But the good news is that it does make sense once you've seen the finished design.
Now I'll discuss it all
when I'm done,
and I'm going to be coming back to this once we've got the app working, because it's a good layout to
use for experimenting with some of the settings, to see what effect they have. Alright, so it's time to get
back into the designer,
but what we'll do is we'll work on that, and basically fleshing out this design in the next video.