Learn transition animations technique from the open source Topeka App.

There are various ways in which animations can be implemented in Android and sometimes it can be overwhelming. Animations are really necessary for delightful user experience but implementing them can be quite challenging, especially if you are not working closely with designers or worst you have to make these challenging job of crafting beautiful user experience when you are like me; in a sense having limited creative skills for visualising and creating such animations.

This is where i think we are very fortunate to have lot of open source apps to borrow inspiration from.

Even when i was new to the android app development, I tried the same approach to learn from Plaid-1.0. This was mostly to learn from the app and really jot down important features from learnings.

Its been quite a journey from android animation apis and I thought why not do the same exercise again to learn modern android animations and I reached out to Plaid but its getting re-rewritten so i had to hold my horses and i looked further and landed on Topeka App.

So if you haven’t come across this app yet, Please download it and load it up in the emulator. Now if you are like me, I can see that there are beautiful transitions happening

from SignIn page to category page : Shared Element transition of Avatar image but at this point i am not sure about the curved path that it took

Category page slides in from left

Click on the category , we move to Quiz screen : Shared element transition but wait the title really moved to ToolBar. Amazing but i not sure how do we achieve that using shared element transition. The back button starts to appear only after the tool bar text shared element transition is over. Looks slick.

Once you press the play button : There is reveal animation

Once you press submit fab : It turns into Rectangle, the color of the rectangle is green / red based on the accuracy of the answer and it moves off of the screen. At this point, I am like no way , how in the world would you do that

The first and foremost question to ask ourselves is, how do we take a closer look at these animations to even confirm if what i am saying is right or may be not entirely true. Go to Settings -> Developer Options -> Drawer Section and make animation related scales to 5x. The result of that is animations will be played slower and you can actually pick out about what is happening.

Now lets take a look at the same steps and see if we are able to get more granular steps involved in these beautiful transitions