(introductory music)
(typing sound)
(Tim Buchalka )Alright, so continuing on.
Before we actually get into the layout designer,
you want to make sure that Android Studio
is using the Android view for the project pane.
So to see whether you are or not,
you come over here to the left hand pane, here,
and by the way, if you've got a screen
that looks similar to that,
just click on the Project tab
to open up the pane there.
And, you want to make sure
that Android is selected.
If you're in a different view,
things may look a little different.
So, you want to make sure that you're
in Android view which is the,
usually the best view to be in
when you're actually working with Android code.
You can work in project view if you prefer,
but some of the dialogues that appear
in creating layouts, for example,
actually are different in the two views.
And I'm gonna mainly be using Android view
for this course,
and we'll only switch to Project view
when it's necessary to work with a few files
that don't appear in Android view.
Alright, so now that everything's set up,
we need to go to the res folder
and expand layout.
I'm gonna open that up.
Here's the res folder, I'm gonna expand that,
and there's our layout folder,
expand that as well.
Now this res folder, by the way,
is where all the app's resources,
things like images and so forth, live.
So it's the files in here,
including all the sub folders,
that can't have capital letters in their names.
I'm gonna start by opening this activity
_main .xml file,
by double clicking it.
Now, I could have just clicked this tab
at the top here if I wanted to instead.
But if you close it,
you may need to know how to open it again,
and that's how, by double clicking it over here.
So we now get the layout designer
with the design and a blue print.
Now on a small screen you can toggle them
on and off using these two buttons up the top here.
You've got Design and Blueprint, so I can select
just Design, or just Blueprint,
or Design and Blueprint.
So depending on how much screen real estate
you've got, you may or may not want to turn those off.
(clicking sound)
Now the icons on these buttons, by the way,
have changed from the previous version
of Android Studio,
and there's nothing to say that they
won't change again.
Now, if you hover your mouse pointer
over any of the buttons though,
you'll get you'll get a tool tip
that briefly describes what they do,
and that can be a very good way
to make sure that you're clicking the button you want,
whatever icon it happens to use.
So, I can hover over that,
Select Design Surface as you can see,
and I can either click on it there,
and that brings up the little pop-up menu,
and choose which one I want.
Just click somewhere else
to get rid of the menu.
Alright, so that's very useful
if you want to experiment with things.
But, we're gonna be looking at
most of the buttons on the tool bar anyway.
So as well as toggling off
either the design or the blue print,
we can also make more room
by closing the project pane,
and that leaves more screen space for our layout,
so I normally do close it
when working on the layout designer.
So, I'm gonna come over here
and just click on the project tab
there, to the left,
and that gives us, in this case,
the designer and the blue print
showing on screen at once.
And, again, we can come up here
if we wanted to and toggle to have
either one of them or both of them.
I'm gonna leave both of them on.
So make sure now that you've got
your screen set up like mine,
with both the designer and the blue print showing.
We're gonna talk about what they are.
So firstly, the designer,
that looks like a real phone.
It gives you a preview
of what your design's gonna look like
when you run the app.
So that's this one obviously on the left side.
Now, the one on the right hand side,
well, that's the blue print.
So, think of that as sort of schematic diagram.
So, it shows the relative position
of things in the layout,
but doesn't attempt to show
exactly what they look like.
Everything's represented in the blue print
by an outline.
Now, there's an important side effect
as a result of this.
The computer's got much less work to do
when it renders the blue print,
compared to rendering the designer.
So that means that you'll find things
work smoother if you use the blue print
to layout your design,
especially on a slow computer,
or one without much memory.
Now, in this version of Android Studio,
the blue print also shows the constraints all the time,
and that's these little zipper things
that you can see here to the right-hand side.
Where as in the designer,
they only appear when you move the mouse
into the design.
And you can see now that I'm in the designer,
it's now showing them.
As soon as I move away they disappear.
Now, for that reason, if you have a problem
and want to provide a screen shot
when you post a question in the Q & A section
of this course, you'll make our job easier
if you include the blue print in the screen shot.
Now, personally I normally work
with just the blue print
and toggle the designer on
when I want to check what it looks like.
So consequently, for this video,
I'm actually gonna leave them both showing
in this video and future videos
in this section of the course.
Okay, so the other button that I want to mention for now
is the auto connect button,
and that's the button in the tool bar
that looks a lot like a magnet.
You can see this one over here,
and I'm just gonna hover my tool bar, my mouse
over the tool bar, to see the tool bar tip.
You can see that if I hover over it,
it says Turn On Autoconnect.
Now, this can be a nice feature,
but it can sometimes be annoying.
At the moment, you can see that it was turned off
because I've got the option now
to hover over to turn on autoconnect,
and you can see that when I clicked it
the slash that was through the magnet
has now disappeared,
and that's telling me that that's now on.
If I hover my mouse over there again,
to toggle, I can turn off autoconnect.
There's a little slash that appears
through the picture of a magnet now.
But, I'm actually gonna leave it on
for the moment though, by clicking on it again,
and we'll see what it does in a minute.
But let's start out by getting rid of
the Hello World textview widgit.
So, I'm gonna select it by clicking on
either of the images. So either of the images
in the designer
or the blue print, or alternatively,
I could also do that in the component tree.
Now, my component tree is not showing at the moment,
so I can come down here and click
on this little option here,
and that will show the component tree,
which is a list of views that are in our design.
So to delete the Hello World,
I can click either of these, or I could also click over there,
but noting that that's now highlighted
in the component tree
When I've clicked that,
and incidentally clicking on a space
outside the images deselects it.
So, if you ever want to deselect something
just do that, and you can see that
no matter which way I click
I can get it selected and it updates
either the component tree
or the designer and/or blue print,
depending what you've got on the screen.
So, making sure that you've selected
the textview widget,
I just want to talk about,
briefly, about this blueprint
and how, if you look really carefully,
it almost appears that the blue print
looks like a pair of of punk rock denim jeans,
and the zippers also appear
when I move my mouse over the design.
We talked about that before.
But, what we're gonna do now is delete this,
and to do this I'm just gonna press the del key
on my keyboard,
and you can see that's now removed it
from the designer, the blue print,
and also from the component tree.
Alright, so we're gonna add an image view.
So, what we need to do is
use your operating systems file manager
to find the jpeg files
that we talked about previously,
that you hopefully have downloaded by now.
I've actually downloaded both of them
to my desktop.
So, I'm just gonna open up finder on my Mac,
go to my desktop, and I've actually created
a sub folder called images.
And if I just bring this over into the window now,
you can see that I've got my two images
showing there, ball_100x100 and ball_640x480.
So, what I'm gonna do now is
select both of those files,
I'm gonna right click those, and select copy,
and obviously, if you're on a Windows
or Linux machine, you'll do whatever is similar.
It would probably be control C
on Windows or Linux.
We want to copy those and we want to paste them
directly into our project.
And to do that we're gonna go back
into Android Studio now.
In my case, because I've closed the project pane,
I'm gonna open that,
and I'm gonna make sure that I'm in the res folder
and then down when here we want expand
the drawable folder,
because that's actually where we want
to paste them. So I'm going to
right click on this drawable folder
and choose paste.
And it's asking whether I'm sure that I want
to copy those files into the folder
that it's gonna be going into.
You can see there at the end, res drawable.
I want to click on OK
because I want to do that.
And noting now that the two files have now
have appeared in the drawable folder.
And, obviously you can confirm there
that both of those files haven't got
any capital letters in the file names.
And I knew that, but if you happen to be using
your own images, again, just a reminder
not to use capital letters,
if your using your own images.
Alright, and I've got the drawable folder
expanded, and we can see that those two files
are now showing there.
So, what I'm gonna do is make some more space
by shrinking the project pane,
so let's go ahead and to that again,
clicking on project to close it down,
leaving just our constraint layout to the left,
and also our designer and blueprint views.
Now, the ImageView widget is
in the images section in the widget palette
Now the palette's not open for me at the moment,
so I'm gonna click on this option here,
the little tab, and you can see
that that brings the palette open.
And that will also toggle, so you can click on it again
to actually hide it if you want to do that.
And to hide it again, incidentally,
if you want to close it once you've opened it,
you can just click on that little button there,
and that closes it down.
But I'm gonna leave it open,
because what we want to do is get access
to the ImageView widget.
As I mentioned it's in the images section
over here to the left, and click on images and you can see
there's our ImageView widget.
So, once I've done that, I'm gonna hold down my left mouse.
I'm gonna drag it as I would normally drag
an item on a computer.
You can drag it and drop it either
on the designer or the blueprint.
Note that Android Studio cleverly shows
its position on both
the designer and the blueprint.
So, I'm gonna start by dropping it
in the top left hand corner.
Now, notice that line, or notice the lines
that'll appear once I get close
to the top and left edges.
And, you can see now that we've got a line,
a horizontal and a vertical line,
in the top left hand corner of the image,
and I'm still holding down my mouse button
at this point, and I'm gonna release
the mouse button now.
Once I do that you'll get this pop-up,
this resources dialogue.
Now what I can do,
I can either start typing the name of the image,
in this case, ball, in the box at the top,
or I can scroll down
and find the image that I'm looking for.
And, obviously, in this case,
we've only got a few images,
and they're appearing right at the top here,
but in a complex project,
you might have to do some scrolling to find it.
And by the way, when I click it
there's a neat preview that will show up
to the right hand side that actually shows you
what the image is going to look like
and confirms the picture itself.
So, what I'm gonna do first is click on the ball 640x480,
that's the one that we're gonna be using at this point.
I'm gonna click on OK,
and we should find the image now appears,
which it has, in the designer and the blueprint.
Now it's top left corner will be roughly
where we dropped the ImageView
when you first dragged in onto the layout.
Now, one of the things that has changed
a few times is the exact behaviour
when you drop an image onto the layout.
The point here is that you're learning
how this layout designer works,
and how to create layouts that look like
what you want.
So, you might get slightly different behaviour
on your screen at first, but that's fine.
We're gonna be looking at how you can position
things exactly where you want them,
so don't worry if things do look a little different
at the moment.
So over in the top right, here,
is what used to be called the inspector,
so I'll continue calling it that.
You can see that there's constraints set
to the left and to the top here.
We've got these little lines that hover
to the top and then to the left.
Now, they were set automatically,
and they reflect the lines that appeared
when I dropped the image. Alright, so what I'm gonna do is
delete that ImageView,
and then we're gonna go through it again
to show how the behaviour changes,
depending on where you initially
dropped the widget.
So, I'm gonna select the ImageView,
and I can select it, either with the,
either by clicking on the ImageView
in the component tree, or by selecting the image
anywhere from the designer or the blueprint,
and then I'm gonna press delete
or the del button,
and that removes it from our screen,
as you can see.
Now, this time what I'm gonna do
is drop the ImageView widget
at the centre of the screen.
So I'm gonna grab it again and go right down
to the centre of the screen,
noting that I've moved it around a little bit
until I have the lines on the top,
left, right, and below now.
We've got four lines showing on the screen there.
So basically, what that means is, with
those lines showing,
both the vertical and horizontal lines,
sort of going through the image,
that should mean that the image
is now centred vertically,
as well as horizontally.
So, I'm gonna release the mouse.
It's going to ask us for the name again.
I'm gonna choose ball_640x480,
and I'm gonna click on OK.
Now, the difference is quite subtle.
But this time there's constraints
in all four edges.
You can see over here in the inspector,
top, left, bottom, and right
have all got lines there.
Now, as I said, don't worry too much
if your screen doesn't match mine exactly.
We're gonna see how to create these constraints
rather than relying on them
being created automatically.
In fact, I'm also gonna explain
what constraints are,
because I've used that word a few times now,
and really haven't explained what it means.
In fact, it may not even be apparent to you
what I'm referring to.
So, let's delete them.
Now, there's a couple of ways to delete constraints.
We can either do it in the layout or in the inspector.
So, what I'm gonna do is delete the top constraint
by clicking on this circular constraint handle,
as you can see this up here,
in the middle of the ImageView's top edge.
Notice that when I hovered over it
with the mouse, it turned to red,
and after a few seconds the tool-tip appears
saying delete connection. Now that only happens
if you selected the widget.
So, if you don't see those circles,
click on the ImageView first
to select the ImageView,
and then hover your mouse over to the constraint.
And I can press the del button
to actually delete that constraint,
or I can just click on it again,
and by clicking on it
that actually deletes the constraint.
So, you can see that the image
moved down a little bit,
and the line that was appearing here
in the inspector has now disappeared.
Okay, so we've deleted the connection,
and we can there's no longer a constraint
set in the inspector. So, in fact, we've now only got
three constraints at the left, right,
and bottom of the widget.
So, you can see them here, these lines here,
left over here, right, and then bottom,
and obviously in the inspector
we can see the equivalent view of what's left.
But there is another way to delete them,
and that's to use the circles in the inspector.
So, I'm gonna come over here.
Let's go ahead and do that,
Let's delete the right and the bottom ones.
So, I'm gonna come over here,
and just click on that,
noticing how it turned into an x there.
So click on delete and do the right one
and then click on the x now, as well,
and that's left only the left constraint.
That's the only one that's there now.
Then I can go ahead if I want to
and I can just hover over
the left hand constraint,
click on the button to delete it.
And you can see, we've now got no constraints left
for our images,
and we can also see there's no lines
in the inspector, showing that there
aren't any constraints.
So, basically, what this means is that
our image is now unconstrained,
and that means there is nothing to keep
it in place on the screen.
Now it is sort of appearing in the centre,
but, and this is important,
that's only because it has to appear somewhere.
So, imagine that you're creating a collage,
by placing a load of photographs,
maybe some magazine articles, things like that,
onto a large piece of card.
You get everything nicely positioned,
but you haven't used any glue.
So, as soon as you pick the card up,
everything's going to fall off,
and that's because there's nothing holding
all the photos and articles in place.
So, thinking about layout without constraints,
as being just like that.
So, we've got an image on the screen,
but there's no glue to fix that image in place.
So, what constraints are, well, they're like glue,
because they fix the widget in place.
Without constraints, the widget will, effectively,
fall off the screen when you run the app.
Now, of course it won't really fall off the screen.
It will actually be positioned on the screen,
in fact, in the top left-hand corner
of the screen.
But, if you've got several unconstrained widgets,
they'll all appear at the top left.
So, what you'll do is get one on top of the other.
Alright, so we're gonna finish the video
in a moment, but firstly,
notice on either the designer or the blueprint
there's these little handles in each
of the four corners of the image view,
these one's here.
And, notice when I move my mouse there
they actually change, and you can see if I hover over there
it says resize view.
And when I actually click on into there,
the mouse pointer changes to the normal
resize pointer for whatever operating system
you're running on.
So, let's actually just go down here to the bottom,
and depending on what you can see
on the screen there, you might find
that the entire image no longer fits the designer,
because we've removed all the constraints,
but just select one that you can.
What I'm gonna do is select the bottom right one
so it might take a little bit
of fine tuning to get to exactly where you want.
I'm gonna move this,
and I'm just gonna drag so it occupies
you know, around about a quarter of the screen,
like so, then release the mouse button.
So, I suggest what you do now,
before you start the next video,
is just practise resizing the image
using the four handles.
You can see now, it's a little bit easier to get access
to all four now,
just so you're familiar with the concept
of resizing images,
and you'll be ready to go for the next video.
Alright, so this video has become
quite a long one.
I'm gonna finish the video here now.
In the next video we're gonna talk
more about constraints and resizing widgets.
So see you in the next video.