<p>Navigating between screens in mobile apps is essential knowledge. We&#8217;ll look at Jetpack Compose Navigation patterns and how to integrate it with deeplinks.</p>
<h2>Why Need Navigation?</h2>
<p>Android applications usually have more than one screen since they have multiple features. In case of a messaging application we have a contact list screen, a message list screen, a message screen, a settings screen, so on. It&#8217;s difficult to cram all these features into one screen and ViewModel. Your code will turn into spaghetti. To separate our features we use multiple fragments/composable and navigation connects them.</p>
<h2>Navigation In Android</h2>
<p>Let&#8217;s look at Android applications that doesn&#8217;t use Jetpack Compose. In the early days of Android, having multiple activities and using intents were the trend. Then, single activity with multiple fragments and using jetpack navigation made more sense. We won’t dive into the details of jetpack navigation in this article. But here is <a href="https://developer.android.com/guide/navigation?gclid=Cj0KCQjwkt6aBhDKARIsAAyeLJ1dz4c7uFlTLChujribwydM4g6Je7J76yajFSCqrEAtc2bGSxWtq8waAlV6EALw_wcB&amp;gclsrc=aw.ds">the android documentation</a> if you would like to learn more about it. Finally, with Jetpack Compose, jetpack navigation had a different way of usage.</p>
<div id="attachment_3812" style="width: 1610px" class="wp-caption aligncenter"><img aria-describedby="caption-attachment-3812" class="size-full wp-image-3812" src="https://ac.appcircle.io/wp-content/uploads/2022/11/EyjQEPrI.png" alt="Jetpack Navigation Fragment Graph Example" width="1600" height="1491" srcset="https://ac.appcircle.io/wp-content/uploads/2022/11/EyjQEPrI.png 1600w, https://ac.appcircle.io/wp-content/uploads/2022/11/EyjQEPrI-300x280.png 300w, https://ac.appcircle.io/wp-content/uploads/2022/11/EyjQEPrI-1030x960.png 1030w, https://ac.appcircle.io/wp-content/uploads/2022/11/EyjQEPrI-768x716.png 768w, https://ac.appcircle.io/wp-content/uploads/2022/11/EyjQEPrI-1536x1431.png 1536w, https://ac.appcircle.io/wp-content/uploads/2022/11/EyjQEPrI-1500x1398.png 1500w, https://ac.appcircle.io/wp-content/uploads/2022/11/EyjQEPrI-705x657.png 705w" sizes="(max-width: 1600px) 100vw, 1600px" /><p id="caption-attachment-3812" class="wp-caption-text">Jetpack Navigation Fragment Graph Example</p></div>
<p>&nbsp;</p>
<h3>Navigating Compose Via Fragments</h3>
<p>Before diving into navigation in compose, we can use fragments for using Jetpack navigation with graphs. Fragments will just call compose screens:</p>
<pre><code class="language-xml">&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
&lt;LinearLayout
    xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;
    android:orientation=&quot;vertical&quot;
    android:layout_width=&quot;match_parent&quot;
    android:layout_height=&quot;match_parent&quot;&gt;

    &lt;androidx.compose.ui.platform.ComposeView
        android:id=&quot;@+id/compose_view&quot;
        android:layout_width=&quot;match_parent&quot;
        android:layout_height=&quot;match_parent&quot; /&gt;

