Navigation Drawer with Navigation Component
By: Umang Burman
Tags: Android, Navigation Drawer, Navigation Arch Component, Navigationview

This is an example of Navigation Drawer with Navigation Architecture Component in Android. The Navigation Architecture Component Part of Android Jetpack.

The Navigation Architecture Component simplifies the implementation of navigation in an Android app.

This section begins by providing the guiding principles of navigation as implemented by the Navigation Architecture Component. The principles are followed by Implementing navigation with the Navigation Architecture Component providing the fundamental tasks to implement the Navigation Architecture Component in your app. Finally, you can use it in our legacy Navigation Drawer, depending on your needs for your app:

So Let’s Get Started:

Principles of Navigation. What is Androidx? What is destination, actions and NavHostFragment. Implementation Step-by-Step. Conclusion.

Principles of Navigation

Answer: The goal of any in-app navigation should be to provide a consistent and predictable experience to users. To meet this goal, the Navigation Architecture Component helps you build an app that adheres to each of the navigation principles below:

a. The app should have a fixed starting destination.

b. A stack is used to represent the “navigation state” of an app.

c. The Up button never exits your app.

d. Up and Back are equivalent within your app’s task

e. Deep linking to a destination or navigating to the same destination should yield the same stack.

What is Androidx?

Answer: AndroidX is the open-source project that the Android team uses to develop, test, package, version and release libraries within Jetpack.

AndroidX is a major improvement to the original Android Support Library. Like the Support Library, AndroidX ships separately from the Android OS and provides backwards-compatibility across Android releases. AndroidX fully replaces the Support Library by providing feature parity and new libraries. In addition AndroidX includes the following features:

a. All packages in AndroidX live in a consistent namespace starting with the string androidx. The Support Library packages have been mapped into corresponding androidx.* packages. For a full mapping of all the old classes and build artifacts to the new ones, see the Package Refactoring page.

b. Unlike the Support Library, AndroidX packages are separately maintained and updated. The androidx packages use strict Semantic Versioning starting with version 1.0.0. You can update AndroidX libraries in your project independently.

c. All new Support Library development will occur in the AndroidX library. This includes maintenance of the original Support Library artifacts and introduction of new Jetpack components.

Easy Way To Convert Your App To Androidx

Changes From Previous Version

What is destination, actions and NavHostFragment

Answer: 1. Destination: A destination is any place you can navigate to in your app. While destinations are usually Fragments representing specific screens, the Navigation Architecture Component supports other destination types:

Activities

Navigation graphs and subgraphs — when the destination is a graph or subgraph, you navigate to the starting destination of that graph or subgraph

Custom destination types

2. Actions: In addition to destinations, a navigation graph has connections between destinations called actions.

Destinations and Actions

In the above image, the visual representation of a navigation graph for a sample app containing 6 destinations connected by 5 actions.

3. NavHostFragment: NavHostFragment provides an area within your layout for self-contained navigation to occur.

NavHostFragment is intended to be used as the content area within a layout resource defining your app’s chrome around it, e.g.:

<androidx.drawerlayout.widget.DrawerLayout

xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

android:layout_width="match_parent"

android:layout_height="match_parent">



<fragment

android:layout_width="match_parent"

android:layout_height="match_parent"

android:id="@+id/my_nav_host_fragment"

android:name="androidx.navigation.fragment.NavHostFragment"

app:navGraph="@xml/nav_sample"

app:defaultNavHost="true" />



<com.google.android.material.navigation.NavigationView

android:id="@+id/navigationView"

android:layout_width="wrap_content"

android:layout_height="match_parent"

android:layout_gravity="start"

android:fitsSystemWindows="true"

app:headerLayout="@layout/header_layout"

app:menu="@menu/drawer_menu" />



</androidx.drawerlayout.widget.DrawerLayout>

Each NavHostFragment has a NavController that defines valid navigation within the navigation host. This includes the navigation graph as well as navigation state such as current location and back stack that will be saved and restored along with the NavHostFragment itself.

NavHostFragments register their navigation controller at the root of their view subtree such that any descendant can obtain the controller instance through the Navigation helper class’s methods such as Navigation.findNavController(View). View event listener implementations such as View.OnClickListener within navigation destination fragments can use these helpers to navigate based on user interaction without creating a tight coupling to the navigation host.

Implementation Step-By-Step

Please refer to the be low Repository for Step-by-Step Implementation:

Click on the GitHub Repository of NavDrawer with NavComponent

Conclusion

Hopefully this guide should have helped you in making your Navigation Drawer much more easier as it eliminated the legacy Fragment Manager and Fragment Transaction.