Posted on

Android Vector Path Animations Easy


android vector path animations

Designed by Freepik

Using Animated Vector Drawable with path transformation has never been a trivial thing. You need to have the same number of commands in start and end of animation. Which means that just downloading 2 vector icons and telling Android

You figure it out!

Won’t work.But there’s a tool which does exactly that!

So I recently saw a tweet from Alex Lockwood about a tool which does that magic that you always wanted Android to do itself. It finds missing SVG commands and fills them, of course it’s not going to be as perfect if you spent half of the day manually writing commands, if shapes are very different.

android vector path animations

Create AVD

All you need is two SVG’s, I use this site to get any vectors, then upload them to shape shifter and click the magic button.

android vector path animations

Now you can download it and only thing needed for AVD is animated_vector_drawable.xml

Enjoy on Android

Set it for any ImageView of FAB with

and start

android vector path animations

 

This is so much fun, the best thing Shape shifter doesn’t require any actions from, everything is automated. Don’t expect it to do extraordinary job. If you’re interested in doing some manual work, check Roman Nurik’s AndroidIconAnimator as well, it’s more complicated, but it gives more control.

And technically you can use it not only for icon animations, but for shapes as well, svg is much easier that writing canvas path Java code. It’s not pre L compatible, but on those you can just disable animation, plus those phones are so slow, they better off without animations anyways

Ok, you can check GitHub repo here, it has bunch of other stuff, but you’ll find animated plus fab in there. Don’t forget to subscribe, follow me on Twitter, Facebook, G+ and share with friends if you think they will benefit from it!

 

 


  • mohamed

    FloatingActionButton fab2 doasn’t work …i swear to god

    • Ihor Klimov

      Fixed false min sdk 16 version. It’s 21. Are you running it on pre L phone?

    • Fixed false min sdk 16 version. It’s 21. Are you running it on pre L phone?

  • Thanks a lot for spreading the word about Shape Shifter! Glad you’re finding it useful. If you haven’t seen them already, I have my own sample app filled with Android icon animations as well (blog post, github repo).

    By the way, if you have any suggestions or feature requests for Shape Shifter, don’t hesitate to let me know here! For example, if you have two icons you want to morph in some way and Shape Shifter isn’t making it possible… that’s the sort of thing I’d love to know about so I can improve the tool! Your blog post actually gave me an idea… I tried to create a morphing animation from a cross to a checkmark like this but wasn’t able to do it… so I’m going to try to think of a way to fix that. 🙂

  • Android Developer

    How come I can’t see the magic-wand button, and the small markers of what can move, etc…
    I remember the demo was on the overflow menu, and now it’s at the bottom.
    The side-by-side Vectors are also not preset.
    This is what I see:
    https://uploads.disquscdn.com/images/066732d90adc139898194f5955f8d68b98385cdf2e28b92808ed6d42f0ec70f9.png

    • Wow, he changed it radically. No more magic button

      • Hi all. Im going to publicly announce the change in a couple hours but in the mean time you can check out this video to see how to access the magic button. 😛

        https://youtu.be/2aq3ljlnQdI

        I’ll give more details on my Google+ in a couple hours so stay tuned.

        • Android Developer

          How come the demos don’t show it this way, with the 2 vectors?

        • haha thanks for replying!

      • Android Developer

        Yes, and also the side-by-side vectors, including the markers of what goes where with numbers.
        They can help a lot to figure what will animate to where.