Topeka : Transition Animations [2 ]

Smital Desai
Jan 2 · 4 min read

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

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 ?

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()

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

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

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.

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:

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