Adding Amazing Transitions to Your Android App Easily Using Material Motion
Getting Started 🎬
We will add transitions to an app that has two fragments. DogListFragment contains a recycler List while the DogDetailsFragment contains just an Imageview and a textview.
Setting up ⚙️
To observer the transitions more carefully, you’ll need to slow down animations on your device. In the terminal, run —
These commands will slow down animation in all your apps. To reset at any time, run —
For this guide, we will add a transition when an item in the recycler is clicked. The DogListFragment and DogDetailsFragment will be be visually linked thanks to this transition.
Make sure you add Material 1.2.0 to your app’s dependency.
implementation 'com.google.android.material:material:1.2.0'Dog List Fragment Set Up
The dog_list_fragment.xml contains the layout for the item_dog that will be populated through the Recycler Adapter. It’s a pretty basic view that contains an Imageview to display dog’s picture and a textview to display breed’s name.
The only thing to notice here is the —
android:id="@+id/item_container"This will be the “Start” view of the Transition.
This is the ID of the Material Card View which wraps around the Imageview and Textview. We will need this ID, as this is the view that gets animated/shared.
Now in your recycler Adapter —
Add an interface in the recycler with a function that returns the selected item’s view and selected Dog object.
Set a unique transition name to the view (item_container), in this case I set it as dog.imageUrl as this will be unique for each dog.
Now in DogListFragment.kt, implement the interface, and override the onItemClicked() method.
For the DogDetailFragment.kt , we need the imageUrl and the breed name of the selected Dog item. I use SafeArgs to pass them.
Along with this you also need to pass the selected View(item_container) along with a unique transition name (imageUrl). You can pass them by using Fragment Navigator Extras.
FragmentNavigatorExtras(view to dog.imageUrl.toString())to creates a mapping between the View and the transition name.Now pass them to navigate() method.
DogDetails Fragement Set Up
For DogDetails Fragment layout we have —
The view with “@+id/detail_container” will serve as the “End” view of the transition .
The transition names for both the “start” view and the “end” view should be same. This helps android understand the shared elements involved in the transition. Set the transition name (imageUrl) for the end view.
Shared Element Transition
In the onCreate Method, set the sharedElementEnterTransition. Android Transition will automatically reverse the transition when you hit back, so there’s no need to set a return transition.
You would have ended up with something like this. Notice the image doesn’t snap back in the recycler list when you press the Back button.
Making Animation smoother and more intuitive
To fix this, Add this to the DogListFragment.kt
This will ensure that the DogListFragment is loaded before the return transition is run. Now the transition should look like this.
If you notice carefully when the Dog item is clicked, the DogList Fragment is immediately replaced. We want it to stay until the DogDetail fragment loads up.
Also on re-entering the Dog List Screen on pressing back, I want the DogList fragment to scale up a bit(just a bit of animation). In the onItemClicked() method set the exit and re-enter transition before navigating.
And you’re done 🚩
You should have something that looks like this. This type of transition is called a Container Transformation.
