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:

Container Transform in action (Source: material.io).

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:

The end result of our application. Notice the Container Transform pattern that occurs when user navigates from list screen to the detail screen (And notice the back transitions too!).

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:

The end result of our application. Notice the Container Transform pattern that occurs when user navigates from list screen to the detail screen (And notice the back transitions too!).

As always, thanks for reading!

--

--

--

Android Engineer @ Bobobox.co.id

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Part II: Navigation in Flutter

What are launch Modes in Android with examples

Observations while moving an existing project to Jetpack compose

Push Notification In Flutter in Background as well as in Foreground Using Firebase

Android: Best practices for Text on Android — Part 2: Custom Font

My take on Clean Architecture implementation in Android

Android Text Styling with Spans

Joining Multiple Channels Using the Agora Android SDK

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Farhan Majid 🐾

Farhan Majid 🐾

Android Engineer @ Bobobox.co.id

More from Medium

Exploring Android 12: Data Access Rationale

Ways to pass information in Bundles in Android.

Android guide: Android Activity States

Android Location Fetching in 2 Minute