(soft music)
Alright, so, I'm gonna ask you
to think a bit now.
Now, we haven't really covered
constraining widgets to each other,
although, I did briefly do it when I added the button
to what we can see on the screen now.
So have a go at this.
Remember that you can't really break anything.
So your challenge is, that using constraints
and changing the scale type of the image,
change the layout from what we have now on screen.
We wanna change it to look like this.
Now remember that you have to delete a constraint
before you can create a new one.
So have a play and get used to the layout designer
and see if you can change the layout to this one.
So pause the video here and have a go at doing that,
and I'll see you when you get back in a few minutes.
Alright, so hopefully you managed to achieve that
or have a good attempt, and are now understanding
a little bit more about how the layout designer works.
So my solution, we're gonna start
by changing the constraint
so that the top of theImageView is constrained
to the bottom of the button.
So, we wanna go over here now and click on the top circle
of the ImageView and delete the existing constraint.
Let me go ahead and do that.
Delete it and then I want to grab the constraint,
click on that on the ImageView
and drag it over to the bottom of the button,
so that the imageView is now constrained to the button.
And you can see that, helpfully,
the blueprint shows the constraints
and provides a visual indication
of where the ImageView currently is allowed to fit.
Now, the ImageView itself is currently a fixed size.
So, to make it fill the space that it's constrained in,
I wanna go over here now and click on the inner lines
to change it to match_constraints,
both vertically and horizontally.
So, I'm gonna click on that, vertically and horizontally,
and you can see now that
I've changed it to match_constraints.
The ImageView is now a lot larger.
Now finally, the image scaleType
is currently set over here to fitXY.
And as a consequence, the image is being scaled
to fill the imageView.
Well, we actually want it scaled to maintain the aspect ratio
so that it remains round.
So, the scaleType has to be changed to centreCrop.
So, I'm gonna click on and do that,
centreCrop, and finally, you
should also check the inspector
and make sure that all the margins are correct.
Now, for the ImageView to be centred in the space,
the left and right margins should be equal
and so should the top and bottom margins.
So, we wanna change those all to 8 dp.
Now, currently, you can see that we've got
three out of four of the margins are set to 16,
so I'm gonna set them all to 8.
Alright, so that's actually it.
So, you're probably already starting to see
that this layout designer is pretty cool,
and the constraint system makes it much easier
to place widgets where you want,
and also have them remain there relative
to the other widgets on the screen.
Now, if you've been using the relative layout
for much of your screen designs,
then you should consider the relative layout
as pretty much dead now.
Now, there's still a place
for the linear layout for simplicity
and we will be looking at that later in the course,
but for just about everything else,
the new constraint layout is a heck of a lot easier to use.
Alright, so I'm gonna finish this introduction
to creating layouts by going through the steps needed
to produce the following layout.
Now, it includes many of the kinds of things
that you'll wanna do when creating layouts.
There's a title, ConstraintLayout,
at the top of the screen, and text to the right of that.
Now, below the title is an image,
and then there are two buttons
at the bottom right of the screen.
Now, the image doesn't really relate to the text,
but you're here to learn about the layout designer,
not to get practice at downloading images.
Alright, so let's have a go at creating this new layout file,
and to do that, we need to actually create a new layout file.
So, if your project pane isn't open,
you may need to expand that.
Mine isn't, so, I'm gonna click on that project to open it.
And we wanna cone come down here to layout,
which, of course, is under the res folder.
We wanna right click on layout,
select New and select Layout resource file.
The other thing that I didn't mention to do
that you should be doing is making sure
that you're in Android view.
So, if by chance, you can't see this easily,
just come over here and click on this dropdown
and select Android.
Now, I can't do this at the moment because
I've got this pop up window open.
Alright, so we're gonna call this layout note_layout.
So, I'm gonna type that in there under the file name.
Now, you don't need to type the .xml extension
because Android Studio will provide that
for you automatically.
Now, the next thing over here, Root element,
that means the type of layout to create.
And currently that defaults to LinearLayout.
Now, as I've mentioned before,
we're gonna be looking at linear layout later,
but for this exercise, we want a ConstraintLayout.
So, I'm just gonna over type that.
I'm gonna delete LinearLayout
and I'm gonna start typing ConstraintLayout.
Notice that when I started typing that in,
Android Studio's dropped down a list of likely things.
So the one we wanna choose here is the
android.support.constraint.ContraintLayout.
So, I'm gonna select that by double clicking it
and in general, it's a good idea
to select from the list when you get a situation like that,
to prevent typing errors.
Now, there's lots of other things
that we can actually type and select here.
But don't worry about those for now.
We're gonna be using those later on in the course.
For now, just click on OK.
Now, while we're creating this layout,
you wanna make sure that autoconnect is enabled,
using the magnet button on the designer toolbar.
Now you can see that in my case,
it was enabled, so I've just disabled it by clicking it.
So, I wanna click it again and you'll know that
the autoconnect is enabled if there's no slash or no line
over the, on top of the magnet and also,
if we just our mouse cursor over there,
it actually tells you there's an option
to turn off autoconnect, which clearly means that it's on.
Now, autoconnect can sometimes get on the way
and cause problems, and if you wanna create constraints
that it can't work out,
you will need to disable it sometimes.
But I've turned it on now, so let's see
what sort of a job it does
of this layout that we're creating.
Alright, so we're gonna shrink the project pane now
to make a bit more space.
You wanna drag a TextView to the top left of the screen.
Now, Google have helpfully categorised the widgets
and it will take you a while to remember
where the common ones are. You can now click on
the various categories over in here
to see what they contain.
But don't try, or don't worry about trying
to memorise it all right now.
After a while, you'll find that you'll remember
the widgets you use most frequently.
So this top category here, All,
unsurprisingly contains all the widgets.
The others are Google's idea
of where things are and may change.
Now, the TextView widget appears in the Text category.
So, I can come over here and click on Text
and there's our TextView.
So I'm gonna drag that to the top left hand corner
of the screen and release it
when the vertical and horizontal lines appear.
So, when wanna release this now,
now that I've got the horizontal
and vertical lines appearing,
notice that in the blueprint, that
the TextView is now automatically constrained to the top
and left edges of the layout.
And we can see confirmation in the top right hand corner,
in inspector, that we've now got a constraint to the left,
and also a constraint at the top.
Now, if in your situation,
it hasn't created both constraints,
then just drag the TextView slightly
until you see those guidelines that I showed you
and it should, then, work.
Now, the autoconnect has done that for us,
and it's pretty cool when you're
placing the widgets initially.
It does work quite well but,
if it starts creating constraints that you don't want,
then you can turn it off.
Personally, I normally turn it off
once I've placed all my widgets.
That way, I get its' help when laying them out to start with
but then I take back control
to put the finishing touches to the layout.
Now, keep in mind that autoconnect
will only affect the widget that's currently being moved.
So, any other widgets in the layout won't be affected.
Alright, so the next thing we need to add
is a box where users can type their text.
Now, whenever you want a widget to allow data entry,
you'll probably wanna use one of Text Field's widgets.
In this case, we're gonna use a multi-line text widget.
And we can see we've got this Multiline Text over here.
So, we're gonna drag one of these over to the right
of the screen and we're gonna place it
roughly below the TextView.
I'm gonna drag that over,
and as I drag it over you can see there's
a good visual representation, a good indication
if you like, of where the constraints will be added.
Just by the dotted lines,
bearing in mind we can always change those later.
So I'm just gonna leave it there for now.
And you can see now that I've done that,
Our constraint this automatically been added to the left
and to the right of our Multiline Text.
So, that was autoconnect in action
again, as it created the constraints
but keep in mind it doesn't always create all
the constraints you want.
The good thing is, though,
that creating constraints manually is so easy
that it's not really worth spending too much time
trying to drop the widgets onto the layout exactly.
In fact, it can get very fiddly
to get this Multiline, edit text widget
to be constrained to the TextView,
which is what we wanna do.
The layout designer seems to prefer
to constrain it to the left edge of the screen,
and you can see in my case, it constrained it
to the left and to the right.
Now, autoconnect may have created a top constraint too.
It didn't in my case, but it may have for you.
It really depends on whether you get
the guidelines before dropping the widget.
It doesn't always manage to work out what you want,
so, consider it a nice feature
but make sure you always check to make sure
you have the constraints that you actually wanted.
Now, in this case, I don't want the text field
wondering up the screen.
It should always start below the title.
So, the way to do that is to make sure that there's
a constraint from the top of the text field
to the bottom of the title's TextView.
So, I'm gonna drag the top circle up to
the bottom of the title and obviously,
you'll only be doing that if autoconnect
didn't do that for you.
And obviously, it didn't do that for me either.
So, I'm going to drag it from the top
of the Multiline Text to the bottom of the TextView.
And, by the way, if it did create a constraint
at the top of the screen, you would have needed
to delete that first, by waiting for the red circle
to appear above the constraint handle.
But, as you saw in my case, we didn't have a top constraint.
Now, when working with these constraint handles,
it's actually worth waiting a second
once the mouse pointer is over the circle.
Once you see the handle flash, then you can start dragging.
I've had problems if I started dragging early
and it can end up dragging the entire widget,
rather than creating a constraint,
so, it is usually best to wait.
Alright, so the next constraint on the text field
is to anchor it to the right edge of the layout.
Now, that way, it can be resized as the orientation changes
or different size screens are used.
Now, in my case, I've already got it constrained
to the right hand side but
I'm just gonna delete that again anyway,
and then I'm gonna constrain it again by dragging over
to the right edge of the layout.
Alright, so the final constraint should now be
from the left edge of the text field
to the right edge of the TextView.
So, what I'm going to do is delete that constraint
by clicking it, then I'm going to drag
from the left edge of our text field
to the right edge of our TextView.
Now, to keep it centred horizontally in it's space,
we wanna use the inspector to set both
the left and right margins to the same value.
So, I'm gonna click on that to make sure
that it's selected and I'm gonna use 16 dp,
bearing in mind that because we've created a new layout,
the default has been reset back to 8
for the default margins.
You could change that if you wanted to to 16.
The dropdown over here, though, also click on that,
gives us the most common margin settings
but you can actually type in different values if you want.
You've seen me do that in the past.
but, I'm going to select 16 for the left,
and 16 for the right margins.
And, again, as we talked about, setting the value
you want in the default margins button,
saves having to set each margin individually.
The constraints will be created with a default margin.
And, by the way, I generally create constraints
in the blueprint, but you can also drag the constraints'
circles in the design, if you prefer.
That's useful if you're short of screen space
and have turned off the blueprint.
Alright, so let's finish this video here now.
In the next video, we'll continue on enhancing this layout.
We're gonna add two buttons
to the bottom right of the layout.
So, I'll see you in the next video.