Welcome back.
We're going to use a RecyclerView to display our report.
And we'll need a layout to display the data.
It's worth reviewing what we're trying to create
before we go ahead and write the code.
You wouldn't normally have the finished report like the one I'm showing in this slide,
but you will have some sort of specification for how the report should look.
Here we're displaying the total timings for each task by day.
The column headings are also clickable,
and users can tap them to sort the data by the different columns.
The report will be scrollable
because there could be more tasks than will fit in a single screen.
We've seen screens like this before,
using either a list view or a RecyclerView.
We'll use a RecyclerView here.
One thing the RecyclerView lacks
is a simple way to include a header row,
that's our clickable TextViews at the top of the report.
There are ways to add a header by passing different views back from the adapter.
I'm going to take a different approach because the constraint layout
now has a cool feature, called chains.
This is a great layout for seeing how useful they can be
so that's what we'll do.
We're fitting a lot of data on the screen, and it won't all fit in portrait.
The portrait view will leave out the task description,
so we'll need to create a portrait version of the layout as well.
Now, when you're doing something like this,
I recommend creating the landscape layout first.
It's much easier to remove widgets rather than trying to add them,
and that's especially true when using chains.
If you start with the Landscape layout,
you can just delete the Description widget,
then fix up the constraints from the task name to the date.
That's the easy way. So of course, we're not going to do it that way.
We need two different layouts,
with a portrait and landscape version of each.
The main layout will contain the header row and a RecyclerView.
We also need a layout for the RecyclerView to use.
It'll contain the same widgets as the header,
but without the RecyclerView. Let's get started.
Right click on the res layout directory
and create a new layout resource file.
Call it task_durations
and make sure the root element is a constraint layout
before clicking okay.
In the portrait, we're going to display the task name start date
and duration.
In landscape, we'll also have the description,
but we're starting off with the portrait layout.
I'll close the project pane just so we've got a bit more room.
Drag three TextView widgets onto the layout.
Because these TextViews will respond to being tapped, they're going to need IDs.
From left to right, the IDs are
td_
name_heading
td_start
_heading
and
td
_duration
_heading.
To create the type of chain we want horizontally,
the layout width must be set to match constraint for all three widgets.
You can set them all at the same time by selecting all three
in the component tree then changing the attribute.
While we've got all three widgets selected,
make sure layout height is set to wrap_content.
Okay. To create a chain, keep all three widgets selected
then right click any one of them.
I prefer to right click them in the component tree but you can use the design instead.
From the context menu that appears choose chains,
create horizontal chain.
The constraints now appear as chains between the widgets.
You probably won't be able to see them at the moment
because all three widgets are butted up against each other.
Don't worry, we'll sort that out next.
Even though we can't see them in the designer,
we've now got constraints from the name heading widget
to the start heading widget and another constraint back
from the start heading widget to the name heading widget.
And the same between the start heading widget and duration heading widget.
The chain is just two-way constraints,
which we can see by selecting the td_start_heading
TextView
and expanding the declared attributes.
It's a good idea to make the attributes pane wider,
so you can see the full name of the constraints.
That's got a layout_constraintEnd_toStartOf
constraint to td_duration_heading
and a start_toEndOf constraint
to td_name_heading.
Select td_name_heading, and that's also got a constraint
and that's also got a constraint end_tostartof
to td_start heading.
You can't create these two-way constraints by dragging the constraint handles.
You have to use the chain option on that context menu.
Alternatively, you can set them all manually here in the attributes.
We're not quite done.
But I'm going to finish this video by looking at the documentation
to see what google has to say about chains.
The first link is a training document at
developer.android.com/training.constraint-layout/index.html.
The second to last section near the end of the document is
Control linear groups with a chain.
The diagram show what's going on
and also explain the four different types of chains that we can create.
The examples are using horizontal chains
but you can create vertical chains as well.
In fact, you can create a grid by using a combination
of vertical and horizontal chains.
We could have done that for the button grid in the calculator app.
If you want to experiment with that, have a go.
Make a copy of the layout in the calculator app
and create horizontal chains for each row of buttons.
Then create a vertical chain of buttons in the left-hand column.
The button at the top left will be the head of two chains.
It's not obvious that you can do that, but it does work.
The head by the way is the left most widget in a horizontal chain
or the topmost widget if the chain's vertical.
The document mentions that just after number four.
Okay. The other link is a reference for ConstraintLayout.
It's at developer.android.com/reference/android/support
/constraint/constraintlayout.html.
Chain is described about halfway down the document with different diagrams.
I'll leave you to read both documents
and work out what kind of chain we're going to need.
In the next video, we'll finish this layout and create
another one for the RecyclerView to use.
I'll see you in that one.