(upbeat music)
In the previous video,
we saw how to add an image to our layout
using an image view widget.
Now, we discussed constraints briefly
and learned that they're like glue
that keeps the widget fixed in place in our layouts.
Now, we've also seen how to delete constraints
but haven't yet had a go at creating them.
Instead, I left you experimenting with the
resources handles, that's these four handles here,
that can be used to do just that,
to resize a widget.
Obviously, they're on each corner of a widget
that is showing in our display.
Now, there's a reason for doing that
which is that constraining a widget when it fills the layout
can be very fiddley.
It is possible but it isn't the easiest way
to see how to create constraints for the first time.
Now, I actually left my widget sitting in the top
left hand corner of the screen,
so I resized it down.
Now if you've been experimenting,
and hopefully you have,
then yours could be all over the place.
So before we start, resize it so it's right about
the same size as mine on screen here.
Now, you can also click on the image
and hold the mouse button to drag it around the screen.
So I'm gonna do that now, I'm gonna drag it around
to the middle of the screen
and as I start doing that we start getting
these vertical/horizontal lines appearing again.
We've got the vertical one there,
then as I move it down we get the
horizontal appearing as well.
Those indicate when constraints will be set automatically
and they're appearing because we've got
auto-connect turned on,
which we talked about in the previous video.
So if I release the mouse pointer now,
when it's centred,
all four constraints should be created again.
And you can see, that's happened.
We've got the constraints showing for the image view now.
All right, now we saw two ways, previously,
to delete individual constraints,
but there's also two other ways to delete constraints.
Now the first way is to hover the mouse over the widget,
so I'm gonna do that now,
and noticing that when I did that we get this little
button that appears next to the widget.
And if I hover over that we can see that the tool
tip tells us delete constraints.
It only appears when we first selected the widget,
so you might need to select the widget that you want
to delete the constraints off and obviously,
by the tool tip, it's going to delete the constraints,
I'm going to click on that and you can see that
all four constraints got deleted.
Now, at this point, our image hasn't got any constraints
and it still looks like it's centred on the screen.
But keep in mind that it's not actually fixed in place.
If we run the app now, the widget would affectively
fall off the screen, except it doesn't really fall off,
it goes to the top left hand corner.
So let's actually try running it to see and confirm
that that is the case.
Now, we saw how to run our apps in an emulator
in section two.
You want to click on this green arrow
in the Android Studio toolbar,
now I've already got my Android emulator running,
but if not, you should be able to select from
your list of available devices if yours isn't started
and it will start it automatically.
Alternatively, you can come back up here
and click on this icon, which I can't do now
because I've got this pop-up showing,
and select your emulator and run it.
In my case, mine's already connected and running
so I'm going to click on okay.
We'll just tab over to see that.
All right, so you can see the
app started and there's the image
in the top left hand corner of the display.
That shows the importance of using constraints
to make sure that the widget stays where you want it to.
Now, any widget that's not constrained vertically
will move to the top of the screen.
In addition, if a widget isn't constrained horizontally,
it'll move to the lefthand edge.
The rest we haven't constrained our widget at all,
you can see that it's appearing at the top
on the lefthand edge.
All right, so let's go back to Android Studio.
What we're gonna do now is create some constraints.
Now, the way to do that is to
click on the constraint handle,
that's these circles on the left or on the edges
of our widget, then drag it out to where you want
to constrain the widget to.
Now, at the moment we don't have a lot of choice
because you've only got the one widget on the screen.
The only thing that we can really do at this point
is constrain the widget to the edges of the screen.
So we're gonna drag each constraint handle
to the corresponding edge of the screen.
Now, I'm gonna start with the lefthand side
and drag that over,
you can see that automatically,
the image is moved to the lefthand side
and we've now got a restraint when I release
the mouse button showing in the blueprint
and the designer, but also up here.
You can see that we've got a constraint here
on the lefthand side.
Now, don't worry about the fact that the widget's
moved across to the left, there's no need to keep
sort of trying to keep it central
or anything like that,
that's what the constraints are for.
And when I come over here now and constrain
the widget to the righthand side, to the edge,
you see it now, it goes over and centres horizontally.
It goes back to the middle, in other words.
All right, so at this point now,
our image is constrained horizontally.
If we rerun the app, we'll have a look
and see what it's done in the emulator.
We can see that it's now constrained horizontally
and it's nicely in the middle
but there's no vertical constraints
on our image view at the moment,
so it's still appearing at the top of the screen.
But we can see that we have got
the horizontal alignment right.
All right, time for a mini challenge.
Create the vertical constraints to fix the image
to the centre of the screen, and then run the app again
to make sure that it worked.
All right, so pause the video now,
complete that challenge,
and come back and we'll go through the solution.
All right, so hopefully you managed to get that working.
So to create the vertical constraints,
really all we need to do is just drag the constraint handle
from the middle of the top edge of the image
up to the top edge of the display.
So I'll do that first.
You can see that we're now constrained at the top.
The widget moved up to the top accordingly.
But now if we constrain the bottom,
you can see now, affectively, we're centred
horizontally and vertically.
And just to confirm that,
we're gonna run this on our emulator,
run the app on our emulator,
and we can see that the image view is now centred
both vertically and horizontally.
So that's what constraints are for.
They fix the position of your widgets.
Now you can fix a widget either relative
to the edges of the screen,
like we've done here,
or relative to other widgets.
Now, we'll be seeing how to start working
with other widgets later when we start adding
more widgets to the layout.
All right, so I mentioned there's two other ways
to delete constraints.
The first way that I showed you is to use the
delete constraints button on an image view
or on a widget itself.
Which we did previously in this video.
Now, there's a similar looking button on the toolbar
and that will delete all constraints
for all widgets in the layout.
Come over here and just hover over that one,
this one here,
you can see that the tool tip has come up
clear all constraints.
Now, as we've only got a single widget,
it'll do the same as the other button.
But if we had a load of widgets on this layout,
it would delete the constraints for all of them.
Now, I want to delete all our constraints
so that I can show you something else.
But before I click that button,
I want you to have a look the inspector
on the righthand side,
and I need to just click on this to hide the emulator.
Over here in the top righthand corner.
So it shows the four constraints we've set,
and it also shows the margins for each one.
Now at the moment, all the margins are set to eight,
although on the Mac, I think when I first created
these constraints at the start of this video,
it was showing as zero.
Seems to be a bit of a bug
so hopefully that will be fixed soon.
But the default margin
is determined by this other button over here
on the toolbar.
You can see that the tool tip is default margins
and you can see that the current value is set to eight.
So that's the value that's used
when you're creating constraints.
So what I'm gonna do now is come over here
and use the clear all constraints button,
click on that to remove all the constraints
for all widgets on our layout.
Then I'm gonna change the default margin
from eight, click on that, and I can either
type in 16 there or I can just click on 16
because it's a commonly used number.
Either way, I'm gonna change that now to 16
which is showing, and now
when I go ahead and recreate the constraints,
they'll all have a margin of 16.
Let's just go ahead and do that
and then we'll just have a bit of a discussion
about what margins are.
But you can see, as I'm doing this now
the margin is being set to 16 for each of our constraints.
Right, so there's our four constraints.
All right, so these margins are important
when creating layouts.
So what actually are they?
Well, think of them as an area around the outside
of a widget, just like margins on a sheet of paper.
Now what we're gonna do first is change the layout
with the layout height of the widget
so that it's 200dp square.
Now, we've seen how to resize a widget
by dragging the handles on the four corners,
but if you want a specific size,
it's usually easier to just type the size into
the properties pane on the right
below the inspector.
So that's just here.
Let's change that to make that exactly 200.
You can see that the image changed when I did that.
The size changed, and same for the layout.
Just gonna press tab or something
to move away and you can see that that's changed.
So whatever you type only takes effect
once your cursor, or once you've
moved outside of that field.
So the space that the widget now
occupies on the screen is 232.
So the widget itself is 200, and there's an
additional 16 on each side, making 232 in total.
Now, I'm gonna talk about these dp units in a moment,
or probably in the next video.
All right, at this point we're seeing this image
as it would appear on our Nexus 4 device
which has a screen width of 768.
Now looking at the blueprint,
our image is obviously a lot more
than 16 from the left edge.
In fact, if you look carefully
you can see the 16 there, then there's
all this extra stuff showing in the middle there.
So what's actually keeping it centred?
Well making sure that the image view is selected,
which in my case it is,
notice these two sliders in the object inspector.
The horizontal bias, and we've also got a vertical bias.
Now, they represent a bias which is how far
from the top and left of the screen our widget appears.
So it's expressed as a percentage,
and you can see there that it's got a number
of 50 by default, that means the widget is
halfway down and also halfway across
because they're both set to 50.
Now if we drag the bottom slider to the left,
when we do that the bias decreases.
Notice that the image is now moving as well.
If we move it all the way over to zero,
the bias is set to zero and when it's set to zero
the widget's as far left as it will go.
Now it looks to be about 16 from the edge.
So in other words, the margin is now only 16,
there's no other bias moving the image
to any other position.
Now if we increase the margin on the lefthand
constraint by over typing to value of 16,
come over here, I've just clicked on that
and you can see that we can specify several options.
I could try 32 for argument's sake.
When we do that, you can see that the actual image view
moved because we increased the margin
and because my version of Android Studio is sized up
for video presentation, we can't actually see the numbers
too clearly but if I actually just,
making sure that my mouse is being,
I've clicked into that area,
if I type in a much larger number like 120
and press enter, you can see it moved the image right over.
Although you can't see the whole number,
you can see if I'm moving my left arrow
the number 120 is just showing in there.
So this confirms that the margins
used to create space around a widget,
and forms part of the overall space occupied by that widget.
Now if I use the horizontal slider over here
to centre the image again,
now, you don't have to be too precise with it
or fight with the mouse because when you get close
to what you want you can actually fine tune it
using the cursor keys.
You can see it's set to 45
and I've just used my cursor key,
I can get it exactly to 50.
Now, when it's set to 50
the image is still off to the right,
but that's because we've got a wide margin on the left.
What's being sent in here though,
is the image view plus it's margin.
So if we change the left margin back to 16 again,
we'll select that from the drop-down this time,
the image is now moved back and
everything is as it should be.
Okay, so we're gonna come back to constraints
a little bit later.
By the way, in case you hadn't guessed,
that's why this is called the constraint layout.
What I'm gonna do is finish this video by allowing you
to experiment with this scale type property
and that's over here in the properties pane
on the righthand side.
Scale type, you can see there.
We've got a number of different options there.
Now by the way, this used to be called the properties pane
but Google have renamed it to attributes
and you can see the name up there now
in this particular version of Android Studio.
But I did mention the old name
because you may come across guides and tutorials
in the Android documentation that uses the old term
but I'll try to remember to call it attributes
moving forward in these videos.
Now, before we experiment with the
scale type attribute, you want to change the layout width
and layout height to 384 x 480.
So let's go ahead and do that.
Come up here and I'm gonna type 384,
pressed enter there, and 480,
and that causes the image view widget to fill the screen
allowing for the margins perhaps,
and the image is probably centred for you,
and it is on the screen as you can see for me now.
Now just in case it isn't though, don't worry.
Because that positioning is what we're going to be
looking at next, probably in the next video.
But getting back to scale type
before we finish this video,
if I click on the drop-down there's actually
eight values we can provide for the scale type
and you can see they're all listed there
when I've clicked on the drop-down.
So what I'm gonna do now is
finish this video with a mini challenge.
So yes, it's mini challenge time.
The idea of the challenges in this course, by the way,
is to help you understand the particular concept
a bit better by getting you to go into Android Studio
and trying to solve a particular problem or challenge.
Now we're gonna start off simply but then,
as we go through the course,
we'll build on the complexity of these challenges
to really challenge you.
The idea of this is you'll come out of this course
with a better understanding of Android Studio
and Android development.
So here's the first challenge.
I've shown you the scale type attribute drop-down.
The challenge is to experiment with the eight scale types
to work out what they do.
The one that you don't need to worry about is metrics.
So if I click on that, don't worry about metrics for now.
Because you can't really see
what it's doing in the designer.
But certainly try the other ones
and when you've done that, check your answers by searching
online for image view scale type.
Now if your search results throw up a developer.android.com
site then that should be the first one that you check.
Because that's the site of Google's documentation
and should be considered the definitive word
on anything Android related.
Of course, there's no reason that you can't check
other sites too if you want.
So that's the challenge,
see how you go,
experiment with the various settings of scale type
to see what they do,
and I'll see you in the next video.