The main goal is to be able to respond to the click of the movie poster, navigating to a detailed view of it. In this case, the detailed view simply consists of an expanded version of the poster. When diving deeper into the code, we have our main screen called MoviesListScreen and the detailed screen called MovieDetailsScreen. What we need is to pass the selectedMovie that was clicked to the detail screen, so that we can display the appropriate poster.

To do so with Jetpack Compose we can make use of the navigation library:

implementation 'androidx.navigation:navigation-compose:2.7.0-beta02'

*I’ll get into the justification of why I’m using the beta02 later on

This AndroidX library allows us to define with precision the navigation of our app (if you are familiar with the Navigation component and the navigation graph It’s basically the same (https://developer.android.com/guide/navigation/get-started))

The way I approached this is by creating a new “RootComposable” that will hold the definition of our graph:

In the MovieDetail destination I’ve added logic so that It supports passing an argument from the list screen into it, this is going to be the id of the clicked movie so that MovieDetailsScreen can go fetch the correct poster path.

This is a key bit of the implementation as Is where we pass the listener that has to react to the poster click. In its implementation It calls the navController and navigates to the required path passing as argument the movieId:

onMovieDetails = { navController.navigate("$MOVIE_DETAIL/$it") },

And our MainActivity uses when calling setContent:

We first call rememberNavController which will add a new navigator into our app and It will be remembered along our composition.

val navController = rememberNavController()

After that we need to define our graph through the use of a NavHost. It will receive as parameters our navController and the first destination that It should use by default:

NavHost(navController = navController, startDestination = MOVIE_LIST) {

Into it we need to define our screens using the NavGraphBuilder.composable() function. Inside It allows us to call our composables that should be displayed in each destination:

public fun NavGraphBuilder.composable(

And with all of this in place, the app now successfully navigates from the list to the detail view.

Source link