<p>The <span style="color: #0000ff;"><strong>Navigation Architecture Component</strong></span>, released as part of Android Jetpack , aims to simplify the implementation of navigation in your Android app. This component and its guidelines offer a new look into how navigation should be implemented, including the suggestion for the use of single-Activity architecture as the preferred architecture for Android Jetpack moving forward.</p>
<h3><span style="color: #000080;"><strong>Principles of Navigation</strong></span></h3>
<ul class="postList">
<li id="b632" class="graf graf--li graf-after--p">The app should have a fixed starting destination</li>
<li id="ca85" class="graf graf--li graf-after--li">A stack is used to represent the navigation state of an app</li>
<li id="2f26" class="graf graf--li graf-after--li">The Up button never exits your app</li>
<li id="331e" class="graf graf--li graf-after--li">Up and Back are equivalent within your app’s task</li>
<li id="7683" class="graf graf--li graf-after--li">Deep linking to a destination or navigating to the same destination should yield the same stack</li>
</ul>
<h3 id="Set-up"><span style="color: #000080;">Set up navigation in a project</span></h3>
<p><strong><span style="color: #0000ff;">Note</span>:</strong> If you want to use Navigation Architecture Components with Android Studio, you must use <strong><a href="https://developer.android.com/studio/preview/">Android Studio 3.2 Canary 14 or higher</a>.</strong></p>
<ul>
<li>Add the following Navigation Architecture Component to your app or module&#8217;s <code><span style="color: #008000;"><strong>build.gradle</strong></span></code> file.</li>
</ul>
<pre><code>dependencies {

 <strong><span style="color: #008000;">//Dependencies for Navigation.</span></strong>
 def nav_version = "1.0.0-alpha02"

 implementation "android.arch.navigation:navigation-fragment:$nav_version" // use -ktx for Kotlin
 implementation "android.arch.navigation:navigation-ui:$nav_version" // use -ktx for Kotlin
 
}

</code></pre>
<ul>
<li>In the Project window, right-click on the <span style="color: #0000ff;"><code>res</code></span> directory and select <span style="color: #0000ff;"><strong>New >; Android resource file</strong>.</span> The <span style="color: #0000ff;"><strong>New Resource</strong></span> dialog appears.</li>
<li>Type a name in the <span style="color: #0000ff;"><strong>File name</strong></span> field, such as &#8220;<span style="color: #0000ff;"><code>nav_graph</code></span>&#8220;.</li>
<li>Select <span style="color: #0000ff;"><strong>Navigation</strong></span> from the <span style="color: #0000ff;"><strong>Resource type</strong></span> drop-down list.</li>
<li>Click <span style="color: #0000ff;"><strong>OK</strong></span>.</li>
<li>Click <span style="color: #0000ff;"><strong>Design</strong></span> to see the Navigation Editor.</li>
</ul>
<p><strong><span style="color: #000080;">The Navigation Editor&#8217;s sections are:</span></strong></p>
<ol class="callouts">
<li><strong><span style="color: #008000;">The Destinations list</span></strong> &#8211; Lists all destinations currently in the Graph Editor.</li>
<li><strong><span style="color: #008000;">The Graph Editor</span></strong> &#8211; Contains a visual representation of your navigation graph.</li>
<li><strong><span style="color: #008000;">The Attributes Editor</span></strong> &#8211; Contains attributes associated with destinations and actions in your navigation graph.</li>
</ol>
<p> ;</p>
<ul>
<li>From the Graph Editor, click <strong><span style="color: #0000ff;">New Destination</span> </strong> <img class="inline-icon alignnone" src="https://developer.android.com/studio/images/buttons/navigation-add.png" alt="" width="22" height="22" />. The <span style="color: #0000ff;"><strong>New Destination</strong></span> dialog appears.</li>
<li>Click <span style="color: #0000ff;"><strong>Create blank destination</strong></span> or click on a fragment or activity.</li>
</ul>
<h3 id="Connect-destinations"><span style="color: #000080;">Connect destinations</span></h3>
<p>Destinations are connected using <strong><span style="color: #0000ff;">actions</span></strong>. To connect two destinations:</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>

<ul>
<li>From the Graph Editor, over the right side of the destination that you want users to navigate from. A circle appears on the destination.</li>
</ul>
<p><img class="aligncenter wp-image-563 size-full" src="https://c1ctech.com/wp-content/uploads/2018/06/nav1.png" alt="" width="305" height="334" /></p>
<ul>
<li>Click and hold, drag your cursor over the destination you want users to navigate to, and release. A line is drawn to indicate navigation between the two destinations.</li>
</ul>
<p><img class="aligncenter wp-image-564 size-full" src="https://c1ctech.com/wp-content/uploads/2018/06/nav_img.png" alt="" width="807" height="718" /></p>
<p> ;</p>
<p>Click on the arrow to highlight the action. The following attributes appear in the Attributes panel:</p>
<ul>
<li>The <span style="color: #008000;"><strong>Type</strong></span> field contains “Action.”</li>
<li>The <strong><span style="color: #008000;">ID</span></strong> field contains a system-assigned ID for the action.</li>
<li>The <strong><span style="color: #008000;">Destination</span></strong> field contains the ID for destination fragment or activity.</li>
</ul>
<h3 id="Modify-activity"><span style="color: #000080;">Modify an activity to host navigation</span></h3>
<p>An activity hosts navigation for an app through the implementation of a <strong><a href="https://developer.android.com/reference/androidx/navigation/NavHost.html"><code>NavHost</code></a></strong> interface which is added to your activity’s layout. The <code>NavHost</code> is an empty view whereupon destinations are swapped in and out as a user navigates through your app.</p>
<p>A default implementation of <code>NavHost</code> is the <span style="color: #000080;"><strong><code>NavHostFragment</code></strong></span> widget which you can add to your layout. We can see an example of this below.</p>
<p> ;</p>
<pre><code><;?xml version="1.0" encoding="utf-8"?>;
<;android.support.constraint.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:id="@+id/container"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 tools:context=".MainActivity">;

 <;fragment
 android:id="@+id/my_nav_host_fragment"
 android:name="androidx.navigation.fragment.NavHostFragment"
 app:defaultNavHost="true"
 app:navGraph="@navigation/nav_graph"
 android:layout_width="match_parent"
 android:layout_height="match_parent" />;

<;/android.support.constraint.ConstraintLayout>;

</code></pre>
<h3 id="Tie-ui"><span style="color: #000080;">Connect destinations to UI widgets</span></h3>
<pre><code>btn_frag1.setOnClickListener(new View.OnClickListener()
{
@Override
public void onClick (View view){
Navigation.findNavController(view).navigate(R.id.action_mainFragment_to_firstFragment);
}
});</code></pre>
<p>Where <strong><span style="color: #008000;">action_mainFragment_to_firstFragment</span></strong> is the action ID from main_fragment to first_fragment.