[MUSIC PLAYING]
CHET HAASE: Hi.
In this video, I'm going to give you a really quick overview
into Navigation Component, which is both a tool and an API
for creating and editing the navigation flows
inside of your application.
Prior to Navigation Component, it was all on you.
You would create the code to handle the UI
event that triggered something, and then you'd
create an intent.
You'd launch an activity.
You do the fragment transition, whatever.
Navigation Component automates a lot of this for you.
You use the tool to create these destination fragments and then
the actions that take you, that navigate you,
between these destinations.
And then in your code, a particular UI event
may trigger one of these things.
And you just say, OK, I've got that action I defined.
Navigate using that action, and you're good to go.
So I want to take you through a quick overview of some
of the classes in APIs that you'll deal with, as well
as a design tool, but let's start out
by creating an application.
One of the great things about recent releases of Android
Studio, starting with 3.6, is that they
come built in with templates that
handle a lot of the details of setting up navigation for you.
You can do it without these templates,
but if you're starting a new application,
it's a lot easier to start with this sort of groundwork.
So we're going to build a couple of applications,
just sort of poke around and see what you get with that.
So if you go into Android Studio, I'm running 4.0 here.
It'll look something similar for you
if you're using a different version.
We'll start new Android Studio project.
I'll just choose basic activity.
We'll set that up.
We'll say NavSample.
It'll launch a window.
It'll load.
It'll build.
So when this finally comes up into being
and everything's ready to go, then we
can go ahead and run it and see what we get.
All right, so we can run the application.
Go ahead and build it, and that will launch the emulator.
And we've got our application.
All right, so we have two fragments here,
two destinations that we're going to navigate between.
We click on the button.
We go to the next one.
We click on the button in that other fragment,
and we go to the previous one.
Next, previous, or we can also hit the Back button.
That's already plugged in to go back
to the previous destination.
Now let's see what's actually going on.
If you go to the Resources folder,
you can click on this new thing with Navigation Component.
We have Navigation Resources.
So if you go into there, you can take a look at NAV graph
and pull up the Design View and you can see what's going on.
So we have first fragment and second fragment.
These are the two destinations in your application.
First fragments, you can click on this
and you see some of the properties there.
The first fragment is set up as the default or the home
destination.
Second fragment is just an additional destination,
and each of these are linked to fragments
that support the content in those destinations.
The other thing you see here are these arrows.
These are actions.
These define the navigation, two different destinations
in your application, and you can do things
like specify the arguments that should
be passed when you navigate between those destinations
using that action.
And this is the action that you will then trigger inside
of your application code.
This does not actually navigate to that new destination,
rather it defines that there is an action that you can
take that will navigate there.
And the logic in your code is going
to trigger when that action takes place.
So the user clicks on a button.
And in the Click Listener, you would then
pull up the information about the navigation
of that destination and then navigate appropriately.
All right, I want to do one other application here.
So let's create another new project.
Let's go in here, and let's go to the Navigation Drawer
activity.
And we'll call this NavDrawer and wait for that to load.
All right, so this one is a little different.
If we go into the Navigation area,
we see there are three destinations defined
but no actions that go between them.
Instead, we're going to use the drawer in this activity
to navigate between them.
So if we go ahead and run the application,
we can see how that works.
So here we are in our activity.
This is the home fragment.
That is the home destination, the default destination when
the activity first starts up.
And you can see that we have an action bar with a menu,
and that pops up the Navigation Drawer.
Now we can click on these, and that
navigates to the destination.
There is a neat mechanism inside Navigation Component that
automatically hooks up those menu items in the navigation
drawer with the destination in the application.
Sort of save you a lot of boilerplate code
for actually triggering those navigation actions.
All right, so I want to look at what
the view hierarchy looks like for this application
in particular.
So if we pull up the Layout Inspectors,
we go to the Tools menu, Layout Inspector.
So here we are in our application,
looking at the view hierarchy.
So the thing I wanted to look at is
what all the different pieces are inside of here.
So if we open this up, we have lots of things going on
in the UI, of course.
All right.
So first of all, lets start with our Content View.
When you do a set content view, it's
sort of everything inside of here.
So take one step down from there.
Drawer layout, that's the UI of your drawer
plus all of the content for your application--
the app bar, the toolbar, all that stuff.
Inside of that is the coordinator layout.
So you can see in the screenshot where
we have that blue outline, that is essentially
the geometry of the thing that we're looking at
just to sort of anchor you in pieces
that we're talking about.
Coordinator layout, that has the app bar layout with the toolbar
inside of it.
Has a constraint layout where the content of your actually--
of your fragments of your activity actually are.
And then the FAB, the floating action button.
And then we have this Navigation View thing,
and that is the Navigation Drawer.
Now, the thing I wanted to look at here--
so we have the constraint layout,
we have NavHostFragment.
So this is an important piece.
This is one of the magic pieces that Navigation Component
provides.
This is the container in which your content is swapped out.
When you navigate between destinations,
those destinations are added into the NavHostFragment.
So it will remove one fragment and it'll
add another inside of that.
So NavHostFragment is something that it creates,
and that is what hosts the content that you then basically
swap in and out as you navigate through your application
during the run of that application on the device.
So NavHostFragment, and then the constraint layout
where the layout actually is where you have your constraint
layout, the text view, whatever it is you have inside your UI.
You have the floating action button, of course,
and then you have this navigation view, which
currently is off to the left.
It is off screen because we haven't triggered the action
bar.
If you actually ask for that navigation drawer to open,
then it will open.
It'll slide over, and we could see that on the screen.
And then inside of that, we actually
have the menu items there that specify
which of those destinations we want to navigate to.
So I wanted to quickly talk about some of the pieces
that we've seen.
I, frankly, found it confusing, all of the different API
pieces that were called some variation on nav or navigation.
So I thought it would be useful to quickly walk
through what some of those pieces are
and how they relate to each other.
So first of all, over on the right,
you see this really quick sketch of what the UI looks like.
You have a toolbar at the top, and then you
have that NavHostFragment that, again,
is the container in which the fragments are replaced as you
navigate through your activity.
And we start out with this destination zero there.
So NavHostFragment, that's the container for the destinations
that navigation component is swapping in and out.
NavController is an internal piece
in Navigation Component that actually does the navigation.
So if you hear of NavController, that's
the conductor of exactly what's going on there.
When you navigate, when you go to a destination,
NavController is in charge of that activity.
NavigationView, this one I found really confusing because it
kind of relates, but it kind of doesn't.
It's not inside the NavHostFragment.
It's not part of Navigation Component.
It existed before Navigation Component
and it's talking about the menu that
is in the Navigation Drawer.
So we're using it in this activity
that we just created, in the application that we were just
playing with.
And when you select the menu items and Navigation Drawer,
it will drive to the different destinations
that we have in our application.
But it's really a separate thing.
It's not part of Navigation Component itself.
Instead, it interacts with the pieces of Navigation Component.
And then finally, NavigationUI.
This is responsible, in the Navigation Component library,
for updating content that is outside NavHostFragment.
So most of what you see in the UI that
is related to the navigation or application
is going to appear inside of NavHostFragment.
But there are other pieces at play here.
There is, obviously, the Navigation Drawer
that we talked about.
But also, what about tabs that contain information
about where you're at?
Like the BottomNavBar, or NavigationView,
they need to know when things have updated.
The NavigationView, of course, needs to be updated.
Its UI, that's currently sitting off the screen,
needs to know that you have navigated to a new destination.
So the NavigationUI is in charge of that part of it.
This was a really quick overview of NavigationComponent,
a way that makes it much easier for you to create and edit
the navigations inside of your application.
There's much more to the tool and to the APIs
that I haven't gone into today, including things
like transition animations, deep links, the ability
to pass args between these destinations.
We'll cover some of that in upcoming episodes,
or you can also check out some of the resources
down below for things that you can read
or examples and sample code that you
can see to see how to do this in your application.
If you like the video, go ahead and like and share,
and subscribe to the Android Developers channel on YouTube.
Thanks.
[MUSIC PLAYING]