Navigation Jetpack Component With Custom ToolBar Example

 The Jetpack Navigation Component is an Android library that simplifies the implementation of navigation within an Android app. It provides a set of APIs and tools to handle the navigation between different screens or destinations, such as fragments, activities. 

 Lots of benefits are there using Navigation Component like it Simplified navigation setup, Safe argument passing, Default animations and transitions, Back stack management, Deep linking support, Integration with other Jetpack libraries

It has basically three key component :

Navigation Graph: The navigation graph is an XML resource file that defines the logical flow and structure of your app's navigation. It represents the fragments and the possible paths or actions to navigate between them.

Navigation Graph:The navigation graph is an XML resource file that defines the logical flow and structure of your app's navigation. It represents the fragments and the possible paths or actions to navigate between them.

NavHost: The NavHost is a container that displays the destination fragments defined in the navigation graph.Nav Host Fragment define in Activity page

NavController:The NavController is an object that facilitates navigation within the app by handling navigation actionsYou can obtain an instance of NavController using the findNavController() method in an activity or fragment.

if you are interested in depth please go: https://developer.android.com/guide/navigation

So Lets Start With coding :

Create a New project in Android:

Create a new folder res/navigation or easily follow the images:

Crate 2 fragment then navigate using mouse easily will created , here i crated 4 fragment ,and first fragment treated as home fragment. Its look like : 

Make sure code is added in gradle file: 

def nav_version = "2.2.2"

// Kotlin
implementation "androidx.navigation:navigation-fragment-ktx:$nav_version"
implementation "androidx.navigation:navigation-ui-ktx:$nav_version"

Then res/navigation.nav_graph.xml add code :

<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/nav_graph"
    app:startDestination="@id/firstFragment">

    <fragment
        android:id="@+id/firstFragment"
        android:name="com.nipa.navigation.FirstFragment"
        android:label="First Fragment Example"
        tools:layout="@layout/fragment_first" >
        <action
            android:id="@+id/action_firstFragment_to_secondFragment2"
            app:destination="@id/secondFragment" />
        <action
            android:id="@+id/action_firstFragment_to_thirdFragment"
            app:destination="@id/thirdFragment" />
    </fragment>
    <fragment
        android:id="@+id/secondFragment"
        android:name="com.nipa.navigation.SecondFragment"
        android:label="Second Fragment Example"
        tools:layout="@layout/fragment_second" >

        <action
            android:id="@+id/action_secondFragment_to_firstFragment2"
            app:destination="@id/firstFragment"
            app:popUpTo="@id/firstFragment"
            app:popUpToInclusive="true" />
        <action
            android:id="@+id/action_secondFragment_to_fourthFragment2"
            app:destination="@id/fourthFragment" />
        <action
            android:id="@+id/action_secondFragment_to_thirdFragment"
            app:destination="@id/thirdFragment" />
    </fragment>

</navigation>

fragment_first.xml file add code:
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".FirstFragment">

    <!-- TODO: Update blank fragment layout -->

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="This is Home Fragment"
        android:textColor="@color/black"
        android:textSize="25sp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Click for Second Fragment"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        />

</androidx.constraintlayout.widget.ConstraintLayout>
Fragment second : fragment_second.xml
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context=".SecondFragment"
    android:background="@color/colorPrimaryDark">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="This is secod Fragment"
        android:textColor="@color/black"
        android:textSize="25sp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>
    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Click for Third Fragment "
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        />
    <Button
        android:id="@+id/buttonFourth"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Click for Fourth Fragment "
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginTop="10dp"
        app:layout_constraintTop_toBottomOf="@+id/button"
        />


</androidx.constraintlayout.widget.ConstraintLayout>

Crate a main Activity and in activity_main.xml file add below code:
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbarCustom"
            android:layout_width="0dp"
            android:elevation="4dp"
            android:layout_height="wrap_content"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/Widget.AppCompat.Toolbar"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"/>

        <androidx.fragment.app.FragmentContainerView
            android:id="@+id/nav_host_fragment"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:name="androidx.navigation.fragment.NavHostFragment"
            app:navGraph="@navigation/nav_graph"
            app:defaultNavHost="true"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/toolbarCustom"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"

            />



</androidx.constraintlayout.widget.ConstraintLayout>

in MainActivity.kt page add below code: 
class MainActivity : AppCompatActivity() {
    lateinit var navController:NavController
    lateinit var binding:ActivityMainBinding
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
       // setContentView(R.layout.activity_main)
        binding= ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)
        setSupportActionBar(binding.toolbarCustom)
      //  val toolbar = binding.toolbar
        val navHostFragment=supportFragmentManager.findFragmentById(R.id.nav_host_fragment) as NavHostFragment
        navController=navHostFragment.navController
     setupActionBarWithNavController(navController)
    }
    override fun onSupportNavigateUp(): Boolean {
        return navController.navigateUp() || super.onSupportNavigateUp()
    }
}

Thats it . 
If you need full code please click link: https://github.com/nipamaity/Navigation