[MUSIC PLAYING]
MURAT YENER: Hi again.
Here we are with the third episode of Navigation.
In the previous episode, we added
coffee-tracker functionality, enhanced the user experience
with Navigation UI, and implemented
conditional navigation.
In this episode, we'll see how to organize the navigation
graph by using nested graphs and using the "include" tag
to import other graphs.
This will allow us to modularize the app
and see how navigation works with modules.
OK.
Time to fire up Android Studio and see how
to use navigation with modules.
Let's start with the navigation graph.
Nested graphs can help you group a series of destinations
within a parent navigation graph.
Looking at the navigation graph, the coffeeList
and coffeeEntryDialog destinations
are good candidates to convert into a nested graph.
To do that, I select both fragments by holding Shift,
and select Move to Nested Graph.
Now, switching to the code view, you
can see that a nested graph is simply a navigation
graph inside the root graph.
Navigation between the selected fragments
is moved into the nested graph.
Nested graphs must have an ID.
You can use this ID to create actions
to navigate to the nested graph, but not directly to its child
destinations.
Nested groups have their own start destination,
and don't expose their child destinations separately.
If you double-click on the nested graph, then
you can see the nested destinations and actions
between them.
Instead of using nested graphs, I can also extract the graph
into a new navigation XML file.
I create a new XML file called coffee_graph and move
the contents of the nested graph into this new file.
I can nest this new graph into the other one
using the "include" tag.
Using the "include" tag offers the same functionality
as nested graphs, but lets you use other graphs
from other modules or libraries.
Similar to nested graphs, included
graphs don't expose the list of destinations
in the included graph, which means I need to update the menu
IDs which refer to coffeeList.
I update the menus to use the included graph's ID.
Since coffeeList is the start destination of the included
graph, I can use the graph ID to navigate to this graph.
If you try the app now, everything
should be working as before.
Now that the navigation graph for coffee tracking
is separate, this is a good time to modularize the app
and see how navigation works with modules.
If you want to follow along, you can check out
the repo link in the notes below,
which has all the necessary changes to start using modules.
I create two new modules, core and coffee.
I move all common classes, such as donut, coffee, daos,
database, and other common resources to the core module.
Next, I move all fragments, new models,
and adapter classes used in coffee tracking
into the coffee module.
Layouts and other resources used in coffee tracking
are also moved here, as well as the coffee graph.
Coffee module depends on core module.
Finally, in the app module, I add coffee and core modules
as a dependency.
Note that nothing changes in the navigation graph.
It's not affected from these changes.
Now we fire on the app.
Everything works as it used to, but using modules instead.
With this change, I separated the coffee tracker module
and its navigation from the rest of the app, which
means the coffee tracker module can be used independently
from the donut tracker.
In this episode, we've seen how to create nested graphs
and how to use the "include" tag to modularize the donut tracker
app.
Next episode, we'll take this further
and learn how to use navigation with feature modules.
Be sure to subscribe so you don't miss it.
See you in the next episode.
[MUSIC PLAYING]