Alright, so as I mentioned at the end of the last video, it's time to get back to the designer and add some more widgets.
So I'm going to go back into design view, and you can see down here now by the way, I didn't mention it at the end of
the last video, but the constraint layout's now disappeared,
and we've just got this scroll view. And all the other widgets we add
for this screen are going to go inside the scroll view,
and when doing this I find it's easier to focus on the component tree and ignore the design or the blueprint.
And it's much easier to get widgets inside other widgets, by watching for the triangular pointer in
the component tree. So what we actually want next is a card view.
Now we saw them on Google's material design site, and they're pretty cool for getting a nice visual effect,
and you'll see that once we've finished the design. So we want to come down here and click on the app compat
category, the end of the palette, and we want to select the card view widget, which is the top one.
Now before trying to put a card view inside the scroll view, be aware that a scroll view can only contain
a single widget.
Now that's not a problem here, because obviously in the component tree, it's currently empty,
but what out when you drag a scroll view onto a layout. When you do that, it'll automatically contain
a linear layout which can cause you problems.
Alright so we're going to drag the card view onto the layout.
Now I'm going to release it as you saw there, and you may get a dialogue pop up, asking you if you want to include
the card view v seven library into the project.
If that happens click OK to accept the change.
It certainly used to do that in previous versions of Android Studio,
but you can see in my case it didn't do that, although it is doing some work, and you can see that it
was clearly downloading something to add to this project.
Now we used to get a similar dialogue when adding a recycler view,
but again that's another thing that no longer happens.
So Google may change things here as well,
so bottom line is don't worry if you don't see the dialogue, or if you, do just click OK.
And as I mentioned you saw some processing happening,
and that was the library being added and gradle sinking the project.
Now the card view widget sometimes doesn't get added.
In my case you can see in the component tree on the left of the screen it is actually there,
but sometimes it doesn't get added when the library wasn't already included in the project,
and you'll have to drag the widget into the component tree again.
But in our case we've now got a card view inside the scroll view.
So if the scroll view wasn't expanded, just click it to expand it and you can see the card view, so make
sure it's in there. So everything else at this point is now going to go inside the card view.
Now a card view's designed to look good, but it's also very limited when it comes to arranging the widgets it contains.
In fact if we drop the text views and an image view directly into the card view, they would actually literally
just sit on top of each other. What we want to do is arrange them, one below the other on the screen,
so we need to place another vertical linear layout inside the card view first.
So we'll come over here and select layouts, and we want to grab a linear layout.
We want to grab this time a vertical linear layout,
and we want to drag that into the card view from the layout, so I'll just choose vertical. Come down and make sure that I'm in
the card view, and you can see now that the linear layout is now within the card view. And you can see that I'm using
the component tree, and again I recommend that you do use a component tree here, especially if you find that
dragging onto the design doesn't put things in the correct place.
If you are using that, it is actually also very easy to drag things back into the right place in the component tree.
So it's very easy to get the linear layout position to below the card view instead of inside it.
In here we clearly want the linear layout to be inside the card view.
But again the component tree makes it very easy to reposition things,
and we want the linear layout to be a child of the card view.
Now if you are having trouble trying to get an existing linear layout in the correct place,
it's often easier just to delete it and drag another one into the component tree. Keep an eye on the guidelines to
make sure that it will be dropped inside the card view.
Alright so next I can drag the first text view to hold the author.
So I'm going to come back to all, or I could select text, it's just as easy, and I want to drop the text view
inside the linear layout. And you can see it's pretty clear by looking at the arrows and the guidelines as to where it's going
to be dropped, so I want this to appear in the linear layout, and you can see that clearly the text view's going in there.
So let's change a few attributes on the text view. Firstly the layout width should be set to match parent, which it is,
and we want the layout underscore height to wrap content.
Now we also need IDs for all these widgets, so that we can put the appropriate text into them. So that
first text we'll have the ID photo underscore author, so let's change that.
Alright so next we want to add the image view and the remaining two text views.
Now it's usually at this point a bit easier to add these, because we just have to position them below the existing
text view. So come to images first, and to our image view, and I'll drop it immediately below the photo author,
and you can see that immediately Android Studio pops up and asks for an image to display on it.
So I'm going to choose our placeholder that we've used in a previous video, in this section of the course.
Click OK, and you can see that the image view is at the same level as the text view, so
that's correct. So I'm going to select that. So the ID should be photo underscore image.
Now once again, the layout underscore width and layout underscore height should be match parent and wrap content respectively, and they are here.
So at this point now we want to add the two remaining text view widgets, so I'm going to add the first one,
and I'm going to go with the ID for this one, photo underscore title.
You want to make sure the width and height are set to match parent and wrap content as well, which it is, and
last one we're going to do now,
one last text view, add that. The ID for that one is going to be photo underscore tags, layout width
again, match parent and layout height, wrap content.
Now the blueprint at this point doesn't look too bad.
We can see the four widgets placed neatly one below the other. On the design
though, it doesn't look nearly as good, looks a bit grim. The first text view
at the top of the image may be obscured by the toolbar, which isn't great. In my version of Android Studio,
it's now picking up and automatically fixing that.
And we've seen that before, and I'm going to remind you how to fix that if you're having a problem there
in a moment. Also there's no margin set,
so all the widgets are touching the one above and are too close to the edges of the screen.
So let's set some attributes to sort everything out.
So rather than us having to set left and right margins on each widget individually, we can actually set the
padding on their containing card view. So let's go ahead and do that, so I'm going to select the card view,
and we're going to change the padding property by going into extended attributes. So padding,
you want to open that up.
So I want to set the card view's padding property to 8 dp, bit actually it turns out that's not a good idea.
The card view widget can have nicely rounded corners,
and we're going to set that in a moment. Now to avoid things conflicting with the rounded edges,
the card view's padding attribute is used by the card view itself.
So what we have to change isn't the padding attribute,
it's something called content padding, and it's actually described in the documentation.
I'm just going to bring that up on the screen,
and it's described down here in the fifth paragraph, basically, "Since padding is used to offset content for
shadows, you cannot set padding on CardView.
Instead, you can use content padding attributes in XML".
So back in Android Studio, making sure that card view is still selected, we actually set the content padding,
and not the padding itself.
So content padding as you can see down here, come down there and set that to 8 dp,
and you can see that's nicely indented, and moved things for us.
Now if your particular design needs different amounts of padding, or different edges, you can expand the
attributes and set each one individually. We've got content padding bottom, left, right top.
But going back to our normal settings here,
our most commonly used one's content padding.
I can just select it there as well, which is the way that you would ordinarily do it anyway.
Basically it's setting the same padding as you saw on all four edges, which is fine for what we want here.
Now before leaving the card view, again we want to make sure that the layout width is set to match parent, and
the layout height is set to wrap content. In my case that is correct.
Now we want to make it look a bit neater by curving the corners, so I'm going to actually change this card
corner radius, and change that to 8 dp.
Now that doesn't show very well in the layout designer, but you'll see the effect when we get to run this
app. Once it's running, experiment with different sizes there to see the effect it has.
So you can see that things are looking a bit nicer now, but if everything's hiding behind the toolbar, then we
once again need to check that layout underscore behavior property that we saw previously. I'm just going
to go into that and have a look at that. That's this layout behaviour here at the top.
Now you can see that mine's already been selected, but if there wasn't anything actually in there
in the past, then you might have something that looks like that on the screen, but in my case it was selected.
So hopefully your version of Android Studio has done the same thing, and the content's not obscuring the
toolbar. That in any event, that's how you need to fix that anyway, by changing that to app view scrolling view
behavior. Now the scroll view also needs to fill all the space horizontally.
So again, we've talked about this before, but I want to make sure, scroll view, that the layout width and
height should both be set to match parent. You can see layout width and height are both set to match parent, so
that's correct.
Now the card view looks a bit neater if there's space around it, which we can do by setting the scroll view's padding
to 8 dp. So I can go into padding for our scroll view, and we can select and change all to make that 8 dp,
and you can see that's now looking a bit nicer again. Now I want to increase the bottom margin to 16 dp, to bring
it away from the navigation bar at the bottom of the screen. Now you can experiment with this when the
app's running to see what effect it has.
You won't actually see the effect a lot of the time, because the card view will be sized to fit the image.
But when you get a large image, one that's a lot taller than it's wide, or a lot of text in the tags,
then the card view will extend beyond the bottom of the screen, and that's why we put it into a scroll view.
So when that happens the bottom margin will have an effect, and will produce space between the card view
and the navigation bar. So I'm going to come over here and change bottom to 16 dp.
So everything else at this point needs a layout underscore width of match parent, and a layout height
of wrap content, starting with the linear layout, the inner linear layout, so select that. Go back to our normal
attributes, commonly used ones. We want to change the layout
underscore height in this case, to wrap content,
that's for the linear layout. So all the remaining widgets will be as wide as possible, and will grow vertically
to hold whatever it is that they contain, which could be other widgets in the case of the linear layout,
or text and pictures, in the case of the text views and the image view.
So that's linear layout's layout height changed to wrap content, so move onto the first text view. OK we've already assigned
an ID to this as you can see. That's photo underscore author in this case. We've set it's height to wrap content
already which is correct,
and we need to set all its margins as well to 8 dp. That's in extended, under layout underscore margin.
So I would select all there, and select 8 dp.
So moving onto the next one, photo image, we've already used the name, or selected the name, photo underscore image.
We've got match parent and wrap content which is correct for the width and height. We need to make sure
the margins are set to 8 dp so let's do that.
Now for the scale type for this we'll go back to our regular attributes.
We want to change the scale type here.
We're going to use fit center.
Now we looked at all the image scale type options at the start of the course,
so if you think a different option looks better then you can change it. Experiment because that's
a great way to see what things do.
But again I'm going to change that to fitCentre. Right for the last two text views now, photo title
is the next one. We're making sure that match parent and wrap content for the width and height respectively.
Obviously it's got a name so we want to change the margins as well,
layout margin to 8 dp. And the last one is the phototags.
Let's change the margin because we're on the extended attributes screen, 8 dp again, then we'll go back
to our regular attributes. We've got
match parent and wrap content, which is correct, and photo underscore tags being the name.
Now one last thing I'm going to do here for tags, we're going to change the text size to 12,
and we do that by opening a text appearance,
if it's not already selected, and changing that to 12 sp.
And you saw that text size only showed up when I expanded the text appearance attribute.
Alright so at this point we've set the properties, and we've spaced things out a bit, and now the rounded corners of the card
view are showing a little bit in the design. You can see carefully if you have a look,
if I haven't got my mouse on there.
If I go back to the other screen,
you can actually see the rounded edges are showing there, and it looks a lot neater than what it was at the
start of this video. Because the linear layout is so simple, you end up nesting linear layouts inside other linear
layouts if your display is at all complex, and once you've got a lot of nesting, Android does take
a lot longer to render the layout.
So that's why Google produced the relative layout, and then replaced that with the constraint layout, because
performance was becoming a problem.
But when using a card view though, you can't really get away from nesting. You have to have another
layout such as a linear layout inside the card view, unless it only contains a single widget,
otherwise they all end up positioned on top of each other.
Now just before I've finished, I mentioned the image views adjust view bounds attribute in an earlier video.
This is a good layout to really see the differences that it can make.
So once the app's running, change this layout and set adjust bounds to true.
It does make a big difference to the appearance of the images, and could be a very useful attribute to
get the effect you want. But at this point that's our three layouts designed.
So I'm going to reformat the code for this one.
Incidentally you can see that if I scroll back up to the top, there's quite a bit of XML that's been generated
by Android Studio. Going back to design,
or clicking the design tab. In the next video we're going to start hooking up our code to the layouts,
to get our app displaying the photos. Now the first step
would be to use a recycler adapter to produce a scrolling list of the photos that we parsed out of the
json data. So I'll see you in the next video.