
<p>This post is about Android Jetpack Navigation and how to set up and work with the Navigation component.</p> 
 
 
 
<div class="wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-a89b3969 wp-block-buttons-is-layout-flex"> 
<div class="wp-block-button"><a class="wp-block-button__link has-white-color has-text-color has-background" style="background-color: #190681;" href="https://github.com/arunk7839/JetpackNavigation"><strong>DOWNLOAD CODE</strong></a></div> 
</div> 
 
 
 
<h4> </h4> 
<h4><strong><span style="color: #000080;">Jetpack Navigation</span></strong></h4> 
<p>Navigation refers to the interactions that allow users to navigate across, into, and back out from the different pieces of content within your app.</p> 
<p>Android Jetpack&#8217;s Navigation component helps you implement navigation, from simple button clicks to more complex patterns, such as app bars and the navigation drawer.</p> 
<p>The Navigation component consists of three key parts that are described below:</p> 
<p><span style="color: #0000ff;"><strong>NavHost:</strong> </span></p> 
<p>The navigation host is an empty container where destinations are swapped in and out as a user navigates through your app. The Navigation component contains a default NavHost implementation, NavHostFragment, that displays fragment destinations.</p> 
<p><strong><span style="color: #0000ff;">Navigation graph:</span> </strong></p> 
<p>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.</p> 
<p><strong><span style="color: #0000ff;">NavController:</span> </strong></p> 
<p>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.</p> 
<h4><span style="color: #000080;"><strong>Creating new project</strong></span></h4> 
<p>1 . Create a new project by going to<span style="color: #008000;"> <strong>File ⇒ New Android Project</strong></span>, select <span style="color: #008000;"><strong>Empty</strong></span> Activity, provide <span style="color: #008000;"><strong>app</strong></span> name, select language to <span style="color: #008000;"><strong>kotlin</strong></span> and then finally click on <span style="color: #0000ff;"><strong>finish</strong></span>.</p> 
<p>2 . Open app-level build.gradle file and add the below libraries under the <span style="color: #008000;"><strong>dependencies</strong></span> section<strong>:</strong></p> 
<p><strong><span style="color: #0000ff;">build.gradle</span></strong></p> 
<pre>dependencies {<br /><strong><span style="color: #008000;"> // jetpack navigation dependency for kotlin</span></strong><br /> implementation("androidx.navigation:navigation-fragment-ktx:2.4.1")<br /> implementation("androidx.navigation:navigation-ui-ktx:2.4.1")<br />}</pre> 
<p><strong>Note: Update the navigation library with the latest version from <a href="https://developer.android.com/guide/navigation/navigation-getting-started">here</a>.</strong></p> 
<h4 id="add-navhost" role="presentation" data-text="Add a NavHost to an activity"><span style="color: #000080;"><strong>Add a NavHostFragment via XML</strong></span></h4> 
<p>3. The below XML file shows a NavHostFragment as part of an app&#8217;s main activity:</p> 
<p><strong><span style="color: #0000ff;">activity_main.xml</span></strong></p> 
<pre><;?xml version="1.0" encoding="utf-8"?>;<br /><;androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"<br /> xmlns:app="http://schemas.android.com/apk/res-auto"<br /> xmlns:tools="http://schemas.android.com/tools"<br /> android:layout_width="match_parent"<br /> android:layout_height="match_parent"<br /> tools:context=".MainActivity">;<br /><br /> <;fragment<br /> android:id="@+id/nav_host_fragment"<br /><strong><span style="color: #008000;"> android:name="androidx.navigation.fragment.NavHostFragment"</span></strong><br /> android:layout_width="match_parent"<br /> android:layout_height="match_parent"<br /><strong><span style="color: #008000;"> app:defaultNavHost="true"</span></strong><br /> app:layout_constraintBottom_toBottomOf="parent"<br /> app:layout_constraintEnd_toEndOf="parent"<br /> app:layout_constraintStart_toStartOf="parent"<br /> app:layout_constraintTop_toTopOf="parent"<br /> <strong><span style="color: #339966;"> app:navGraph="@navigation/nav_graph"</span></strong> />;<br /><br /><;/androidx.constraintlayout.widget.ConstraintLayout>;</pre> 
<ul> 
<li><span style="color: #0000ff;"><strong>android:name: </strong></span>attribute contains the class name of your NavHost implementation.</li> 
<li><strong><span style="color: #0000ff;">app:navGraph</span>:</strong> defines which Navigation Graph will be associated with the Navigation Host.</li> 
<li><strong><span style="color: #0000ff;">app:defaultNavHost=&#8221;true&#8221;:</span></strong> ensures that the Navigation Host intercepts the system back button when pressed.</li> 
</ul> 
<h4><span style="color: #000080;"><strong>Creating Fragments</strong></span></h4> 
<p>4. Let&#8217;s create two Fragments i.e. FragmentA and FragmentB.</p> 
<h5><span style="color: #000080;"><strong>Creating Fragment&#8217;s kotlin file</strong></span></h5> 
<p><strong><span style="color: #0000ff;">FragmentA.kt</span></strong></p> 
<pre>package com.c1ctech.jetpacknavigation<br /><br />import android.os.Bundle<br />import android.view.LayoutInflater<br />import android.view.View<br />import android.view.ViewGroup<br />import android.widget.Button<br />import androidx.fragment.app.Fragment<br />import androidx.navigation.findNavController<br /><br />class FragmentA : Fragment() {<br /><br /> override fun onCreateView(<br /> inflater: LayoutInflater, container: ViewGroup?,<br /> savedInstanceState: Bundle?<br /> ): View? {<br /><strong><span style="color: #008000;"> // Inflate the layout for this fragment</span></strong><br /> return inflater.inflate(R.layout.fragment_a, container, false)<br /> }<br /><br /> override fun onViewCreated(view: View, savedInstanceState: Bundle?) {<br /> super.onViewCreated(view, savedInstanceState)<br /><br /> <strong><span style="color: #008000;"> //get NavController instance</span></strong><br /> val navController = view.findNavController()<br /><br /> val button = view.findViewById<;Button>;(R.id.btnGotoFragmentB)<br /><br /> button.setOnClickListener { <br /><strong><span style="color: #008000;"> //navigates from fragment A to Fragment B</span></strong><br /> navController.navigate(R.id.action_fragmentA_to_fragmentB) }<br /> }<br />}</pre> 
<p><strong><span style="color: #0000ff;">FragmentB.kt</span></strong></p>
<!-- WP QUADS Content Ad Plugin v. 2.0.98.1 -->
<div class="quads-location quads-ad2" id="quads-ad2" style="float:none;margin:0px;">

</div>
 
<pre>package com.c1ctech.jetpacknavigation<br /><br />import android.os.Bundle<br />import androidx.fragment.app.Fragment<br />import android.view.LayoutInflater<br />import android.view.View<br />import android.view.ViewGroup<br /><br />class FragmentB : Fragment() {<br /><br /> override fun onCreateView(<br /> inflater: LayoutInflater, container: ViewGroup?,<br /> savedInstanceState: Bundle?<br /> ): View? {<br /><strong><span style="color: #008000;"> // Inflate the layout for this fragment</span></strong><br /> return inflater.inflate(R.layout.fragment_b, container, false)<br /> }<br />}</pre> 
<h5><strong><span style="color: #000080;">Creating Fragment&#8217;s layout file</span></strong></h5> 
<p><strong><span style="color: #0000ff;">fragment_a.xml</span></strong></p> 
<pre><;?xml version="1.0" encoding="utf-8"?>;<br /><;FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"<br /> xmlns:tools="http://schemas.android.com/tools"<br /> android:layout_width="match_parent"<br /> android:layout_height="match_parent"<br /> tools:context=".FragmentA">;<br /><br /> <;TextView<br /> android:layout_width="match_parent"<br /> android:layout_height="match_parent"<br /> android:gravity="center"<br /> android:text="FragmentA"<br /> android:textSize="30sp" />;<br /><br /> <;Button<br /> android:id="@+id/btnGotoFragmentB"<br /> android:layout_width="wrap_content"<br /> android:layout_height="wrap_content"<br /> android:layout_gravity="center_horizontal|bottom"<br /> android:text="Goto FragmentB"<br /> android:textAllCaps="false" />;<br /><br /><;/FrameLayout>;</pre> 
<p><strong><span style="color: #0000ff;">fragment_b.xml</span></strong></p> 
<pre><;?xml version="1.0" encoding="utf-8"?>;<br /><;FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"<br /> xmlns:tools="http://schemas.android.com/tools"<br /> android:layout_width="match_parent"<br /> android:layout_height="match_parent"<br /> tools:context=".FragmentB">;<br /><br /> <;TextView<br /> android:layout_width="match_parent"<br /> android:layout_height="match_parent"<br /> android:gravity="center"<br /> android:text="FragmentB"<br /> android:textSize="30sp" />;<br /><br /><;/FrameLayout>;</pre> 
<h4 id="add-navhost" role="presentation" data-text="Add a NavHost to an activity"><strong><span class="devsite-heading" style="color: #000080;" role="heading" aria-level="2">Add a Navigation graph</span></strong></h4> 
<p>5. Right-click on the <span style="color: #008000;"><strong>res</strong></span> directory and choose <strong><span style="color: #008000;">New ->; Android resource file</span>.</strong> Set the title for the file and choose <span style="color: #008000;"><strong>Navigation</strong></span> from the <span style="color: #008000;"><strong>Resource type</strong></span> dropdown and then click on <strong><span style="color: #008000;">ok</span></strong>.</p> 
<p><strong><span style="color: #0000ff;">nav_graph.xml</span></strong></p> 
<pre><;?xml version="1.0" encoding="utf-8"?>;<br /><;navigation xmlns:android="http://schemas.android.com/apk/res/android"<br /> xmlns:app="http://schemas.android.com/apk/res-auto"<br /> xmlns:tools="http://schemas.android.com/tools"<br /> android:id="@+id/nav_graph"<br /> app:startDestination="@id/fragmentA">;<br /><br /> <;fragment<br /> android:id="@+id/fragmentA"<br /> android:name="com.c1ctech.jetpacknavigation.FragmentA"<br /> android:label="FragmentA"<br /> tools:layout="@layout/fragment_a">;<br /><br /> <;action<br /> android:id="@+id/action_fragmentA_to_fragmentB"<br /> app:destination="@id/fragmentB" />;<br /><br /> <;/fragment>;<br /><br /> <;fragment<br /> android:id="@+id/fragmentB"<br /> android:name="com.c1ctech.jetpacknavigation.FragmentB"<br /> android:label="FragmentB"<br /> tools:layout="@layout/fragment_b"/>;<br /><br /><;/navigation>;</pre> 
<ul> 
<li><span style="color: #0000ff;"><strong>app:startDestination: </strong><span style="color: #333333;">defines the starting destination. </span></span></li> 
<li><span style="color: #0000ff;"><strong>android:name: </strong></span>shows the name of the fragment that is associated with the destination.</li> 
<li><span style="color: #0000ff;"><strong>android:label: </strong><span style="color: #333333;">contains the user-readable name of the destination.</span></span></li> 
<li><span style="color: #0000ff;"><strong>tools:layout: </strong><span style="color: #333333;">defines the layout of the destination.</span></span></li> 
<li><span style="color: #0000ff;"><strong>action: </strong><span style="color: #333333;">defines the destination to which the user navigates using <strong><span style="color: #008000;">destination</span></strong> attribute.</span></span></li> 
</ul> 
<h4><strong><span style="color: #000080;">Writing MainActivity Code</span></strong></h4> 
<p>6. The MainActivity file contains the below code:</p> 
<p><strong><span style="color: #0000ff;">MainActivity.kt</span></strong></p> 
<pre>package com.c1ctech.jetpacknavigation<br /><br />import android.os.Bundle<br />import androidx.appcompat.app.AppCompatActivity<br />import androidx.navigation.NavController<br />import androidx.navigation.findNavController<br />import androidx.navigation.ui.NavigationUI.setupActionBarWithNavController<br /><br />class MainActivity : AppCompatActivity() {<br /><br /> lateinit var navController: NavController<br /><br /> override fun onCreate(savedInstanceState: Bundle?) {<br /> super.onCreate(savedInstanceState)<br /> setContentView(R.layout.activity_main)<br /><br /> navController = this.findNavController(R.id.nav_host_fragment)<br /><br /> setupActionBarWithNavController(this, navController)<br /> }<br /><br /> override fun onSupportNavigateUp(): Boolean {<br /> navController.navigateUp()<br /> return super.onSupportNavigateUp()<br /> }<br />}</pre> 
<p>In the above code,</p> 
<ul> 
<li><strong><span style="color: #0000ff;">this.findNavController()</span></strong> gives us the instance of NavController.</li> 
<li><strong><span style="color: #0000ff;">setupActionBarWithNavController():</span></strong> Sets up the ActionBar returned by <span style="color: #008000;"><strong>AppCompatActivity.getSupportActionBar</strong> </span>for use with a NavController.By calling this method, the title in the action bar will automatically be updated when the destination changes.</li> 
<li><strong><span style="color: #0000ff;">onSupportNavigateUp():</span></strong> This method is called whenever the user chooses to navigate Up within your application&#8217;s activity hierarchy from the action bar.</li> 
</ul> 
<p>When you run the app it will look like this:</p> 
<p><img class="alignnone wp-image-3159" src="https://c1ctech.com/wp-content/uploads/2022/04/Screenshot_2022-04-06-13-22-59-448_com.c1ctech.jetpacknavigation-473x1024.png" alt="" width="342" height="740" /> <img class="alignnone wp-image-3160" src="https://c1ctech.com/wp-content/uploads/2022/04/Screenshot_2022-04-06-13-23-07-863_com.c1ctech.jetpacknavigation-473x1024.png" alt="" width="344" height="743" /></p> 
<p> ;</p>