Fragment transitions with shared elements

Bryan Herbst
Oct 29, 2015 · 4 min read

One of the cornerstones of Material design is meaningful motion between screens. Lollipop introduced support for these animations in the form of the transitions framework, which allows us to animate transitions between Activities and Fragments. I haven’t seen many articles on how to use transitions with Fragments, so I set out to write one!

Our end product is fairly simple. We will be making an app that has a grid of images, and when you click on an image the app will show a details screen. Thanks to the transitions framework, the image from the grid will animate into place on the details screen.

Image for post
Image for post
The final product. Thanks to placekitten for the adorable kittens and Cupcake Ipsum for the copy!

If you want to head straight to the sample app, you can find it here on GitHub.

What about older versions of Android?

This article will use these support library functions to provide content transitions.

Setup

Transition Names

There are two ways to add a transition name to your Views:

  • In code you can use ViewCompat.setTransitionName(). Of course, you can also just call setTransitionName() on devices running Lollipop and up.
  • In your layout XML, you can use the android:transitionName attribute.

One important item to note is that within a given layout (e.g. all views in screen one), transition names must be unique. Keep this in mind when you are transitioning from a ListView or RecyclerView; defining a transition name in your row XML will lead to each row having the same transition name.

Set up the FragmentTransaction

getSupportFragmentManager()
.beginTransaction()
.addSharedElement(sharedElement, transitionName)
.replace(R.id.container, newFragment)
.addToBackStack(null)
.commit();

The new step is calling addSharedElement() to specify what Views to share between the Fragments.

The View passed to addSharedElement() is the View in the first Fragment you want to “share” with the second Fragment. The transition name here is the transition name of the “shared” View in the second Fragment. If the View in the first screen has the transition name “foo” and the View in the second screen has the transition name “bar,” then your want to pass in “bar”.

Specifying the transition animations

For the shared element:

Note that you need to call these methods on the second Fragment. If you set these on the originating Fragment, nothing will happen.

You can animate the transition for all non-shared Views as well. For these Views, use setEnterTransition(), setExitTransition(), setReturnTransition(), and setReenterTransition() on the appropriate Fragment.

Each of these methods takes in a single parameter, which is the Transition animation to use for the transition.

We are going to keep our animations fairly simple. We will use a custom transition for the movement of the image (more on that in a second), and a Fade exit transition.

Transition animation classes

I mentioned that we need a custom transition to move our image. Here it is:

This transition is just a set of three transitions that will play together:

If you are curious about how these three interact together, try out the sample app and try removing one at a time to see how the animation breaks.

You can also define more complex transitions like this using XML. If you prefer XML, check out the Transition documentation.

Putting it all together

We are using our custom DetailsTransition for our shared element enter and return animation. All the other views in our first screen will exit with a Fade transition, and the non-shared views in the second fragment will enter with a Fade as well.

There you have it! An easy to implement transition between two Fragments!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

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