Welcome back, everyone. In the last two videos,
we had a look at the constraint layout chains
and saw how we can position widgets in the space available.
You'll need to do something very similar for our RecyclerView layout.
Each row of the RecyclerView will display three columns from the database;
the task name, the start date and the duration.
The widgets will need to line up with the headings we've already defined.
Here's a challenge that will give you a chance to practice creating a chain
in the ConstraintLayout. That's right, a challenge.
Create a new layout called task_durations
_items,
using a ConstraintLayout as the root element.
The layout will contain 3 text widgets.
You can give them any IDs you want.
But if you use different IDs to the ones I'm going to use,
you'll need to make sure to use your IDs in the code when we come to write it.
The IDs that I'll be using are, from left to right,
td_name, td_start
and td_duration.
Use a chain to layout the 3 TextViews horizontally,
then set their margins so that they line up with the headings
in our task_durations layout. Hint:
These TextViews will be very similar to the ones we just created.
For my solution, I'm going to start by copying the previous layout file.
I'm going to use it as the basis for this one.
Right click taskdurations.xml, and choose copy.
Then right click the layout folder, and choose paste.
The new name will be task
_durations_items
.xml.
Be careful now, both layouts look identical
and android studio doesn't always open the new file.
Make sure you open task_durations_items
before continuing.
I suggest closing task durations,
so you don't make changes to the wrong file by mistake.
We don't need the RecyclerView in this layout,
so we can delete it.
All the IDs need underscore heading deleting from the end.
But doing that in the design view can be problematic.
Android studio will attempt to rename all occurrences
of td_name_heading
and the other widgets
that includes where they appear in the original file.
If you choose to let it rename them all, the original file will be wrong.
If you don't let it rename them,
the IDs in the constraints will be incorrect.
It's much easier to make changes to the xml
rather than working in the layout designer.
So click the text tab to view the xml.
We can use the search and replace function to replace
underscore heading with nothing.
That will fix up the IDs in the constraints as well.
So edit,
find,
replace then enter _heading
in the top search box,
make sure the replace box is empty, and then click
replace all.
Also, look out for things like the words box being ticked,
that will only match whole words, which obviously wouldn't work here.
Okay, back in design mode.
That's looking pretty good.
We don't want the text to be bold
and we need to remove the background attribute from all three widgets.
Remove the bold attribute. And in all attributes,
delete the background.
The only other change is to the text attribute,
and we have to change each widget separately.
Select td_name.
There's another change for this widget.
We need to remove the top margin
or the rows will be spaced out too much in the report,
so set the top margin to 0.
We don't want any text to appear
that will come from the adapter when we're using this layout in our RecyclerView.
To make the layout easy to work with though,
we'll put some text into the tools text attribute.
The one with the spanner.
Cut the entry for the text attribute,
and paste it into the tools text attribute.
Remember to press enter or click back in the text attribute
or android studio might undo the change.
Do the same for the other two widgets.
That's the layout just about done.
There's an easy way to check how it works without having to run the app
each time we change anything.
Open up the task_durations layout
and select the RecyclerView widget.
This has a tools attribute called list item.
If we set that to the task durations items layout,
the RecyclerView will show that layout inside this one.
Use the symbol, and then select task_
durations_items in the dialog.
That's neat. And it makes life a lot easier when you're creating layouts
that have to work together like this.
Our widgets appear to line up perfectly,
that's why we set the recycle view margins on the left and right to 0.
You may prefer to give it margins of 8dp
and set the task name left margin to 0 instead.
That's something you can play around with once you've got the app running.
We're using a toolbar in the app,
so remember to select the constraint layout
in the component tree and set layout behavior attribute
to app bar scrolling view behavior.
Using the symbol and selecting from the list is much easier than typing it in.
It's very easy to forget that step.
If your layouts overlay the toolbar,go back into them
and set that attribute on the outermost layout.
Another mistake that's easy to make is to forget to set the layout
to wrap content.
We'll be using our task_durations_itemslayout to display items
in a RecyclerView.
If we leave the height set to match parent,
each row of data will fill the screen.
The display gives an indication of that.
Notice, we've only got a single item
appearing in the RecyclerView.
Switch back to task durationitems.xml
and change the layout height attribute of the ConstraintLayout
to wrap content.
Back in the task_durations layout, we get several items appearing.
Once you know to look for that, you're less likely to forget to change the layout.
Of course, as you can see here,
you may not see the change straight off.
You may have to restart android studio after making the change.
That's a bit annoying. But the good news is, you'll never see several items
when it's set to match parent.
So it's still a good reminder even if it's a bit buggy at the moment.
Okay. That's the portrait layouts finished.
There's one other thing I want to show you in task_durations_items.
This layout doesn't stand alone.
It's going to be displayed in a RecyclerView
in the task_durations layout.
We can get the designer to reflect that by adding another tools attribute
to the constraint layout.
In all attributes,
find the show in tools attribute,
and use the symbol to choose the task_durations layout.
The designer will render this layout as it will appear
inside the other one.
That can be useful, but be careful.
Both layouts now look almost identical again,
and it can be very easy to start making changes to the wrong one.
In the next video, we'll create the landscape versions. See you there.