One of the cornerstones in Material design are meaningful movements between screens. Lollipop provides support for these animations in the form of a transition framework between Activity and Fragment. Since there are not so many articles on this topic, I decided to write my own!

Our final product will be fairly simple. We will make an application gallery with cats. Clicking on the image will open a screen with details. Thanks to the framework, the transition from the image grid to the window with details will be accompanied by animation.

If you want to see what happened - the finished application is on GitHub .
')

Support for previous versions of Android?

I have two news for you: good and bad. The bad news is that prior to Lollipop, this framework does not work. Despite this, the problem is solved by the methods of the library of support with which you can implement the animated transitions available in API 21+.

The article will use the functions from the library of support to ensure the movement of content.

Transition Names

For the association of the View on the first screen and its double on the second, a connection is needed. Lollipop proposes to use the “ transition name ” property to link the View each other.

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

• In the code, you can use ViewCompat.setTransitionName() . Of course, you can also just call setTransitionName() if support starts with Lollipop.
• To add to XML, use the android:transitionName attribute.

It is important to note that inside a single layout ( layout ), transition names must be unique. Keep this in mind when organizing transitions. Specifying the transition name for a ListView or RecyclerView will set the same name for all other elements.

Configure FragmentTransaction

Setting up FragmentTransactions should be very familiar to you:

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

To specify which View we will pass between fragments - use the addSharedElement() method.

The addSharedElement() View to addSharedElement() is the View from the first fragment that you want to share ( share ) with the second fragment. The transition name here is the transition name in the divided ( shared ) View in the second fragment.

Customize transition animation

Finally, the moment came when we set the animation of the transition between fragments.

For shared items:

• To move from the first fragment to the second, use the setSharedElementEnterTransition() method.
• To setSharedElementReturnTransition() back, use the setSharedElementReturnTransition() method. Animation will occur when you press the back button.

Note that you need to call these methods in the second fragment, because if you do this in the first, nothing will happen.

You can also animate transitions for all non-shared View. For these View, use setEnterTransition() , setExitTransition() , setReturnTransition() , and setReenterTransition() in the appropriate snippets.

Each of these methods takes a single Transition parameter to perform the animation.

To create an animation, we will be very simple. We use our custom transition to move the image (more on this later), and disappear ( Fade ) on exit.

Transition animation classes

Android provides some pre-made transition animations that are suitable for most cases. Fade performs a fade animation. Slide animates the transition appearance / disappearance of the slide from the corner of the screen. Explode animation like an explosion, the image moves from the edges of the screen. Finally, AutoTransition will cause the image to fade, move and resize. These are just some examples from the package of movements, there are actually a lot more of them!

I mentioned that we need a custom transition for our image. Here he is:

 public class DetailsTransition extends TransitionSet { public DetailsTransition() { setOrdering(ORDERING_TOGETHER); addTransition(new ChangeBounds()). addTransition(new ChangeTransform()). addTransition(new ChangeImageTransform())); } } 

Our custom transition is nothing more than a set of three ready-made transitions gathered together:

• ChangeBounds
animates the borders (position and size) of our view.
• ChangeTransform
animates the view scale, including the parent.
• ChangeImageTransform
allows us to change the size (and / or type of scale) of our image

If you are interested in finding out how the three of them interact, try playing with the application, alternately removing one or the other animation, watching how everything breaks.

You can also create more complex animations using XML. If you prefer XML, then you will be interested to see the documentation on the website of android Transition
Transition
.

Together

The code that we ended up with turned out to be quite simple:

 DetailsFragment details = DetailsFragment.newInstance(); // Note that we need the API version check here because the actual transition classes (eg Fade) // are not in the support library and are only available in API 21+. The methods we are calling on the Fragment // ARE available in the support library (though they don't do anything on API < 21) if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { details.setSharedElementEnterTransition(new DetailsTransition()); details.setEnterTransition(new Fade()); setExitTransition(new Fade()); details.setSharedElementReturnTransition(new DetailsTransition()); } getActivity().getSupportFragmentManager() .beginTransaction() .addSharedElement(holder.image, "sharedImage") .replace(R.id.container, details) .addToBackStack(null) .commit(); 

That's all! A simple way to implement animation of transitions between two fragments is ready!