Passing arguments to screens in Jetpack Compose

Adding the necessary dependencies

// Navigation
implementation "androidx.navigation:navigation-compose:$navigation_version"
// ViewModel
implementation "androidx.lifecycle:lifecycle-viewmodel-compose:$lifecycle_compose_version"
// Hilt
implementation "$hilt_version"
implementation "androidx.hilt:hilt-navigation-compose:1.0.0-rc01"
kapt "$hilt_version"

Defining the routes

const val DestinationOneRoute = "one"
const val DestinationTwoRoot = "two"
const val DestinationOneArg = "arg"
const val DestinationTwoRoute = "$DestinationTwoRoot/{$DestinationOneArg}"

Building the navigation graph

  • a navigation controller, that we need to instantiate and remember, using rememberNavController()
  • the start destination
  • an optional Modifier
  • an optional route for the navigation graph
  • a lambda that adds the destinations to the nav graph
  • first we instantiate the NavController that we will use to navigate to our routes
  • then we build the navigation graph by calling NavHost and passing the navController, the start route and the lambda
  • inside the lambda we call composable to add a route to the nav graph, and we specify which route identifies this entry in the navigation graph
  • inside the composable we define our first screen
  • we add a 2nd composable for the 2nd screen
  • likewise, we specify a route to identify this screen
  • finally we add our 2nd screen to the navigation graph
  • OneScreen takes a lambda that will navigate to TwoScreen. This lamba has an argument that we will use to navigate to the 2nd screen. We can see in the buildTwoRoute function how we are constructing the route for the 2nd screen, using the root part of the route and then the argument as a path element on that route.
  • TwoScreen uses a ViewModel to handle its business logic. We can see here that we are not retrieving the argument we pass in the route when navigating to the 2nd screen; we will see now how this value is automatically populated for us by the navigation library.

Retrieving the navigation arguments in the ViewModel

  • annotate the viewmodel with @HiltViewModel so that Dagger can inject it when we request an instance with hiltViewModel as we did when building the navigation graph
  • in the constructor, specify a SavedStateHandle that Hilt will inject
  • finally, retrieve the value from the SavedStatehandle object using the same key we used to define the argument placeholder in the route




Senior Android Developer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

25 Programming Jokes That Will Make You Laugh

How to Show a Loader Until the Fetch API Has Finished Loading the Page

Video Chat using Amazon Kinesis Video Streams and WebRTC

Building a Workflow Positioned for Adaptability

GameTunes DR ROBOTNIK Video Game Soundtrack

Declarations in JavaScript

Most 10 popular JavaScript interview questions.

Bootstrap a VS Code Front-End Web Development Environment

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Francesc Vilarino Guell

Francesc Vilarino Guell

Senior Android Developer

More from Medium

Introduction to Animation in Jetpack Compose

Grouping Semantics in Jetpack Compose UI

Expandable and clickable text with annotated String in Jetpack Compose

Customizing Material Theme with Jetpack Compose