So in this video, we're going to have a look at
using a ListView to display something
a bit more complex than just a single text widget.
Now you can of course, display any other values
from the XML that you want but I've chosen to show
the name of the application, the artist and the summary.
So here's the challenge.
You wanna create a ConstraintLayout containing
three TextView widgets, arranged one below the other
so that they match the image you can see on screen.
You wanna call the layout list_record.
Now the TextViews should have the IDs tvName,
tvArtist and tvSummary with the appropriate capitalization
and all three should grow in height to match their contents.
Now the artist TextView should also be able to grow wider
if necessary, to accommodate longer artist names.
So you wanna make sure that all the necessary constraints
are created so that the widgets will appear
in the correct position when the layout's display
and that will remain below each other.
So experiment with the font sizes and bold
so that the text will look similar to what you can see
in the screen with that image.
All right, so that's the challenge.
See how you go, pause the video and complete the challenge
and I'll see you when you get back.
Pause the video now.
All right, so I'm going to start by ensuring
that I've got the layout folder expanded,
you can see here I've done that.
And then I'm gonna right click on the layout folder,
click on new and select layout resource file.
And if you recall from the challenge,
the file name we want is list_record.
We root element, we're dealing with ConstraintLayout
so it should be ConstraintLayout.
I'm just gonna specify enough or top enough characters
until that's specified in, double click it as you saw there.
Everything else is fine on that point
so I'm just gonna click on okay.
And that's obviously showing on the screen there now.
Now I'm just going to close down the project pane for now,
taking there's a bit more space,
and I'm gonna start by setting the default margin
because most margins are gonna be 16 dp.
So I'm gonna come up here to the default
and specify 16 as the default margin.
And I'm also gonna make sure autoconnect is off,
you can see there that I've got the slash through it.
So that autoconnect is off.
Next, we're gonna drag three TextViews into the design.
Now I'm gonna show one way to constraint the widgets
to get the effect we want, but it's not the only way.
For as long as your constraints keep the TextViews
where they should be and allow them to grow
without overlapping, then that's fine.
All right, so let's go through and add three TextViews.
All right, so we're going to start off now.
I'm gonna go straight in the first view,
or the first TextView to the top left and right
inches of the layouts.
I'm gonna go ahead and do that.
So left first then top, and then right.
Then we set to default margins to 16 which is correct,
for left and right but for the top margin,
I'm going to actually change that to eight,
so it's a little bit closer towards the top.
Then the ID for this one, instead of TextView,
it's gonna be tvName.
And we wanna set its width to match_constraint.
And that's how we can fill the layout
horizontally if necessary.
Now the layout height, that's gonna be set to wrap_content
so that the TextView can go down the screen
to accommodate all the text it contains.
And you can see there, that's already set to wrap_content
so I don't need to make a change.
Now, for the text size, you're not restricted
to the values that appear in the dropdown by the way,
so I come down here to text size and I click on that,
you don't have to select one of those,
instead, you can actually type it.
So I'm gonna come up here and just type in 20sp
which is a reasonable size of presenter.
And finally when I come down here on the text style
and click on B which is bold, you can see
that's appeared bold now in the design.
So basically, we got match_constraint, wrap_content,
size of 20sp now.
Just typing it again, I'm not sure what happened there.
But 20sp, and you can see the text is now larger,
so that's correct and we are still bold.
All right, so moving down, the next widget,
we click on that, next TextView, this one,
we're going to have the ID of tvArtist.
Now its top edge should be constraint
to the bottom edge of tvName, so let's do that first.
So top edge constrained to the bottom of tvName
and also, the right edge should be constrained
to the right edge of the layout.
I'm gonna go ahead and do that.
Now, I'm not gonna constraint the left edge to start with
as it's something that you need to watch out for here
because this TextView is constraint to the right edge
of the layout and its width at the moment
is set to wrap_content, the text,
and it's gonna appear up against the right edge
of the screen and the widget will expand
to the left if it needs to.
So that's fine, just be careful if we change
the width to match_constraint now
so it's similar, I'm gonna change in the width now,
to match_constraint.
Now, only use match_constraint for the layout width
or layer height if it got a constraint set
at both of the edges.
Now for layout, and let's go with the set
to match_constraint, which I've done here now,
then you need to constraint the left and right edges.
If layout height is set to match_constraint,
then the top and bottom edge should be constrained.
And if you think about it, match_constraint
means that the size of the widget is constrained
between the two boundaries.
With one of the boundaries isn't the fall end,
it's really hard for anything to work out
what the result should be.
But you'll often get away with that for the width,
but you could do it for the height, you can get out results.
Widgets overlapping others, widgets is a common symptom
of using match_constraint when only one edge is constrained.
Now, I'm just gonna change to widget to match_constraint,
let's see how to use it properly here.
Now, we need to constraint the left-hand edge
to the left of the layout so that both edges
are constrained.
Now, we did have the TextView positioned
at the right-hand side which kind of the effect we wanted.
Note that the TextView fills the width of the screen.
Let's just go ahead and do that, constraint it to the left.
So I can see now that's the TextView
fills the width of the screen.
I'm gonna take a different approach though,
I'll position the text to the right of the TextView.
Now, there's actually a quick way to do that
using the text alignment attribute.
And we can come down here and see that,
textAlignment, there's five options there.
So the first two here, they actually align
the text to the left.
The difference though is that the first case
for right to left languages.
Now this middle button, that's set as the text
in the TextView and the last two over here,
they right align the text, again gathering
for right to left languages.
So if you choose the one with the vertical bar
on the end here, that's what we're gonna be using,
so we click on that.
So I touched on that in an earlier section.
There's two approaches to changing the alignment
of something and we use an image in the earlier example.
You can align the widget within the layout,
which is what we did to TextView to start with,
or you can align the widget's contents
inside the widget which is what we're now doing.
There's often no difference between the two approaches,
they're just different ways to achieve the same effect.
Now, before we constraint the third TextView,
I wanna get this from the same right to the left
largest tvName to make sure that that's specified,
16, which is correct.
But a top margin of zero.
So I'm gonna go ahead and do that.
Now the reason these TextViews have internal paddings
and there's no need to have top margin here.
For most rows, the name will be over to the left
and the artist over to the right,
so there's really no need in this particular case,
the space them apart.
And lastly, a text size of 18sp is probably sufficient here
so we'll do that and the other thing we'll do
is just making sure that it's set to bold.
Okay, so that's tvArtist.
Now the third one, third TextView,
we're gonna call that tvSummary.
I'm gonna click on that ID, tvSummary.
Now, it's gonna have its top head constrained
to the bottom edge of tvArtist.
And its right and left edges constrained to the layout.
So let's go ahead and do that.
So I'll do the right left first.
And as I mentioned, we're gonna set the top edge
constraint to the bottom edge of tvArtist.
We wanna make sure layout width is set to match_constraint.
Now, the default font size of 40
is probably okay for this one.
I'm gonna set the top margin to eight.
That's a little bit closer.
All right, so I'll click over to the XML
and just make sure that it's formatted.
Over the last few times I've done that,
I haven't needed to do anything.
It's all nicely formatted, so that's good.
Okay so now that we got a view to use to display
the fields of our feed entry objects,
it's time to create our own adaptor
to extend the basic functionality of the array adaptor.
Now if you remember from the discussion about how
the ListView and adaptor worked together,
the adaptor provides the ListView
as a populated view to display.
Now, the current and array adaptors, probably quite easy
to understand because it uses a single TextView,
as the view that it sends to the ListView to display,
but here we've got three different TextViews,
so how does that actually work?
Let me just open the project pane,
and have a list_item.xml.
Now when we set up the TextView in the list_item.xml view,
we created that just to contain literally a single TextView.
You can see over there appTextView.
So that was pretty straightforward.
The array adaptor just uses this XML to create a Textview
and then it puts the objects text into it
before sending it to the ListView.
But go back to our list_record.xml.
Here, we've got these three TextViews,
but they're all contained within the ConstraintLayout view.
You can see over there the component tree.
So ConstraintLayout and there's the three TextViews.
Controls in that to the list that is (mumbles)
is literally just a text too.
So basically, ConstraintLayout to this particular case
for list_record.xml, that's also a view.
So technically, it's a view group,
but a view group is really just another kind of view.
Now the ListView which it is quite happy to be given
a ConstraintLayout for the view it should use,
and that it will display the ConstraintLayout
including any other widgets that it contains.
So keep in mind that when we talk about the adaptor,
sending a view to the ListView, you can either set
a single widget, such as the TextView
that we're currently using, but it can also send back a view
that contains other views, that's we're about to do
for list_record.xml.
So this view will happily display any view that it's given
even if that view contains other views.
So what we're gonna do with out custom adaptor,
is change the text in each of the TextViews
and send them all to the ListView, packaged inside
the ConstraintLayout view.
So we'll create our custom adaptor in the next video.