[MUSIC PLAYING]
CHET HAASE: Welcome to the second episode
in the Navigation series.
Today, we're going to learn how to navigate
to dialogue destinations.
So I have a problem.
I like donuts, a lot.
But I also have a bad memory.
I like to remember the donuts that I enjoyed
and the donuts that I don't want to have again,
but how do I have that information available
if I don't remember?
I know, let's build an app.
So I envision this application that has two screens in it.
One is a list of the donuts that I've enjoyed, or not,
and the other is a simple form where I can edit information
about each of those donuts.
But there's a special thing here,
I want that editing screen to actually be a dialog.
I want it to pop up on top of the other UI.
Now, I'm used to the Navigation component
being able to navigate to different fragments that
swap in and out for each other inside the NavHostFragment.
But this is a different situation.
There's going to be a list of donuts and a dialog writing
on top, so how does that work?
So it turns out that the Navigation component also
enables navigating to dialogs, not just
the fragments that are swapping in
and out of the NavHostFragment.
So why don't we take a look at some code now, build an app,
and let's see how this works.
First, I'll show how set up the basics in a new application,
then I'll show the app that I wrote so you
can see where it's all leading.
In Android Studio 3.6 and later, you
can select one of the templates to give yourself
a head start with the Navigation component project.
I like to do this because it adds all the infrastructure
for the stuff I need for Navigation,
and then I can just remove the pieces that
don't apply to my situation.
So let's do that now and create a basic activity.
So we'll create a new Android Studio project.
Select basic activity.
Call this NavSample, and then wait for that to come up.
All right, so now our project is all loaded.
Let's take a look at the Navigation graph.
Go down here and see that it has created
two destinations for us.
Both of these are fragments, which is great,
but it's not what I needed.
I want to navigate to a dialog.
So in order to do that, first of all, let's create that dialog.
Let's go into the layout resource directory,
we'll create a new resource file.
We'll call this my dialog.
Inside of my dialog, so we have a constraint layout.
I'm just going to add a text view as a placeholder here.
And we're very cleverly call it Placeholder.
I will constrain it to live within the center
of its container.
All right, our resource is created.
Now let's create the code that inflates that resource.
So we'll create a new Kotlin file class.
I'll call this MyDialog.
Class, MyDialog.
We're going to extend Bottom Sheet Dialog Fragments.
And we're going to override onCreate view.
But instead of returning whatever the superclass wants
to create, we're going to inflate from that resource file
that we created.
We're going to call it inflator dot inflate dot
R dot layout dot my dialog.
We're going to inflate it into the container that
was passed in.
We'll pass false.
And we're all set.
So now we can return to the Nav graph
and we can create a new destination here.
So we're going to create a new destination
and we're going to create it of this MyDialog.
And you'll see that it is creating
a fragment- we actually want to create it as a dialog.
I've found this to be a little unpredictable.
Sometimes it magically knows that it's a dialog,
and sometimes it doesn't.
So we're going to go ahead and create that destination here.
But then quickly go into the XML file and say, actually,
this one is a dialog.
And then we're going to go back to the Design view.
We're going to create an action that leads us to that dialog.
And now we have a couple of different actions
there, which is fine.
All we're doing is defining the edges in the graph,
we're not telling it when to trigger
Navigation along those edges.
For that, we go into first fragment
and we can see that by default the template gave us
code here that navigates us to the second fragment.
What we're going to do is replace that with the action
that we just created.
And we're going to say, actually,
I want to navigate to MyDialog.
So now we can build and run.
So it built. It's installing our application.
Launching it.
And now we can see that default first fragment
that we start from.
We click on the button and we navigate to the dialog.
See this little tiny placeholder down there?
That is our bottom sheet dialog fragment popping into place.
It is not going into the NavHostFragment
as is the default behavior of most net fragments
that you navigate to.
Instead, it is navigating to that dialog that exists
outside of that container.
All right, so that was our sample app.
Now let's go take a look at the donut tracking app
and you'll see how it works in practice.
So now we're in our donut tracking app
and we can go to the Navigation graph.
And we can see that there are two destinations here.
And just like before, in our sample app,
we have the default destination, the home destination,
and then we have the dialog destination
that we're going to.
And the way that we trigger that is, in the code
for the RecyclerView we have a couple
of different ways of getting there.
One is, when the FAB, the floating action button
is clicked, then we navigate using directions
that we set up in the Nav graph to the dialog fragments.
Then we also have the ability to navigate
there to edit one of the items.
So the thing we want to do in the donut app
is, we want to be able to enter new information.
So if they click on that FAB, we want to enter information
about a new donut.
If they click on a existing item in the list,
then we also want to be able to edit the information
in that existing item.
And that happens here.
So we create the DonutListAdapter
with two lambdas.
One of those is for editing a donut,
and the other is for deleting one of those donuts.
So if we take a look at that constructor,
then we can see the lambdas are passed in here.
And we can see that when someone clicks on the appropriate item,
then we call that lambda for editing.
And in the onEdits, then we navigate appropriately.
So now we can run our application.
Now we can click on the FAB, and that
will allow us to enter information about a new donut.
New donut.
And I can type information about that,
or I could just give it a rating.
And that adds it as an item in our RecyclerView.
And if we click on this item, that calls that lambda
that we were looking at there.
And I want to add information in here
and say, fantastic experience.
And then click on Done and it will add that information
to the database.
It will update the information.
That's it for today's episode, we
saw really quickly how to build a new application
for Navigation component and how to navigate to a different kind
of destination, a dialog.
And not just another fragment that swaps in and out
inside the NavHostFragment.
In future episodes, we will continue building
on the donut tracking application,
because it is so important.
And how to add other features from Navigation component
along the way.
[MUSIC PLAYING]