Photo by Pawel Czerwinski on Unsplash
I’ve recently delved into how to add support for navigation in Android using Jetpack Compose. To do so, I created a small app that consumes an API and has a Main -> Detail screen. In this post, we’ll go through the basic setup of the project, its key elements to handle navigation, and finally, we’ll add some transitions to it using the latest navigation library. Let’s go through it together.
Mechanics Overview
The app itself is fairly basic and it uses a simple yet clean architecture (I might write a separate post on this at some point). It’s a top-rated movies list that you can scroll through, and if you click on any of the posters, it takes you to a detailed view, which is just the poster expanded to use the whole screen.
The Movies List and the Movie Detail views
I’m using the TMDB API to retrieve the movie list and regardless is a pagination-friendly api, I’m not paginating the results for this sample. As usual to do so I’m using Retrofit.
| interface MoviesAPI { | |
| @GET("movie/top_rated") | |
| suspend fun getTopRatedMovies( | |
| @Query("api_key") apiKey: String, | |
| @Query("language") language: String = "en-US", | |
| @Query("page") page: Int | |
| ): TMDBResponse<MovieResponse> | |
| } |
The list of movies is populated using StateFlow into the ViewModel and collectAsStateWithLifecycle() by the core Composable of the app.
I’m transforming the response from the API into a less bulky MovieUI element that has just the information we need to display it in this sample.
| data class MovieUI(val movieId: Int, | |
| val movieName: String, | |
| val moviePosterUrl: String) |
navigation-compose
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.
| @Composable | |
| fun MoviesListScreen( | |
| onMovieDetails: (Int) -> Unit = {}, | |
| movies: State<List<MovieUI>> | |
| ) { | |
| MoviesListUI(movies.value, onMovieDetails) | |
| } | |
| val mockMovieList = listOf(MovieUI(1, "Batman", "")) | |
| @Composable | |
| @Preview | |
| private fun MoviesListUI( | |
| movies: List<MovieUI> = mockMovieList, | |
| onMovieDetails: (Int) -> Unit = {} | |
| ) { | |
| LazyVerticalGrid(columns = GridCells.Fixed(2), content = { | |
| items(count = movies.size, itemContent = { index -> | |
| MovieUiListItem(movieUi = movies[index], onMovieDetails) | |
| }) | |
| }) | |
| } |
| @Composable | |
| @Preview | |
| fun MovieDetailsScreen( | |
| selectedMovie: MovieUI? = MovieUI(1, "Test", "") | |
| ) { | |
| AsyncImage( | |
| modifier = Modifier | |
| .fillMaxSize() | |
| .padding(5.dp), | |
| model = ImageRequest.Builder(LocalContext.current) | |
| .data(selectedMovie?.moviePosterUrl) | |
| .crossfade(true).build(), | |
| contentDescription = "TV Show Poster", | |
| contentScale = ContentScale.Crop, | |
| ) | |
| } |
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:
Job Offers
OUR VIDEO RECOMMENDATION
Jobs
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:
| class MainActivity : ComponentActivity() { | |
| private val viewModel: MoviesViewModel by viewModel() | |
| override fun onCreate(savedInstanceState: Bundle?) { | |
| super.onCreate(savedInstanceState) | |
| setContent { | |
| MoviesListTheme { | |
| // A surface container using the 'background' color from the theme | |
| Surface( | |
| modifier = Modifier.fillMaxSize(), | |
| color = MaterialTheme.colorScheme.background | |
| ) { | |
| MoviesAppNavigationView(viewModel.moviesState) | |
| } | |
| } | |
| } | |
| } | |
| } |
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.
Animated Transitions
Ok so we are able to move from one composable to the other, let’s make it look graceful now.
To handle animated transitions in Compose using the Navigation library, you had to rely in the Accompanist library and make It match the compose version you app was using. Starting navigation-compose:2.7.0-alpha01 that is no longer the case 🎉 animated transitions are now part of the Navigation library.
The only caveats are that (at least as of July ’23) this is still in beta and you need to upgrade your project to compileSdk 34 which is still not tested for gradle 8.0.2. So you know, use in prod with care ⚠
We introduce the animations for each of the 4 key events our destination can be subject to:
enterTransition = {
},
exitTransition = {
},
popEnterTransition = {
},
popExitTransition = {
}
Let’s bring them into our MoviesAppNavigationView:
slideIntoContainer and popEnterTransition only support EnterTransition types while exitTransition and popExitTransition only support ExitTransition types.
On top of this we need to pass in its arguments which is the direction of the animaiton we want it to have when the state is triggered and finally an animationSpec which allows us to easily control our animation duration in a Compose-friendly way.
slideIntoContainer( towards = AnimatedContentTransitionScope.SlideDirection.Companion.Left, animationSpec = tween(700) )
And now our transitions look like this 💫
Final Thoughts
While this is all in beta for now and exclusively supported in compileSdk 34, It might not be the tool of choice for most projects but Its very exciting to see in which direction the navigation management is going.
That said as this is in Kotlin and Compose It brings a lot more of opportunities for devs to handle transitions and animations as with the rest of Jetpack.
Have a nice day and I hope your transitions are looking awesome now 🧉
This article was previously published on proandroiddev.com
