Super Easy Navigation between Composable's in Jetpack Compose

Image from Google

Hello guys,😀
Please proceed to the first day of instruction for Introduction to Compose & Setup 🏗️ if you have not yet setup a Basic Compose project.

Navigation Between Composable’s

Before moving to implementation, everyone is familiar with term Navigation which allow uses to navigate across, into and back out from different parts of app. The whole functionality is handled by the component call as Navigation Component.The best part is Navigation Component provides support for Compose Application.

Before designing the navigation between different screens and app which is a core part of user experience, some basic principles of Navigation should be taken into consideration. Please give a read 👇 before moving further

https://developer.android.com/guide/navigation/navigation-principles

Note: Even if you aren’t using the Navigation component in your project, your app should follow these design principles

Implementation Steps

1. As usual, do this in build.gradle. No explanation needed 😁

2. To master 😎, the Navigation you need to understand only 2 concepts which are so important in the whole Navigation functionality
NavController : It’s a Central Api for Navigation. It keeps track of the back stack of composable’s that make up the screens in your app and the state of each screen.
NavHost : In simple terms it is a bridge between NavController and the Navigation Graph that specifies composable destinations that you should be able to navigate between.
But where is Navigation Graph ??? 🤔🤔🤔🤔🤔🤔🤔
Here it is,

Sample from Google Source

Where route is nothing fancy but the path to your composable. You can think of it as a unique route to that destination.
Cool 😎. I assume you are clear with theory & basics information.
Let’s do the last 3 Important but very easy steps to wrap up with implementation.

1. Create NavController
val navController = rememberNavController()
Super easy. Just keep in mind create Controller in the hierarchy where all Composable that need reference can have it to perform other navigation operations as and when needed.
That’s it. Super easy 😄

2. Create NavHost
The NavController that was previously generated using rememberNavController() and the route of the initial destination of your graph are needed to create the NavHost.
The lambda syntax from the Navigation Kotlin DSL is used during NavHost construction to build your navigation graph.
By employing the composable() function, you can expand your navigational structure.
For this approach to work, you must supply a route and the component that should be connected to the destination.

3. Navigate to Composable
The navigate() method must be used to navigate to a composable destination in the navigation graph. A single String parameter is all that is required for the navigate() function to work. Within the navigation graph, call navigate to navigate from a composable ()

Few Important things to avoid
1. Call the navigate method only in callbacks i.e Button Click etc. If you will call inside as a part of composable then it will call navigate on every recomposition and lead app to uncertain state.
2. By default navigate() method keep adding new destinations you navigate to back stack. But, by attaching additional navigation options you can modify this behaviour.

Great. That’s all about basics of Navigation with Compose.
But this is not enough 😑 😐

You will come across with advanced use case which you will deal on everyday basis for your apps. That is, 👇 👇 👇 👇 (Must read)

Navigate with Arguments
It is also not the complicated process. Just follow again 3 steps, and you are DONE ✅

Specify the Parameter & Type
Passing parameters between composable destinations is supported by navigation compose as well. To accomplish this, you must add argument placeholders to your route.
All arguments are by default parsed as strings. When setting a type, the arguments parameter allows you to choose a different type.
Supported Argument Types (Check if interested)

Extract the Value
The NavBackStackEntry, which is present in the lambda of the composable() function, should be used to extract the NavArguments

Pass argument in destination
You must substitute the value for the placeholder in the call to navigate in order to deliver the argument to the destination.

There is one more part which is Additional Arguments passing in Compose, which I have left for you to explore. Enjoy Learning. 😀.

That’s all about the basics of Compose Navigation. This article may not cover everything based on your complex Implementation & use cases but you are good to start with. All the best.😃
You can Clone this repository for basic setup. Further, all concepts source code can be updated from same. (Switch to branch NavigationInCompose)
https://github.com/SatyamGondhale/LearnCompose

If you think this has helped you, feel free to 👏🏻 (claps) & share. Thanks.😄