How to Use Material Container Transform with RecyclerView + Navigation + DataBinding
One of the components of Material Design is Material Motion. Material Motion comprises of 4 patterns for transitioning between components/screens.
One of these transition patterns is Container Transform. With Container Transform, you can transform one element into another during transition. You can see some Container Transform examples in the image below:
In this article, we are going to talk about how to use Container Transform with RecyclerView, Navigation component, and DataBinding.
We are going to create a simple application that displays 3 Pokemons as cards. When the card is clicked, the app will navigate to the detail screen of the Pokemon. We are going to apply Container Transform pattern to the Pokemon image like shown here:
Where’s the Source Code?
Step by Step Explanation
Follow the steps provided below to create this application.
1. Open Android Studio. Create new project with “Empty Activity” option.
2. First, we need to setup Navigation component. For convenience, we are also going to use SafeArgs. Open build.gradle file and add the SafeArgs plugin like this:
Next, open ourapp/build.gradle file. Here, we are going to apply kotlin-kapt & SafeArgs, enable DataBinding, and add Navigation component dependency:
3. Next, create the list screen by creating a new Fragment by clicking menu File > New > Fragment > Fragment (Blank). Fill the Fragment Name field with “ListFragment” and the Fragment Layout Name field with “fragment_list”. Click Finish.
4. Repeat the previous step for creating the detail screen. This time, fill the Fragment Name field with “DetailFragment” and the Fragment Layout Name field with “fragment_detail”.
5. Next, we are going to create our Pokemon model. Create a new Kotlin file named Pokemon.kt and copy-paste the code below.
6. Next, we need to prepare images for our Pokemon. Go to this page and download the three images: bulbasaur.png, charmander.png, and squirtle.png. Put them in your project’s res/drawable folder.
7. Create a navigation graph by right clicking theres folder on the Project tab and select New > Android Resource File. Fill the File name field with “nav_graph” and select “Navigation” for Resource type field. Click OK.
8. Open the nav_graph.xml file and create a graph similar to the code snippet below. Make ListFragment as the start destination. Create an action from ListFragment to DetailFragment with 2 arguments: pokemonId and pokemonImage.
9. Next, let’s prepare our layouts. Open activity_main.xml and copy-paste the code snippet below. This layout will only contain FragmentContainerView for containing Fragments.
10. Create a new layout file named item_pokemon.xml and copy-paste the code snippet below. This layout will display a card that contains Pokemon image and name.
11. Next let’s update our fragment_list.xml file. Open the file and copy-paste the code snippet below. The layout will only contain a RecyclerView that displays list of item_pokemon.xml.
12. Let’s update fragment_detail.xml file next. Open the file and copy-paste the code snippet below. This layout will contain the Pokemon image.
13. Next we are going to create an Adapter for our Pokemon list. Create a new Kotlin file named PokemonAdapter.kt and copy-paste the code snippet below. The most important thing to notice here is the usage of ViewCompat.setTransitionName method. We need to set a unique transition name for each list image so that it could animate the transition correctly. Here, we use Pokemon’s id to create unique transition name.
14. Next, let’s update our ListFragment.kt file. Go ahead and copy-paste the code snippet below. The most important things to notice here are the usage of FragmentNavigatorExtras to pass the transitioning View and its transition name. For example, if user clicks on Bulbasaur card, the transitioning View will be the ImageView of Bulbasaur and the transition name will be “image-1”.
Notice also the usage of postponeEnterTransition and startPostponedEnterTransition that enables the back animation when user returns from DetailFragment to ListFragment.
15. Lastly, let’s update DetailFragment.kt file. Copy-paste the code snippet below. Here, you must set the Fragments’s sharedElementEnterTransition value to MaterialContainerTransform(). You must also set transition name for the ImageView based on the navigation argument (pokemonId).
16. That’s it! Now run your app and try clicking on one of the Pokemon card like this:
As always, thanks for reading!
