Image for post
Image for post

Topeka : Transition Animations [2 ]

Learn transition animations technique from the open source Topeka App.

Welcome to the 2nd part of this series. This time we will take a look at the transition that takes place when user clicks on Category and reaches the quiz section. If you haven’t gotten a chance to look at the first part , i would encourage you to take a look at

Now, lets take a look at how this transition looks like

Image for post
Image for post

Observations:

  • Once you choose the category — text description flows and gets set as toolbar title
  • Once the transition is over the back button appears over the toolbar
  • Imageview at the center of the screen is scales and fades in after certain time

This is how the v21/quiz_shared_enter.xml defines the transition

First interesting observation:

How does the back button appears after the toolbar text has finished transitioning ?

Image for post
Image for post

I think its pretty clear now about what happens.

At the start of the shared element transition ( Toobar Text ) , in the onSharedElementStart() callback , we set the scaleX, scaleY property of the back button to 0 , effectively making it disappear.

At the end of the shared element transition ( Toobar Text ), in the onSharedElementEnd() callback, we set the scaleX, scaleY to 1 and fade in the back Button.

  • Once you choose the category — text description flows and gets set as toolbar title

Overall Intention is to animate the textsize and text padding change of the shared textview in the CategoryActivity and QuizActivity. This is achived using TextSharedElementCallback and TextResizeTransition

So lets see first about when the overridden methods in the TextSharedElementCallback() are called.

onSharedElementStart()

=> In Activity Transitions, onSharedElementStart is called immediately before capturing the start of the shared element state on enter and reenter transitions and immediately before capturing the end of the shared element state for exit and return transitions.

onSharedElementEnd()

=> In Activity Transitions, onSharedElementEnd is called immediately before capturing the end of the shared element state on enter and reenter transitions and immediately before capturing the start of the shared element state for exit and return transitions

Please refer to https://developer.android.com/reference/android/app/SharedElementCallback

This is how the shared element transition happens

  1. In the constructor of TextSharedElementCallback, inital size and padding of the textview is passed [ That is the value present in CategoryActivity ]
  2. Now when the TextSharedElementCallback -> OnSharedElementStart is called, the measured value of textview size and padding is stored in local variables and the textSize and padding has been set to the one calculated in #1 [ This becomes initial state ]
  3. These values are then passed to custom transition defined in TextResizeTransition

4. Now when the TextSharedElementCallback -> OnSharedElementEnd is called, the stored values in #2 are set again on the textView which are the final values in the QuizActivity

5. These values are then passed to custom transition defined in TextResizeTransition

6. The captured values in #3 and #5 are then animated in the custom transition defined in TextResizeTransition by overriding createAnimator()

Image for post
Image for post

We can actually see the effect by totally commenting out the TextSharedElementCallback Implementation

Image for post
Image for post
Image for post
Image for post

Here we can see that the textSize and padding of the shared textView is already at its final state without the animation

If we just implement the onSharedElementStart

Image for post
Image for post
Image for post
Image for post

We can see that the even after the transition, the size of the textView is same as that of the calling activity and since we are not redrawing the textView after final state, the back button gets drawn on top of it.

Image for post
Image for post

That is it really that i wanted to share in this post. If you liked the article, please clap for it and don’t forget to share with other devs. I am going to continue and explore the animations in this app further and will continue to share my learnings.

You can follow me on twitter Smital Desai for #android and #python content. Thank you for reading the post.

Resources:

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