Posted on

Android Animated Vector Drawable Animations


android animated vector drawable animations

 

Hi, I saw this cool design and decided to implement the most interesting thing there – medical bot typing indicator. I like the final screen as well. Probably will make it in the next post. Let’s get to it!

 

Design

First of all, here’s what it looks like in original

android animated vector drawable animations

I have a post about the easiest way to implement icon animations on Android – with Animated Vector Drawables (SVG)

I’m using a tool by Alex Lockwood – Shape Shifter, it has a great interface for creating Animated Vector Drawables or just editing your vectors. You can play the animation without the need of compiling it and installing to your Android. And there’s an export to .xml file feature which is great!

Trim Path Start/End

If you’re slightly familiar with Animated Vector Drawable, then you know that this animation is easy to implement with trimPathStart/End parameters

What trimPathStart parameter does is it determines from which position to start drawing your vector. Where 0 – is the very start and 1 – is end

And trimPathEnd vice versa, determines where to end drawing your vector. 0 – start, 1 – end.

Hence, default values to draw the full vector: trimPathStart = 0, trimPathEnd = 1. Simply by animating those values you get this cool animation

If not but one little thing

SVG’s Aren’t What They Seem

In particular, SVG’s from pathData. What do I mean by that? First I need an actual SVG for this heart rate. The full path

There’s no difference between .svg and .xml vector drawable, as long as .svg uses path data, it’s all the same. Here’s what I found on the internet

android animated vector drawable animations

Pretty similar, right? But my animation with trim paths wouldn’t work at all out of the box

Because trim paths animations work mostly well with linear simple commands, that at any way of it look just like incomplete shape. Basically stokes. Well, it does look like a stroke(line) on the image, but in reality, this SVG is built out of some insane SVG commands

Why you’d ask, it’s extremely simple shape to build. Because most SVG’s are created in some editors like Adobe Illustrator, in a visual editor, where a person doesn’t interact with SVG commands at all. and then it’s exported to SVG format. So in result, it will look the same, but commands used to create this shape might not be the same as you’d logically use

That’s obviously computer generated path, why would a person use curves here?

Create Your SVG

So using Shape Shifter and original SVG as a background I created a new SVG just from simple lines. Added two animations and then exported to .xml file. Here’s the result

heart_rate.xml

I like that it’s in one file, before I used to use multiple which is quite messy. Then you set it for your ImageView

And here’s Java onClickListener, to show animation

And the result

android animated vector drawable animations

OK, hope you found it fun and learned something new. You can get course code here. Don’t forget to subscribe, follow me on Twitter, Facebook, G+ to get notified about new posts!