Alright so let's go ahead now and add
these two buttons to the bottom right of
the layout. Now the buttons will appear
under the Widgets category. So I'm gonna click on
Widgets. Now I'm going to select Button and
I'm going to drag it right down to the
bottom right hand corner. Now notice that
when I do that and the guidelines appear
both horizontally and vertically, when I
release my button, the mouse button,
we've unsurprisingly got constraints on
the right hand side and on the bottom
side. So it's now constrained to the bottom
right of the layout, and in this case,
it's exactly what I wanted to happen. Now
it's pretty cool but only works if you
get those guidelines before dropping the
widget. So let's see if it works out what
to do though with the second button. Now
this second button is going to be the
OK button and will go to the left of
the first one. So the aim here is to
drop it about 16 dp to the left of the
first button. So I'm gonna select that, drag
it over, around about 16 dp to the left
of the first button, and release. Now in
this case, we've only got one constraint,
and actually, what I'll do is I'll delete
that again, and as I try and move it so it's
round about in that area, release it. You
can see it hasn't quite got it right
here, we've got a constraint just at the
bottom at the moment. Now if you don't
get the left-hand button constrained to
the right one, you can just create the
constraint manually and I'm just going to go
ahead and do that. You can see at the
moment, we've only got a constraint from
the button to the bottom of the layout,
so I'm going to constrain it to the
left, constrain the right of the second
button to the left of the first one. And
you can see that we've now got two
constraints. Now even though that's
happened, that's not quite what we want.
The two buttons should be aligned to
each other vertically, and although this
sort of does that, they are still
independent. Now let's put some text in
the buttons so that we can refer to them
as OK and Cancel, and that'll make it a
little bit clearer on what I'm talking
about. I'm going to make sure that the
left button is clicked, which it is. I'm gonna
come up over here into text, then I'm
going to type in OK and just press ENTER,
and you can see that the text has updated
that button. Now be careful when doing
that and use the text attribute, and not
the one below that with the wrench or
spanner before it. Now any attribute you
see in inspector marked with a wrench
is a tool attribute, and that means that
it only affects the display in the
layout designer. Tool attributes are
ignored when the app runs on a device.
Alright, so now if I drag the OK
button up the screen, you can see that
it's no longer aligned with the Cancel
button. Now there's a number of ways that
we can get the effect we want. I could
constrain the bottom of the OK button
to the bottom of the Cancel button, or
perhaps constrain its top to the top of
the Cancel button. Now either of those
would work fine, but when you're dealing
with widgets containing text, it's also
useful to be able to line up the
baseline of the text, rather than the
edges of the widget. Now both our buttons,
rather, are the same size and only
contain a single line of text, so
constraining the tops or bottoms would
work, but I want to show you how to
create a baseline constraint, especially
because it can be a little bit fiddly.
What I'll do first, though, is I'll just change
the text on the other button to Cancel,
making sure that I'm not using the
attribute with the wrench, Cancel. Press
ENTER there to update it,
and go back to the OK button by
selecting it again. Alright, so
both our buttons are the same size and
only contain a single line of text, as I
said. So, we could constrain the tops or
bottoms and that would work, but what I
really want to do is show you how to
create a baseline constraint, again,
because it can be quite fiddly. Now I
said previously that there were four
constraint handles, one on each edge of
the widget, but there's actually a fifth
on widgets that contain text and it's an
oval right in the middle of the button,
but it doesn't actually appear until you
ask for it. So making sure that you've
selected the OK button, which I've done,
and it's got this other little button
down here now, called ab, and I'll just
move the cursor away there briefly so
that disappears. And I can come over
here, you see the ab, an Edit Baseline.
So if I click on that, that
causes the baseline constraint handle to
become available,
and you can see that's now appeared in
the middle of the OK button. Now when I
click that and start to drag, every
widget that supports baseline
constraints gets an oval handle in the
middle. And I'm just going to start that
by just selecting it, and notice now that
in the Cancel button, we've also got that
baseline, and also in the TextView at
the top left hand corner, you can see one
there as well. So I'm just going to
release the mouse button and you can see
that they disappear again. So I'm gonna
hold it again now, and also the
text edit as well, has also got that
baseline, the oval. So what we want to do
is hover over the eye of the oval until
the handle flashes. So I'll just do that . 135
again just to make it clear, so hover
over it until it flashes, then you can
hold, or click your left mouse
button. That then enables that for
dragging, and what we want to do at this
point now, is to drag the oval into the
Cancel button. And just before I do that,
though, it is important to wait for that
flash before you create a baseline
constraint, more so than with the other
four constraints, and you'll discover the
problem for yourself when you start
inadvertently dragging widgets around
the screen. So now you know the solution.
Alright, so I'm still, or still have the
button selected, and I'm gonna drag the
oval from the OK button into the
Cancel button, and then release the mouse
button to create the constraint. So I'm going to go over
and do that, release it, and you can see we've
now got a constraint from the OK
button to the Cancel button. Now by the
way, if there was a constraint from the
top or bottom of the OK button, that
will have been deleted, and that's
because you can't have top and bottom
constraints as well as a baseline
constraint. So in other words, you can
constrain the top and bottom of the
button or you can constrain its baseline.
You can't do both. So notice that the top
and bottom constraint handles have now
disappeared from the OK button. So the
OK button is now constrained
vertically to remain lined up with the
baseline of the Cancel button. Now a
baseline constraint like this is
different to constraining the top or
bottom of the button. In this case, it's
the actual text that lines up. So if the
buttons are different heights, the layout
looks better,
and that's because the text itself is
aligned. Now when it was constrained to
the bottom edge of the layout, that
allowed me to drag it up and down the
screen. The only thing that changed was
the distance from the bottom of the
layout. So now though, it's constrained to
the center button. So if I try to drag
the OK button up and down, you'll find
that nothing happens. I can drag it left
or right, but I physically can't now drag
it up to any higher than the Cancel
button. But even cooler, though, watch what
happens when I drag the Cancel button up
or down. When the Cancel button moves up
and down, the OK button
follows it, and that's because of the
vertical constraint. I can put that back
to where it was now. I might just tidy
this up a little bit by changing the
margins to 16 for both.
Now whether I'd constrained the top, bottom
or baseline, that would still be the case.
The OK button can't be moved vertically,
and that's because it's constrained to
the Cancel button, and when the Cancel
button moves vertically, the OK button
follows. Now notice also, that when the OK
button's selected, up in the inspector,
it shows sort of, like a
downwards arrow to indicate that there
is a constraint, but we can't change the
margin value like you can with the
constraint to the right. So you can see
that there's no facility for me to
change that margin, and that's because
baseline constraints, in fact, don't have
margins. Alright, so let's select the
edit text widget again. You can see at
the moment that it's constrained to the
right-hand edge of the screen. So we've got
this constraint to the right-hand side.
Now, ideally, it should grow as text is
entered, and if you remember from earlier,
that means that we should set the height
to wrap_content by clicking the inner
lines in the inspector. I'm going to do
that in a minute, but first what I'm
going to do is put some text into it, so
you can see what's happening. Now
normally, you'd allow the user to enter
text in there while the app is running,
but to save having to type in a load of
text in the emulator, I'm going to paste
some text into the text property here
instead and press Enter,
and that text is available in the
resources section of the video
so that so you can do that yourself as
well, if you're following along. So I'm
going to come over here to the text, and
again, I'm making sure that I'm not
clicking on the text with the wrench and
I'm going to paste in the text and press Enter.
Now it doesn't expand until the layout
_height property is set to wrap_content.
So if your edit text widget isn't set to
wrap_content, then you'll want to change
it now. But in my case, you can see that it is
set at the moment to wrap_content. Al
righty, so that wasn't really quite
what I had in mind. Now I wanted the
widget to expand to fill its' text, but I
definitely don't want it extending that
far down the screen. So the mini
challenge is to work out why it's done
that and what we should do to prevent
that from happening. So I'm going to end
the video here now. I'm going to leave
you to see if you can come up with a
solution to that problem, and in the next
video we'll start by going through how
to resolve it. So I'll see you in the
next video.