&lt;/LinearLayout&gt;</code></pre>
<pre><code class="language-kotlin">class ExampleFragment : Fragment() {

    private var _binding: FragmentExampleBinding? = null
    // This property is only valid between onCreateView and onDestroyView.
    private val binding get() = _binding!!

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        _binding = FragmentExampleBinding.inflate(inflater, container, false)
        val view = binding.root
        binding.composeView.apply {
            // Dispose of the Composition when the view&#039;s LifecycleOwner
            // is destroyed
            setViewCompositionStrategy(DisposeOnViewTreeLifecycleDestroyed)
            setContent {
                // In Compose world
                MaterialTheme {
                    Text(&quot;Hello Compose!&quot;)
                }
            }
        }
        return view
    }

    override fun onDestroyView() {
        super.onDestroyView()
        _binding = null
    }
}</code></pre>
<p>However, this is not a good way of implementing it. Because using fragments just for navigation will create performance problems and affect the code structure. It is against Jetpack Compose’s fundamentals. We explained performance test results in <a href="https://blog.appcircle.io/article/jetpack-compose-101-the-basics">this article</a>.</p>
<h2>Jetpack Compose Navigation Basics</h2>
<p>Jetpack Compose navigation requires implementation in the app-module Gradle file:</p>
<pre><code class="language-gradle"> implementation &quot;androidx.navigation:navigation-compose:$las_version&quot;</code></pre>
<p>First, we create a <strong>NavController</strong> instance to keep the back stack of our screens with their state and to navigate among them. We can say <strong>NavController</strong> is our compass.</p>
<pre><code class="language-kotlin">val navController = rememberNavController()</code></pre>
<p><strong>Note:</strong> navController instance should also follow the state hoisting principle.</p>
<p>After creating a <strong>NavController</strong>, We need to connect with only one <strong>NavHost</strong>. We can say <strong>NavHost</strong> is our map.</p>
<pre><code class="language-kotlin">NavHost(navController = navController, startDestination = &quot;profile&quot;) {
    composable(&quot;profile&quot;) { Profile(/*...*/) }
    composable(&quot;friendslist&quot;) { FriendsList(/*...*/) }
    /*...*/
}</code></pre>
<p>As we can see NavHost gets a NavController and a String called as <strong>startDestination</strong>.<br />
startDestination describes NavHost to show which screen first. The string “profile” is a concept called a <strong>route</strong>. Routes are like addresses for screens we use routes to reach up to the screen.</p>
<pre><code class="language-kotlin">composable(&quot;profile&quot;) { Profile(/*...*/) }</code></pre>
<p>Here we say the composable screen&#8217;s route name is <strong>profile</strong>.</p>
<p>To navigate to a screen, just call <strong>.navigate</strong> with the name of your destination:</p>
<pre><code class="language-kotlin">navController.navigate(&quot;friendslist&quot;)</code></pre>
<h3>Arguments</h3>
<p>We can also pass arguments to any screen:</p>
<pre><code class="language-kotlin">composable(
  route = &quot;profile/?userId={userId}&quot;,
  arguments = listOf(navArgument(&quot;userId&quot;){
      type = NavType.StringType
      defaultValue = &quot;&quot;
} ) { backStackEntry -&gt;
    Profile(navController, backStackEntry.arguments?.getString(&quot;userId&quot;))
}</code></pre>
<p>Now our profile screen can receive an argument with userID name.</p>
<p><strong>Note:</strong> By default, all arguments are parsed as <strong>strings</strong>.</p>
<p>To pass argument during navigating:</p>
<pre><code class="language-kotlin">navController.navigate(&quot;profile/?userId=user1234&quot;)</code></pre>
<p>It&#8217;s like using RestfulAPI.</p>
<p><strong>Note:</strong> Passing a minimum amount of arguments is the right way because the navigation concept does not cover data-related logic.</p>
<h3>Screen Class Usage</h3>
<p>The previous example seems nice, but typing hard-coded strings for routes is not a good practice. Instead, we need to use sealed classes:</p>
<pre><code class="language-kotlin">sealed class Screen(val route: String) {
    object Profile: Screen (route = &quot;profile/?userId={userId}&quot;){
        fun userId(userId: String) = &quot;profile/?userId=$userId&quot;
  }
}</code></pre>
<p>Now we can refactor our navigation code:</p>
<pre><code class="language-kotlin">composable(
  route = Screen.Profile.route,
  arguments = listOf(navArgument(&quot;userId&quot;){
      type = NavType.StringType
      defaultValue = &quot;&quot;
} ) { backStackEntry -&gt;
    Profile(navController, backStackEntry.arguments?.getString(&quot;userId&quot;))
}

navController.navigate(Screen.Profile.userId(&quot;user1234&quot;)</code></pre>
<h2>Nested Navigation</h2>
<p>We might want to group and modularize routes. Let’s say we want to group onboarding, login, and register screen into a graph:</p>
<pre><code class="language-kotlin">NavHost(navController, startDestination = &quot;home&quot;) {
    // Navigating to the graph via its route (&#039;login&#039;) automatically
    // navigates to the graph&#039;s start destination - &#039;username&#039;
    // therefore encapsulating the graph&#039;s internal routing logic
    navigation(startDestination = &quot;username&quot;, route = &quot;login&quot;) {
        composable(&quot;username&quot;) { ... }
        composable(&quot;password&quot;) { ... }
        composable(&quot;registration&quot;) { ... }
    }
}</code></pre>
<h3>Extraction Of Graphs</h3>
<p>Be aware that having a lot of graphs still can turn code into a huge mess. We can separate graphs into different files by using <strong>NavGraphBuilder</strong>:</p>
<pre><code class="language-kotlin">fun NavGraphBuilder.loginGraph(navController: NavController) {
    navigation(startDestination = &quot;username&quot;, route = &quot;login&quot;) {
        composable(&quot;username&quot;) { ... }
        composable(&quot;password&quot;) { ... }
        composable(&quot;registration&quot;) { ... }
    }
}</code></pre>
<p>And use them in our <strong>NavHost</strong>:</p>
<pre><code class="language-kotlin">NavHost(navController, startDestination = &quot;home&quot;) {
    loginGraph(navController)
}</code></pre>
<h2>Deeplink Routing In Compose</h2>
<p>Compose navigation supports implicit deep links, here is how:</p>
<pre><code class="language-kotlin">val uri = &quot;https://www.example.com&quot;

composable(
    &quot;profile?id={id}&quot;,
    deepLinks = listOf(navDeepLink { uriPattern = &quot;$uri/?id={id}&quot; })
) { backStackEntry -&gt;
    Profile(navController, backStackEntry.arguments?.getString(&quot;id&quot;))
}</code></pre>
<p>By default, deeplinks are not exposed to external apps. To expose them, we add an intent filter to the manifest file:</p>
<pre><code class="language-kotlin">&lt;activity …&gt;
  &lt;intent-filter&gt;
    &lt;data android:scheme=&quot;https&quot; android:host=&quot;www.example.com&quot; /&gt;
  &lt;/intent-filter&gt;
&lt;/activity&gt;</code></pre>
<h2>Conclusion</h2>
<p>In this article, we learned why we are using the navigation in android, how navigation changed throughout the years, how we can use compose in fragment navigations, and why we should not really use that way.</p>
<p>Then dived into jetpack compose navigation with arguments, nested graphs, and graph extraction.</p>
<p>Finally, we learned how to use deep links in jetpack compose navigation.</p>
<h2>Where to Go From Here?</h2>
<p>Since we learned a lot of information from this article it is better to put theory into practice.</p>
<p>For this android suggests:</p>
<ul>
<li><a href="https://developer.android.com/codelabs/jetpack-compose-navigation" target="_blank" rel="noopener">Navigation codelab</a></li>
<li><a href="https://github.com/android/nowinandroid" target="_blank" rel="noopener">Repository</a></li>
</ul>
<h2>References</h2>
<ol>
<li><a href="https://developer.android.com/guide/navigation?gclid=Cj0KCQjwkt6aBhDKARIsAAyeLJ1dz4c7uFlTLChujribwydM4g6Je7J76yajFSCqrEAtc2bGSxWtq8waAlV6EALw_wcB&amp;gclsrc=aw.ds" target="_blank" rel="noopener">Navigation | Android Developers</a></li>
<li><a href="https://blog.appcircle.io/article/jetpack-compose-101-the-basics" target="_blank" rel="noopener">Jetpack Compose 101: The Basics &#8211; Appcircle Blog</a></li>
<li><a href="https://developer.android.com/jetpack/compose/interop/interop-apis" target="_blank" rel="noopener">Interoperability APIs | Jetpack Compose | Android Developers</a></li>
<li><a href="https://developer.android.com/jetpack/compose/navigation" target="_blank" rel="noopener">Navigating with Compose | Jetpack Compose | Android Developers</a></li>
<li><a href="https://medium.com/google-developer-experts/navigating-in-jetpack-compose-78c78d365c6a" target="_blank" rel="noopener">Navigating in Jetpack Compose</a></li>
<li><a href="https://developer.android.com/codelabs/jetpack-compose-navigation#0" target="_blank" rel="noopener">Jetpack Compose Navigation | Android Developers</a></li>
<li><a href="https://github.com/android/nowinandroid" target="_blank" rel="noopener">Now In Android Repository</a></li>
</ol>


Jetpack Compose Navigation and Deeplinks

Related Posts

Increase Mobile Development Productivity by AI-Powered Appcircle

Using Jira for Mobile App Development: Effective Strategies for Issue Tracking and Management

Firebase App Distribution vs Appcircle Test Distribution

Jetpack Compose Navigation and Deeplinks

Related Posts

Increase Mobile Development Productivity by AI-Powered Appcircle

Using Jira for Mobile App Development: Effective Strategies for Issue Tracking and Management

Firebase App Distribution vs Appcircle Test Distribution

Subscribe to Appcircle Circle