Welcome back. We've got the two portrait layouts that we'll need for our report.
Now we need to create the landscape versions.
I'll work through changing task durations
and leave task durations items as an exercise.
I won't go through it in this video, because it's just more of the same.
I will, however, include the layout and the source code for this app
in case you have any problems.
Okay. Working with the task durations layout,
we create a landscape variant
using the second button in the menu bar,
the one that looks like a phone being rotated.
Use the drop down and choose the option create landscape
variation.
This layout is going to have an extra text view to show the task description.
Drag another text view into the layout.
It's often easier to drag it to the component tree,
in cases like this where the layout's already full.
Set its ID to td_description
_heading,
and create a new string resource called td_text_
description with the value Description.
Now things can get a bit messy,
and I suggest you don't even try to set the constraints by dragging the handles around
deleting a text view would have been easier.
Which is why I suggested you should create the landscape layout first.
Removing the description widget to create a portrait version
would have been easier than adding it here.
But you may well have to do something like this. So let's have a go.
The component tree is much easier to work with.
Select the td_name_heading widget,
then go to all attributes
and expand layout constraints.
The End_toStartOf
constraint has to go to a new widget
instead of to the start widget,
that's because we're inserting the description between the name and the start date.
I'll copy the current value to save how you type it later.
Type in @+
id/td_description
_heading
for the End_toStartOf constraint.
Ignore the design, it's still going to look weird for a while.
Okay. Select the td_description_heading
in the component tree
and set its Start_toEndOf constraint
to @+id/
td_name
_heading.
Set its End_toStartOf
constraint to td
_start_heading, which is the one that we already have in the clipboard.
It also needs a baseline constraint
So set Baseline_ toBaselineOf
to @+id/
td_name_heading.
It's filling its layout at the moment.
So set the layout constraint horizontal weight to 2.
To complete the chain,
select td_start_heading
and set its Start_toEndOf constraint
to id td_
description_heading.
It now looks a lot tidier.
We still need to set the padding and the margins for the new description widget.
The padding will be 4dp for all,
and the layout start and end margins should be 4dp.
Set the background attribute to colorButtonNormal,
use the ellipsis, and remember that we don't
want the android name space version,
and finish it off by setting the text to bold
and the text alignment to left.
We can get rid of the attributes now
to give us more space to admire our layout.
That wasn't too bad.
It would have been very frustrating
to try doing that by dragging the constraint handles.
Fixing up the constraints in the attributes pane instead is much easier.
If the ordering in the component tree isn't right,
drag td_description_heading up to just below the name heading.
Although you may have put it there to begin with.
Okay. Are we happy with the landscape layout? Well, almost.
We set the horizontal weight of the new description widget to 2,
which means it should be the same width as the task_name_heading,
but it isn't. That's easy to miss.
It's mentioned in the documentation we looked at, but it's easy to overlook.
The weights, horizontal or vertical,
only have an effect when the widget's set to
match constraint in the appropriate direction.
To make the horizontal weight work for the description,
we need to make sure its layout width is set to
match constraint.
The other headings shrink to make room,
and now the layout looks the way we want it to.
Finally, make sure you set the constraint layouts,
layout height attribute to match parent,
if it isn't already.
Okay. Creating a landscape version of task durations items
is exactly the same.
Use the button to create a landscape version,
then follow these same steps to add the description.
Then follow the same steps as before to add the description.
Its id will be td_description,
so you can use the same id as I have.
But I'm going to leave that as an exercise,
so you can practice what we've just done.
I won't be going over it in the video. Watch this one again if you get stuck.
I will add the layout to the source code for this video,
so it's available if you want to compare yours to mine.
When you're finished, everything should line up in the portrait and landscape layouts.
There's a pattern to the margins and padding.
In task durations layouts,
all the widgets should have their start and end margins set to 4dp.
The head of the chain, the name heading in TextView on the far left,
should have its top margin set to 8dp
and the padding should be set to 4dp for all.
In the task durations, items layout
all the widgets should have start and end margins of 4dp
and the start and end padding should also be 4dp.
Any other settings and things probably won't line up.
In the next video, we'll create the RecyclerView adapter
to provide data for the report. I'll see you there.