All posts
Android

Meaningful Motion with Shared Element Transition and Circular Reveal Animation

Mariusz Brona

Mariusz Brona

 

First glance

The circular reveal animation is one of the most popular animations in a Material Design paradigm. Following official android documentation:

Reveal animations provide users visual continuity when you show or hide a group of UI elements.

So with this kind of animation we’ve got a powerful tool to create delightful animation. Why don’t we go a step further? Today I will show you cool transition by using the combination of circular reveal animation, fade animation and shared element transition. Below You can see the difference that it provides:

What do we have:

What do we want to achieve:

 

First step: Shared Element Transition

Android Lollipop was released with a new concept of the design – Material Design. With this release we’ve been introduced to new cool features, just like shared element transitions. Thanks to this tool we are able to get user along with the motion and achieve one of the main points of material design. We can do it with three simple steps:

Declare shared element transition name

First, we have to declare shared element between two activities we are transitioning it. We can do it in two ways – in the XML or in the code itself. This is how XML should look like:

or

When we do it this way, we have to declare the same transition name in Activity we are transitioning to, and then fire this Activity with one of those methods:

or

 

Create arc motion with transition animation

In the second Activity, in our example called ContactActivity, we have to set proper Enter Transition. We are doing it with this piece of code:

First look into java code. We are inflating a transition that is declared in our xml file. We are setting duration, and then we are setting the inflated transition as SharedElementEnterTransition. And there is a tricky part – to achieve this meaningful motion effect, we have to implement the TransitionListener. In onTransitionEnd callback we have to start the Circular Reveal Animation. Secondly, look into XML code. We have declared a transitionSet with changeBounds and arcMotion. The first is responsible for capturing views bounds in first and second activity and animate it between them. The second is responsible for creating this arc motion. We also declared there minimumHorizontalAngle and minimumVerticalAngle to force curvature between two points.

In onTransitionEnd callback we have the animateRevealShow() method, which takes us to the second part of this article.

Second step: Circular Reveal Animation

To complete the full meaningful motion, we have to make a circural reveal, and then fade the layout in.

In the first animateRevealShow method we have to get the centerX and centerY dimension. Then we have to call the second method that I transfered to the GUIUtils class to skip repeatability of the code. So take a look into GUIUtils method animateRevealShow and explain every parameter in this method:

We have context that is used to retrieve color from @ColorRes value and duration of the animation from resources. We have centerX and centerY parameter, rootView that we are making circular reveal on and custom listener to communicate between the AnimatorListener and our Activity. When the animation has ended, we are informing the listener to fade the views in. So there is method initViews() that is fading the views in:

The mLLContainer and mIvClose are the LinearLayout with icons and ImageView with close action icon.

Third step: Return to MainActivity

As You can see, the meaningful motion is not created one-way. When we click on the close icon in the left top corner, or press back button we are finishing ContactActivity with Hiding Circular Reveal Animation and return shared element transition. The second one is handled by the framework, so we don’t have to worry about it. The first one we have to implement so I will explain it below:

Override the onBackPressed() method in Activity

After clicking back pressed button we have to make hiding circular reveal animation. The startRadius is a full width of view, the final radius is the FloatingActionButton width divided by 2. When the animation ends, we have to inform the Activity with the OnRevealAnimationListener to call super.onBackPressed(). After that the FAB will be animated with arc motion to the MainActivity.

Conclusion

Android Lollipop gives us a big range of tools to implement amazing and cool UI with meaningful motion and great transitions. Although it’s still available only on 30% of the devices, the audience is getting bigger and Material Design concepts are here to stay.

Thank You for reading this, and I invite You to comment this article below.

Cheers!

 

Leave comment

  • karthik rk

    Hi,
    Awesome tutorial Cheers 🙂
    is it possible to implement the same transitions using fragments?

    • Mariusz Brona

      Hey, thank You for Your kind words.I think it is possible to achieve the same effect using fragments, I’ll check on that 😉

    • Mariusz Brona

      Hey, I’ve just updated github repository, now everything should be working 😉

  • grey

    your repository on github does not match your code example here

    • Mariusz Brona

      Hey, I’ll fix that soon and inform You here 😉

    • Mariusz Brona

      Hello, sorry for that, now everything’s working 😉

  • http://yifeiyuan.me 程序亦非猿(Alan)

    your repository on github does not match your code example here

    • Mariusz Brona

      Hey, right now everything’s fine 😉

  • Mariusz Brona

    I’m sorry for the mistake. I’ve been using this repo in other presentations on our android weekly meetings and accidentally pushed some other code here. Now everything should work, cheers 😉

  • Aiman Baharum

    How did you get lambdas to be working with Android Studio? I saw you’ve been using it in initViews() block. I thought it was a copy-paste error, but it also appears in your Github repo.

  • Jack

    Great tutorial! Your animation is really awesome. Our previous work is also about app transition animation: https://github.com/Cleveroad/Bitutorial. Could you give your opinion, please?

    • Mariusz Brona

      Hi! Thank You for your comment, I’m really glad that You liked it 🙂 Of course I will look into your project soon and leave feedback, cheers 😉

  • http://www.jaziire.ir مهدی پیشگوی

    this tutorial work on android 4.x ???

  • PetrParkr

    Hi! My onTransitionEnd never called what can be happening?