Andrey Vashchenko

Android Animations: Transitions, pt. 1

Animations in apps appeared enough time ago, its beauty too and complexity. Taking into account the fact that animation is a set of frames that switch by delay, I decided to learn Android animations from scratch.
Andrey Vashchenko
Android Developer
Animation by Transition is an object (View) properties change based on object location on display and set effect. Since Transition has appeared in Android (4.4 KitKat version) there's a conception of Scene, and the changing between scenes is called Transition. Roughly speaking, you need start and end scenes to make an animation. For example, you can create one layout, copy it and change the object size on copy to bigger to make animated increasing. As a result we'll have something like this:
You can create such kind of animations of varying difficulty as much as you want, it depends on developer's (or designer) imagination. In my case I used Transition mechanism for smooth switching between screens. Based on this, scenes will be layouts for two activities yet (or fragments) and switching will be between them.
Pic. 1. Transition's work for switching between screens
Practice
Firstly turn on Transitions display whether in styles:
or in activitiy:
Then you need to set effects (Transition types). I'll describe the most popular:

- ChangeBounds: Is for coordinates and in-layout elements sizes changing;
- Fade: Smooth element appearing (Fade.IN) or disappearing (Fade.OUT);
- Slide: Allow the element to leave out the chosen border;
- ChangeImageTransform: Animate image matrix transition inside ImageView. You can smoothly change image size and scaleType;
- ChangeClipBounds: Animate clipBounds param changing of elements;
- AutoTransition: Set of effects changeBouns, Fade.IN, Fade.OUT. It's used by default.
Besides, you can write your own Transition that won't have any common with information above.

I decided to repeat the effect from second picture (below). In my case I used changeBounds and changeImageTransform effects.

Then make up two layouts. View, that will be under animation, has to have transitionName parameter, it's set the same on both layouts and there's start and end scenes appearing.
After that you need to transfer some data to the next activity and some parametres for animation playing - ActivityOptions.

iv1.setOnClickListener {
startActivity(Intent(this, ImageActivity::class.java).putExtra("photo", R.drawable.honeycomb), ActivityOptions.makeSceneTransitionAnimation(this, iv1, "photo").toBundle())
}
As you can see on code example, for the parametres we take transitionName and view.

Forgot about effects. In resources you have to add Transition directory, create transitionSet in it and write effects that you need.
Then go back to styles and write transitionSet for enter in activity and exit from activity animations.
It's sure that you can use different sets, I used same.

So it's time to look at the result of all these actions.
Looks not bad, and it's not thinking about activity life cycle. Let's go further: turn the same effect but with holder recyclerView. All is the same as in previous case: set the same transitionName in holder elements and target activity elements.
Let's write simple adapter with callback that will return some data for the next activity by click on holder, and view that will be in animation. As I set 2 views for animation, let's use makeSceneTransitionAnimation function overloading that gets variable array of Pair<View, String> elements, so each element transfer view and connected TransitionName.
Launching…
Very good and fast.

For this article I used Harb information: https://habr.com/ru/post/243363/, animation examples in the beginning also from here. Official documentation on Google developers' platform: https://developer.android.com/training/transitions/start-activity.
Thanks for reading!