Alright so in the last video we created
two interfaces, or two layouts. We added
our main TaskTimer application layout
as well as one for the Task List Items.
So it's now time to add the constraints
to our Task List Items layout. Now
there are many ways to do this, but as
long as everything stays where you put
it and survives changes in the screen
size and orientation, then really there's
no one way that's better than any other.
What I'm going to do though, is start by
constraining the top of the tli_edit to
the top of tli_delete so
that may appear level. So I'm going to
select that, and I'm also going to make
sure that the margin is set to zero so
that they appear level. Next we want to
constrain the right of tli_edit to the
left of tli_delete, the right of tli_edit
to the left of tli_delete, and all
margins will be 8dp unless the
constraint is lining something up
vertically. So next the top and right of
tli_delete will be
constrained to the top and right of the
layout. But it's easy to actually do the
right constraint first so the buttons
don't jump up and overlay the TextViews.
So tli_delete, constrain it to the
right, and then we want to constrain it
to the top, like so.
Alright so that's the buttons done. Now
it's time for the TextViews. Now
tli_name, that's going to be
constrained to the left and top of the
layout. Let's do that first -
left then top. And we also want this
right edge constrained to the left edge
of tli_edit, so let's do that
as well. And we also want to make sure
that all margins have been set to 8dp,
and you can see that, in this case here,
we've got all three set to 8dp. So
moving on now,
tli_description, that needs to have its
top edge constrained to the bottom of tli_
name with a margin of 8, so let's do that.
So the top of tli_description
to the bottom of tli_name,
making sure they've got 8dp, which they've
got there. So next I'm going to constrain
its left hand side to
the left of the layout, like so, and for
the right-hand side I'm going to set that
to the left edge of tli_edit. So I'm going to
select this one here, the right edge of
our tli_description. I'm going to set
that to the left edge of our tli_
edit. Now the last thing we need
to do is set the widths of both Text
Views to match_constraint in their
heights to wrap_content. so let's do that.
So tli_name first. The width, we want to
set that to match_constraint, and then we
want to set out the layout height to be
wrap_content, which it is. And
for tli_description,
width needs to be match_constraint and
also our layout_height needs to be set
to wrap_content, which it is. And the other
thing I haven't done here is change the
margin. We want to make sure that all our
margins were set to 8dp. That's
currently set to 0 on the right hand
side. Let's change that to 8dp as well,
and we're basically pretty well done
here. Now all the widgets are constrained
now, vertically and horizontally, and it's
a good idea to check at the top of the
design to make sure there's no warnings,
up here. Now if you leave something
unconstrained you'll get a warning there,
and it'll be showing red and you can fix it
before you run the app and then wonder
why things look out of place. Now just to
show you this I'm going to delete the
right-hand constraint of tli_
delete, up here, just to show you what I
mean.
And notice this comes up with an error
and click on that, and if this doesn't
show then we can come down here and we
can make this a bit bigger so that we
can actually read. Expand it there and
you can see that we've got a message
there - the warning: This view is not
constrained horizontally: at runtime
it'll jump to the left unless you add
a horizontal constraint. So I'll leave
that open temporarily. If I add the constraint
back now, the right of tli_delete
to the right of the layout,
notice that the error automatically
disappears and we've got nothing red
showing up here in the top right hand
corner. And again, be sure that now
you've done that that we have got 8dp as
the margin for the right-hand side still,
which we have here. Alright so that's
the layout finished, and it would almost work
as well. Before I finish the video
though, here's a quick challenge for you.
The challenge is that when you use this
layout in the app as is at the moment,
you'll only see one task at a time
in the RecyclerView. So your challenge
here is to work out why you'd only see
the one item, and as a hint check the
properties on the constraint layout
itself. So pause the video now and just try
that challenge - see if you can figure it
out - and when you're ready to come back
I'll show you the solution. So pause the
video now.
Okay so welcome back. Hopefully you managed
to solve it. The solution here, is firstly
to click on our constraint layout and
not an individual widget. So the layout
_height of the layout, you can see
at the moment, layout_
height, that's set to match_
parent. So it's going to take up the full
screen when it's displayed. All we need
to do is change the layout_
height on the constraint layout to be
equal to wrap_content. As soon as I did
that, the line moves right up to just
below the widgets.
Now when that appeared at the bottom of
the screen, we had a visual indication of
what would happen.
So that's easily overlooked, so
hopefully by making it a challenge you
won't waste too much time on this in the
future. Alright so let's just format
the XML, select it and format it as we
normally do.
And I'll end the video here, and in the
next one we're going to create the
layout that we'll be used to add and edit
the task details. So I'll see you in
the next video.