My First Contact With Navigation in Jetpack Compose

How to use the Navigation library in Jetpack Compose

Gabriel Bronzatti Moro
CodandoTV
2 min readJan 22, 2022

--

Photo by Tim Graf on Unsplash

Hey folks, I want to share a few things about my first impressions when using the Navigation library in Compose.

Navigation Graph

A navigation graph is a place where you can define your routes. In our case, the destinations will be Compose functions.

It is possible to define “internal graphs” in the graph. In the example, below, I will show a NavGraph of my project:

As we can see, we have two “internal graphs”.

The first is called “On-Boarding”, this occurs only one time.

The other is the “Dashboard”, a kind of home screen.

Routes

Each route has a String identifier, which should be unique.

We could choose a specific file to put all of our app routes. Another example:

Arguments

We can pass arguments through the routes.

There is existing support for primitive types, but in my case, I had to pass an object, so I found a way here to handle that:

After defining the new argument type, we need to add a new route to support that:

I created a method to generate a route including the argument:

Navigation Control

The navigation between screens is made by sharing the navigation controller between all the Compose functions.

To navigate from one screen to another, using the previous example, we can do:

Conclusion

All first contact moves us out of our comfort zone, I have used the previous Navigation library, but after making it works, I can see a lot of sense to use that in Compose.

I hope this article is helpful for you.

--

--