(keyboard clicks)
Our app now has two fragments.
One to display the list of tasks in the RecyclerView,
the other to let us edit a task's details.
We finished the last video by displaying
the AddEditFragment in our activity
but the result wasn't quite what we wanted.
Now, in a minute we'll use a FrameLayout
to see how we can add or remove a fragment
without the problem that the fragment widget gave us.
When we use a fragment widget in the layout,
you can't remove the fragment that it was set up with.
So our solution
is to replace the fragment widget with another container
and then swap the two fragments about when the user chooses
to do different things.
Displaying the task or editing a single task.
Let's document it in the google card we looked at earlier.
So we're gonna go back to the browser.
It expands three-quarters of the way down
but you come over here and click on examples,
a quick way to get to it.
Scrolling down there
Examples, you can see on the screen there now.
Looking at the fragment, and it's called layout
in that example, the XML there,
it's got a fragment widget.
Let me just scroll it up a little bit.
But it's also got a FrameLayout placed side by side.
Now, that handles the landscape orientation.
For portrait, this approach uses a separate activity
with its own layout.
I'm not gonna go into details about this approach.
It works fine when you're only displaying data.
In that case, users don't care for that
it might be appearing in different fragments.
Whatever orientation that we´re gonna take to find into
The appropriate fragment displays the data,
the task details in our case.
The way this all falls down though
is when you're allowing the data to be edited.
There's a clue as to why this is a problem
right at the top of the page.
I'm just gonna scroll up to the top again.
It actually talks about here
right in this second paragraph here.
A fragment must always be hosted in an activity
and the fragment's lifecycle is directly affected
by the host activity's lifecycle.
The portrait and landscape orientations
use different activities to display the details.
So they're using different fragments.
They also said that it doesn't matter
when you're only displaying data.
The data is displayed on whatever fragments being used
and everything works fine.
If you try and edit the data
rotating the device results in all the users
changes being destroyed.
There are ways around that
but it quickly gets a bit messy.
So, we're not gonna do that.
We're gonna do something different.
What we're gonna do is have both fragments
in the same layout
and hide the one we aren't using.
Before we start creating
I just want to bring some slides up on the screen
to explain specifically what we're gonna be doing here.
When a task's edited in landscape,
we add the AddEditFragment
to the right hand side of the screen.
Clicking the save button will save the task
and then remove the fragment.
I've coloured the two fragments in green and yellow
to make it clear what's being displayed
when we rotate into portrait.
So here we are in portrait
and you could see that the main fragment's hidden
and we show the AddEditFragment.
Clicking save will now save the task
and remove the fragment
just as in landscape
then make the main fragment visible.
The basic operation then looks like this next slide.
You can see that
that would hide the main activity container
when switching to portrait.
We show it again
when the display's rotated back to landscape.
So, when editing a task or adding a new one,
the AddEditFragment gets shown in the right hand pane
and the left hand pane is hidden
when in portrait.
Okay, so that's what we're gonna do
so let's make a start.
I'll go back to Android Studio
and what we need to work on
is our content
ready to modify rather,
our content and it's called main layout.
I've got that on screen because
we were looking an that in the last video.
At the moment
as you can see there on the component tray to the left
it only contains the fragment
but we're going to place two fragments side by side.
One will be the fragment that we've got at the moment
then next to that we're gonna have a FrameLayout container.
There's more than one way to do this as usual
but I'm gonna try to modify
our existing layout in Android Studio.
If things go wrong,
and the layout design is the most error-prone
part of Android Studio,
don't waste hours fighting with it.
Sometimes frankly,
it's just easy to delete the layout and start again.
So let's start by trying to drag a linear layer,
a horizontal one, into the component tray.
In layouts it says
a linear layout, horizontal.
So I'm clicking on linear layout horizontal
and I'm gonna try and drag it into the component tray.
You can see that when I try and do that
we've got this no entry sign.
Now, depending on your version of Android Studio
it might show that you possibly can
drag this successfully into the design.
But when you try to do that
in this case when I release the mouse button,
nothing actually happens.
Now looking over here to the right
we can see that our layout
and it's called height, is set to match
and it's called parent.
So perhaps that could be the problem.
Maybe there's not enough space left to add anything else.
So you can try changing it to wrap and its called content
and having another go
but it still won't work.
Now as I've said previously, don't fight with the tools.
It's possible that I might be able to get this to work
it might work with your version of Android Studio.
But what I'm going to do
is just create a new layout resource file instead.
I will open the project pane again
and create a new layout and then the layout folder
new
layout resource.
Now I'm gonna call this one delete me
as a reminder that I'm gonna delete it later.
And for the root element
we're gonna make that a linear layout.
So it's like linear layout.
You're gonna click on okay.
Then close the project pane again to make a bit more space.
Now if you look over here in the component tray
we can see that the linear layout is set to vertical.
That happens by default
when you create a linear layout like I've done here.
So we need to change the orientation
to horizontal.
There's a couple of other attributes we need to set
on this linear layout.
First, we want our layout
to play nicely with the app bar.
So we have to set the layout
and it's called behaviour attribute
to app bar and it's called scrolling.
and it's called view when it's called behaviour.
So what I can do there is I'm going to extend it out a bit
I could go over there and find it manually
or I could just type in layout and it's called behaviour
or part of that.
There is layout and it's called behaviour.
I'm gonna click on the ellipses there
and then just type in some text like scrolling
and you can see that finds
what we're looking for there and I can double-click that.
And that gets added to a layout
and it is called behaviour attribute.
That's obviously a lot easier than remembering
the full name of the attribute.
I'm not gonna do this
but I suggest you delete that attribute
when we run the app
just so you get to recognise what happens
if you forget to set it.
The other attribute that
we wanna change here is weightSum.
So I'm just gonna search for that.
You could type in weight and there is weightSum
so I'm gonna click into there.
Now we want each fragment to occupy half the screen
so we're going to give them equal weights.
Whatever values we provide for that fragment will be
a proportion of the layout's weightSum.
We've seen that before in the flicker browser app.
So I'm gonna set the weightSum
for this linear layout to two.
Alright so we've done that now
I'm going to just delete that search box
or delete the contents of it
and just go back to our regular attributes.
Next we need to add our left hand fragment.
Go over here to the common category
and it's also in containers, just out of interest
if you're looking for it.
These categories do change so
don't worry if things move around.
So we're gonna grab a fragment
and we can drag it either into the component tray
or just anywhere here and just release it.
And then we need to choose main activity fragment
from this little pop-up that's just come up.
We will need an ID here
because we'll be getting a reference
to this fragment in our code.
And that's needed when we come to hide the fragment.
So I'm gonna call this one main fragment.
The layout with the layout on it that is called height
should both be set to match parent
and we'll also need the layout weight
set to one.
I'm gonna change that
match parent.
Match parent.
And layout weight should be one
which has been set by default.
But if it is not set to that, you would set that.
Remembering that our layout has a weightSum of two
and this fragment will use half of that.
You can see that it doesn't appear
to have had any effect at the moment,
but that's because there's nothing else on the layout.
When we add the other fragment,
this one will only occupy only half the screen.
Now before adding the next fragment,
notice at this point it just has the text fragment
in the middle of the screen.
You can see that clearly over here.
So that's not quite the same as content that has gone made.
We're just putting it up on the screen there.
You could see that it looks pretty different.
And if you have a look of content main,
As you can see this is showing the no task selected
and also a recyclerview.
The reason that's showing there for our content,
and its called main,
is we actually set the tools layout attribute
over here.
You can see that it's set to at layout
forward slash fragment underscore main.
And that's telling the layout designer to use that
layout when displaying the fragment.
Remember that this is the tools layout attribute
so it's not used when we run the app.
These two are to be together and it is part the design now
but it does make the design look neater or better
as you can see here.
So I'm gonna take a copy of that setting
from the tools layout attribute for our
content that's called main.
Go back to that delete me layout
and we're gonna paste it into the same attribute.
And obviously its a lot easier to see
which widget is which
when we add the second one as well when we do that.
For the second component
we're not going to use a fragment widget this time.
Remember that we can't remove a fragment from this widget.
We saw that earlier when we had
both fragments overlaying each other.
So we need to use a different container
to host the AddEditFragment.
Though Google suggests using a FrameLayout for this,
let's quickly bring up some documentation about that.
You can see that in here under the description
You can see it is described as FrameLayout is designed
to block out an area on the screen
to display a single item.
Now that really sounds like what we want
so I'm gonna add one of these to the component tray.
Let's just go back to Android Studio and do that.
We're gonna add this
best below the existing fragment.
So FrameLayout is what we want.
Gonna have a look in layouts
there's our FrameLayout.
I'm gonna add this one just below the main fragment
in the component tray.
You can move over and see that it's been added below that.
And you can see that
that looks okay already
but check that the layouts
and its called weight, is set to one
Which you can see over here that it is set to
for this FrameLayout.
And now both, we're just using the same value
each one occupies half the available width
of the screen.
Wanna also make sure that the layout width and height
for this frame layout are both set to match parent
which in my case they are.
You'll also need an ID.
This frame will hold the task details
where we're adding or editing a task
so for that reason, I'm gonna call this task
and it's called details
and it's called container.
So that wasn't too much work
it was a lot easier than trying to
modify the original layout.
Now of course, we haven't quite finished.
To update content now that's called main,
the easiest way now would be
just to copy the XML from delete me
and paste it in to content that is called main
which effectively replaces all the XML
that's already in there.
So let's go ahead and do that.
So I'm in delete me, text
I'm gonna select the entire contents of delete me,
go back to content main
go in to text
select it all
I could just delete it or I could just select it and paste
which will override it.
Which you can say that I've done there.
You can go back to design now
and you could see that we got that working nicely.
And you can see over there that
we've got the settings that we've defined
for each as well.
And if you just go back and
check out the text again for that,
You'll notice over here
we've got a warning
hover over that
it says set android base aligned equals false
on this element for better performance.
And I can just click in there
and there's a light bulb that comes up
I can click on that
set base aligned equals false.
That there removes that warning.
So we've seen what aligning the base on the widget means
and Android Studio there
was just suggesting that it's not necessary here
and setting the attribute to false just saves work.
The default value for that property is true
but there's no point of android trying to line up
the base aligns of our two fragments.
They contain completely different layouts for one thing,
which makes spending time learning things up
just a waste of time.
That's the reason that we set that
ultimately to false.
You can see what has happened
when I clicked on the light bulb.
That line was out of there
to the XML.
Alright, if I click back to design now
we're actually done now.
And what I can now do is
delete the delete me layout file.
So I'm gonna do that
cos I've copied the contents over.
That's now deleted and in the next video
we'll start getting the two fragments working together.
So I'll see you in the next video.