The primary objective is to have the ability to reply when clicking on a film poster, navigating to an in depth view of it. On this case, the element view solely contains an expanded model of the poster. As we dig deeper into the code, we now have a house display screen referred to as MovieListScreen and the element display screen is named MovieScreenDetails. What we want is to beat chosen Motion pictures was clicked on the small print display screen so we may present the suitable poster.
To take action with Jetpack Compose we will use the navigation library:
implementation 'androidx.navigation:navigation-compose:2.7.0-beta02'
*I’ll clarify why I exploit beta02 after that
This AndroidX library permits us to exactly outline the navigation of the applying (in case you are accustomed to the Navigation element and the navigation graph it’s principally the identical (https://developer.android.com/information/navigation/get-started))
The way in which I strategy that is by creating a brand new “RootComposable” that can maintain our graph definition:
Within the MovieDetail vacation spot, I added logic so It helps passing an argument from the checklist display screen to it, which would be the id of the film that was clicked in order that MovieDetailsScreen can fetch the right poster path.
This is a crucial a part of the implementation as a result of Is the place we go a listener that should react to the poster’s click on. Within the implementation, It calls navController and navigates to the required path handed as an argument film id:
onMovieDetails = { navController.navigate("$MOVIE_DETAIL/$it") },
And our MainActivity to make use of when calling setContent:
First we name memoryNavController which is able to add a brand new navigator to our software and It will likely be remembered alongside our element.
val navController = rememberNavController()
Then we have to outline our graph by the usage of NavHost. It is going to take as parameters our navController and the primary vacation spot it ought to use by default:
NavHost(navController = navController, startDestination = MOVIE_LIST) {
In it, we have to outline our display screen utilizing NavGraphBuilder.composable() operate. Inside It permits us to name our aggregators to be displayed in every vacation spot:
public enjoyable NavGraphBuilder.composable(
And with all this, the app now efficiently navigates from the checklist to the element view.