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:
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?
modern-android-samples/material-list-container-transform at master ·…
Sample projects for modern Android development. Contribute to hanmajid/modern-android-samples development by creating…
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 our
app/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:
squirtle.png. Put them in your project’s
7. Create a navigation graph by right clicking the
res 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
DetailFragment with 2 arguments:
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
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
Notice also the usage of
startPostponedEnterTransition that enables the back animation when user returns from
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 (
16. That’s it! Now run your app and try clicking on one of the Pokemon card like this:
As always, thanks for reading!