Category Archives: Navigation component

Navigation refers to the interactions that allow users to navigate across, into, and back out from the different pieces of content within your app. Android Jetpack’s Navigation component helps you implement navigation, from simple button clicks to more complex patterns, such as app bars and the navigation drawer. The Navigation component also ensures a consistent and predictable user experience by adhering to an established set of principles.

Parts of Navigation component

  • Navigation graph: An XML resource that contains all navigation-related information in one centralized location. This includes all of the individual content areas within your app, called destinations, as well as the possible paths that a user can take through your app.
  • NavHost: An empty container that displays destinations from your navigation graph. The Navigation component contains a default NavHost implementation, NavHostFragment, that displays fragment destinations.
  • NavController: An object that manages app navigation within a NavHost. The NavController orchestrates the swapping of destination content in the NavHost as users move throughout your app.

As you navigate through your app, you tell the NavController that you want to navigate either along a specific path in your navigation graph or directly to a specific destination.

The NavController then shows the appropriate destination in the NavHost.

  • The Navigation component provides a number of other benefits, including the following:
  • Handling fragment transactions.
  • Handling Up and Back actions correctly by default.
  • Providing standardized resources for animations and transitions.
  • Implementing and handling deep linking.
  • Including Navigation UI patterns, such as navigation drawers and bottom navigation, with minimal additional work.
  • Safe Args – a Gradle plugin that provides type safety when navigating and passing data between destinations.
  • ViewModel support – you can scope a ViewModel to a navigation graph to share UI-related data between the graph’s destinations.

In addition, you can use Android Studio’s Navigation Editor to view and edit your navigation graphs.

Source: Navigation – Android developer docs

Navigation component – Bottom navigation bar

In this chapter of the Jetpack Navigation Component tutorial we are going to talk about how we can use bottom navigation bar to navigate in our app.

This chapter will cover how to add a bottom navigation bar to the app. It means, we will create the menu items, and use the defined destinations, which are already available in the navigation graph.

Then, as an extra, we will check how we can open a fragment, where we don’t need the bottom navigation.

So let’s start coding. 😎

Continue reading Navigation component – Bottom navigation bar

Follow and like us:

Navigation component – Managing back stack

In this chapter of the Navigation Component Android tutorial we are going to learn how can we manage the back-stack in our app. First we are going to add the SplashFragment. After that, we will check how we can handle it in the back stack. Then we will remove Fragment_4 from the back stack. So, when we press the back button, then the Fragment_1 pops up.

This tutoiral is about how to use the JetPack Navigation Component to handle the fragment’s, activity’s navigations, argument and actions in our app centralized. The sample app contains 6 fragments, the main activity and a Navigation Drawer.

In the very last chapter we have learned how we can handle dialog and how we can get back from it the result.

For this chapter we have prepared a starter project. This project contains already the SplashScreen, which will be firstly visible for the user, when they open the app.

Continue reading Navigation component – Managing back stack

Follow and like us:

Navigation component – Dialog fragment

In this chapter of the Navigation Component Android tutorial, we are going to learn how to open a dialog fragment and how to get back the result of the user’s action.

This tutoiral is about how to use the JetPack Navigation Component to handle centralized the fragment and activity navigations, arguments and actions in our app. The sample app contains 5 fragments, the main activity and a Navigation Drawer.

In the very last chapter we have learned about, how we can save the state of the fragment using a ViewModel.

For this chapter we have prepared a start project. This project contains already the RecyclerView and the new fragment, which will be the dialog fragment. Using this dialog we will add new items to the RecyclerView.

 

Continue reading Navigation component – Dialog fragment

Follow and like us:

Navigation component – Save state using ViewModel

In this chapter of the Navigation Component Android tutorial we are going to learn how to save the state of the fragment using ViewModel.

This tutorial is about how to use the JetPack Navigation Component to handle the fragment and activity navigations, argument and actions in our app centralized. The sample app contains 5 fragments, the main activity and a Navigation Drawer.

In the very last chapter we have added the Navigation Drawer and we implemented the top-level fragments as well. In this chapter we are going to learn how to save the state of the fragments using a ViewModel.

We are going to save the content of an EditText in a variable, which is declared in a ViewModel. Then, if we navigate back to this fragment, the content should be still there.

So let’s start coding. 😎

Continue reading Navigation component – Save state using ViewModel

Follow and like us:

Navigation component – Navigation drawer

In the very last chapter (Passing data) of the Navigation component tutorial, we were talking about how we can pass data between fragments, when we click on a button. In this chapter we are going to talk about how we can use Navigation component together with Navigation Drawer.

NavigationView (Navigation Drawer) is an easy way to display a navigation menu from a menu resource.

This is most commonly used in conjunction with DrawerLayout to implement Material navigation drawers. Navigation drawers are modal elevated dialogs that come from the start/left side, used to display in-app navigation links.

Continue reading Navigation component – Navigation drawer

Follow and like us:

Navigation component – Passing data

In the very last chapter we have implemented the Navigation Component in our example project. Now we can open the next fragments by clicking on the buttons.

But what if we want to pass data for the next fragment. In this chapter we are going to learn about passing data between fragments.

Continue reading Navigation component – Passing data

Follow and like us: