Screen Transition Animations with Jetpack Navigation

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. <h1>Mechanics Overview</h1> 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. <img alt="" src="https://miro.medium.com/v2/resize:fit:1080/1*R-dcZ0wYBvrtxTPaOYuoiQ.png" style="height:2340px; width:500px" /> <img alt="" src="https://miro.medium.com/v2/resize:fit:1080/1*F7_5OOjQB5mGwtPQPe0jWw.png" style="height:2340px; width:500px" /> The Movies List and the Movie Detail views I’m using the <a href="https://developer.themoviedb.org/reference/intro/getting-started" rel="noopener ugc nofollow" target="_blank">TMDB API</a> 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 <a href="https://square.github.io/retrofit/" rel="noopener ugc nofollow" target="_blank">Retrofit</a>. <a href="https://proandroiddev.com/screen-transition-animations-with-jetpack-navigation-17afdc714d0e">Learn More</a>