Alright, so let's go through the
solution to the problem that we talked
about at the end of the last video.
So the widgets grown as much as it needed,
and that's because there's no constraint
to prevent it from doing so, and because
also it's set to wrap_content. Now if we
didn't have the buttons on the screen,
that would probably be OK because we
could make it scrollable, but we really
don't want it going behind the buttons
as it's doing right now. So to fix it, we
need to constrain its' bottom edge. Now
ideally, I'd have done that first and
that's because now I can't constrain the
bottom edge to the buttons. The edit text
widget's in the way. Now it's sometimes
possible if the bottom constraint
handles visible, but even then it's very
fiddly. So it's generally a good idea to
set constraints before adding content. It
may be possible to resize it by dragging
the resize handles up the screen, but
sometimes the resize handle isn't
available either - they're off the bottom
of the screen. So what I suggest you do
here, is to delete the text, set the
constraint, then paste the text back in,
and that would ordinarily be the easiest
way to sort this out. However, it doesn't
let me demonstrate how match_constraint
works quite as effectively as what I'm
going to do. So in other words, I'm not
going to do it the easy way. So what I'm
going to do instead, is change the
vertical sizing to fixed. So I'm making sure
the editText is selected. I'm going to
click on these vertical lines until the
straight lines appear, on the inner lines
I should say, til the vertical lines
appear, or the straight lines appear,
which is fixed, and if it doesn't shrink
enough, which it hasn't in my case, you
need to also change the layout_width. So
if we change our layout_height to 200 dp,
that should be enough for us to do what
we need to do, and press Enter. And you
can see now that we've got some space
between the bottom of the editText and
the buttons. In other words, the bottom
constraint handle's now visible. Alright,
so at this point we can set the bottom
constraint of the editText to the top
of the buttons. Now it doesn't really
matter which button we choose, but it
sort of seems logical to use the Cancel
button. Now the OK button's already
constrained to Cancel, so that sort of
makes the Cancel button a,
sort of, key widget. So for that reason,
I'm going to constrain the bottom of the
edit text widget to the top of the
Cancel button. Now remember that you have
to drag to the constraint handle on the
destination widget. In previous versions
of Android Studio you could just drag to
a point anywhere along the edge, but
that's no longer the case. So I'm just
going to drag from the bottom of the
edit text, drag over to the top of the
Cancel button, and you can see that our
edit text has now moved. Now that I've
done that, it's easier to see why I had a
problem, why I had problems a minute ago.
I set the height of the edit text widget
to wrap_content and as soon as I set it
back to wrap_content again,
we end up having the same problem and
that's because the widget now grows down
past the buttons again. Now I've
mentioned earlier in this section that
the match_constraints setting was like
match_parent, but that it's different
because it respects constraints. Now as
you can see with what I've done, wrap
_content doesn't respect constraints.
What we really want here is match
_constraint instead. Now I'm going to
click on the vertical inner lines twice
to set the height to match_constraint,
or I could just as easily have
come here and selected match
_constraint. But I'm going to do that
by clicking that twice, from fix and then back
to match_constraint and notice that when
I've done that, we've now got some space
between the bottom of our widget and the
top of the buttons. Now I also want to
make sure now that the width itself is
set to match_constraint as well, so I'm
going to go ahead and do that here,
because that's what we want here. In
landscape mode, the edit text can get
wider rather than being a fixed width. So
as you can see here, the match
_constraint has fixed this problem. Now if
you hadn't already guessed, I used wrap
_content there
deliberately. So if you're used to the
earlier layouts in Android, then you'll
automatically set wrap_content
out of habit. It's a very descriptive name
for what it does and frankly, old habits
die hard.
Alright so it's coming along nicely
and it's taking far longer to explain
than it would take to do it, but
hopefully it all makes sense and you can
see how the constraints work. As long as
you're patient and wait a second for the handles
to flash, dragging the constraints where you
want them is quite easy. Alright, so
I've tried to show all the constraints
on this next slide, so that you can pause
the video and check that you have
something similar. Now on the left are
screenshots of the inspector pane for
the four widgets, and on the right is how
the designer should appear with all the
constraints showing. Now your widgets may
have different IDs. On these screens my
buttons are called button2 and button
3 but the numbers are assigned
automatically. Now if you've added and
deleted widgets, then the IDs may differ
slightly. Everything else should look the
same, though. Now if you're getting
problems changing the value of any of
the margins, ignore that for now. Just , 140
leave the margin to whatever it's set
to. I'm going to be discussing a bug that
sometimes causes that problem and show
you what to do about it. Alright, so
we've still got the image to add, but
what I'm going to do is finish the video
here, and in the next video we'll add
that image but prior to that, we'll run the
program just to see how it behaves. So
I'll see you in the next video.