[MUSIC PLAYING]
MURAT YENER: Hi.
Welcome to the second MAD Skills series on Navigation.
In this episode, we'll take a look at another use case
where UI components such as action bar, bottom tabs,
or a drawer are used to navigate between different parts
of an app.
So how do we integrate Navigation
with these UI components?
Through click listeners to manually trigger
Navigation actions?
No.
No listeners required.
Instead NavigationUI plus can help
you to navigate between different destinations
by matching destination and menu ideas.
Let's dive in and see how that works.
In the previous navigation series,
Chet developed an app for tracking donuts.
But what goes well with a donut besides the second donut,
is coffee, so we should really add functionality
to coffee as well.
If you want to follow along, you can download this report,
which contains all the changes on the donut tracker app
to start with NavigationUI.
To add this feature, I can copy the donut related classes
into a new package and rename them.
This might not be the best approach for a real app,
but helps us quickly add coffee tracking functionality
to the existing app.
With these changes, I also need to update the navigation
graph with the new destinations, and actions from the coffee
fragment to coffee dialogue fragment,
and from selection fragment to donut fragment.
I'll use these destination ideas later.
With the navigation graph updated,
we can start to tie things together and enable navigation
to selection fragment.
The app currently has an Options menu which does nothing.
To make it do something in the home auction selected function,
I need to call onNavDestinationSelected
for the selected menu item, and pass in the nav controller.
This function will navigate to the nav destination associated
with the given menu item, as long as destination and menu
item IDs match.
Now that the navigation controller
knows about the many items, I match the menu item IDs
with the destination IDs, which I created earlier.
With this, Navigation is able to map the menu
items with the destinations.
The app now navigates to selection fragment.
Next, let's configure the app bar respond
to navigation [INAUDIBLE] too.
We would like the title to be updated and show
a back button when we are on the selection fragment.
First, I need to add an app bar configuration object, which
is used by the Navigation drive to manage
the behavior of the navigation button
in the upper left corner of your app.
This button changes behavior depending on your destination
level.
For example, when you are at the top level destination,
the up button is not displayed since there is no higher level
destination.
By default, the start destination of your app
is the only top-level destination,
but you can define multiple top-level destinations.
For example, in our app, I can at both
donut list and coffee list destinations
as top level destinations.
To do this, I go to the main activity class
and get an instance of their controller and the toolbar.
Next, I validate whether the said
support action bar function is called,
and update the tool bar reference
path to this function.
To add Navigation support to the default action bar,
I called the set up action bar with now controller function.
This function expects two parameters, the NavController,
and the app bar configuration.
Next, I over write on support Navigation up function,
and call navigate up with app bar configuration on nav host
fragment to support up Navigation,
or showing the menu item depending
on the current destination.
Now I navigate to the selection fragment,
and you can see that the label is updated,
and the back button is shown, which
will let our users go back to where they come from.
This doesn't look too bad so far,
but the app doesn't have a way to navigate to the fullest
fragment.
I'll fix that next.
I'll start with I think bottom tabs.
To do that, I had the bottom_nav_menu_vml,
and declare two menu items.
NavigationUI relies on the item IDs
to match the destination IDs from the navigation graph.
I also said the icons and the title for each destination.
Now that the main items are all ready,
I add the bottom navigation view to the layout of main activity,
and set bottom_nav_menu, which I created earlier,
as the menu property of bottom navigation view.
To wire up the bottom tabs, I pass the nav controller
to button navigation by calling the setup
with NavController function.
To keep things more organized, let's do that in a new method
and call this method in onCreate.
Notice, I didn't call any navigation action
from the navigation graph.
Actually, the navigation graph doesn't even
have a route to the coffee list fragment.
Like I showed earlier with the action bar,
button navigation view automatically
handles the navigation for us by using
matching IDs of menu items and navigation destinations.
This looks great, but if your device has a large screen,
bottom tabs might not offer the best user experience.
To fix this, I'll use another layout file
which has a qualifier to target larger, wider devices.
This layout already has a toolbar
and a fragment container view, similar to the default activity
main layout.
I need to add the navigation view,
and also add nav drawer menu is the menu attribute
of the navigation view.
Next, I'll lay the divider between navigation view,
and fragment container view.
With this, the navigation view is always
on screen on wide screen devices,
instead of the button navigation view.
Now that the layout is ready, I create and nav drawer menu xml,
and add the donut list and coffee list destinations
as a part of the primary group.
As the final menu item, I add the selection fragment
destination.
Now that the layouts are ready, let's switch the main activity
and set up the drawer to work with the nav controller.
Similar to what I did for bottom navigation view,
I create a new method and pass the nav controller,
and the navigation view by calling to set up
with nav controller function.
Finally, I'll add a call to this method in onCreate.
Now when I run the app on a wide screen device,
I see that the navigation drawer is set up with the menu items,
since the menu item IDs matched the destination
IDs in the navigation graph.
Notice how the back arrows is automatically displayed on top
left as I navigate.
If you want to, you can change app bar configuration
to include the coffee list as a top level destination as well.
That said, well, at least for this episode, donut tracker
app didn't need bottom tabs or a navigation drawer,
but with the new functionality and destinations,
NavigationUI help us greatly to organize
the navigation in the app.
We didn't really need to do much,
except for adding the UI components,
and matching the menu item and destination IDs.
In the next episode, we'll see how
to implement conditional Navigation to enable or disable
navigating to coffee list.
So make sure you stay tuned for the next episode,
or I guess in YouTube terms, make sure you
subscribe to the channel.
Thanks for watching.
Go add Navigation and NavigationUI
to all your Android apps, and I'll
see you in the next episode.
[MUSIC PLAYING]