Posted on

Android icon animations


Android Icon Animations

It’s unbelievable how much do most of the Android apps miss out on animations. In particular – icon animations. Once you see an app that utilizes animation in an amazing way you can’t go back. Of course I’m talking about the Plaid app by Nick Butcher. The first time I saw it I was amazed. There’s so much thinking was spent into designing every single piece of it. And yes, as you guessed, today we’re going to look at just a little part of making an Ultimate Android App – icon animations. Exited already? Let’s get started!

 Why icons?

As a part of the big responsive design, icons add a huge value, they make your app feel alive and make it really fun to use! How many times do you want to go back to an app and click static boring button which doesn’t CARE about you ever clicking it. Now how about a button responding each time you click it in a funny way just like a dog exited to see you when you’re home? Completely different experience, right? Apparently that’s not the biggest  priority of the most apps, but it is today for us, let’s make some apps that are fun to use!

And we will make a simple icon animation which will be looking like this.

Android Icon Animations

That’s a pencil icon I got at material design icons where I get all of my vectors. It has some rubber on top which I decided to animate like a pen. Though it’s a design decision and you can assume it’s a click pen. And it moves slightly to give a user a clue that he’s going to write something.

How it’s done

If you worked with Animated Vector Drawable – great, if no, not a problem. There’s 3 main steps to create an animated icon like this. And there’s a great resource that just recently came up – Android Icon Animator by Roman Nurik which I suggest you trying, you can create all of this on that site and just import it to XML file without writing any of XML code. Pretty handy, though it’s still in development, I can’t remove animations there yet.

Vector Drawable

That’s what all of us exited and we all absolutely love, it’s super easy to use, take less space than PNG icons and you can edit it! I downloaded pencil SVG from material design icons. Why SVG, not XML? That’s because as you see pencil vector consists of two paths, but they’re combined and I used Adobe Illustrator to unbind them. After that I got a this file. pencil.xml

 

Animation

Fist part done, let’s get to the next. For animating we’ll use Android Object Animator class and it has pretty straightforward XML attributes. But first let’s break the animation down. There’s two simultaneous animations on the icon above – clicking pin and a slight rotation around the center of the icon. Rotation might seem pretty basic and does not reflect the actual writing. I tried to add some x, y transition to the icon which is like an actual wring, but seemed to complex and ugly. Plus considering that the animation should be short, that’s better to keep it as simple as possible.

 

Clicking pin

First animation – clicking pin. The best approach to achieve it – path animation. If you not familiar with SVG paths they might seem to you of a too low level. The idea is simple – you got an initial icon (position) path and you got an end position path. Just create this object animator and Android will take care of animating it. Sounds too good to be true, isn’t it? Well, because it is.

You gotta have the same number of path commands in start path and end path. Commands like ‘move to x,y’, ‘draw line to x,y’ ‘draw curve to….’. And that’s where the complexity comes in. Plus picking X, Y values by yourself could be tricky. Did I say tricky? Impossible rather! That’s why I downloaded vector as SVG and edited it in Adobe Illustrator. Move the pin to ending position, save this file and get the end pin path commands.

Andorid Icon Animations

You can get path commands by multiple ways: the easiest – open .svg file in text editor and pick it up, but it could be hard for you to pick the right path, so you might want to upload svg file to Android Icon Animator  and pick it from there, it will highlight the right path.

Since that’s the same shape in the beginning and at the end of animation, we don’t worry about the number of commands, but it will get tricky if you have something more complex. That’s the resulting first animation, click.xml

Roate animation

The second animation is slight rotation counterclockwise wise and back. That’s the resulting file, rotation.xml

 

Animated Vector Drawable

And the last piece of it is to combine two files from above. By creating this file in drawable directory, avd.xml

 

Second line declares the static drawable. Two targets are animations, first is for top, where top is the exact name of path that we animate from pencil.xml. The second is for pencil group from the pencil.xml. Path animations require target as path tag. And let’s set it for your ImageView src and set onClickListener

 

Animate it!

I created this method in MainActivity, it gets AnimatedVectorDrawable from it and starts animation.

There’s a method on ImageView – animate, but it returns ViewPropertyAnimator class and then you programmatically setup animation in Java, that’s not what we need.

Support pre Lollipop

What about pre 21? No problem, as it comes from name – AnimatedVectorDrawableCompat. Just replace android:src with app:srcCompat and this class will be generated. And update your animate method

On pre Lollipop compat class will be generated instead, but some why it gives me NoClassFound as well, that’s why I check for build version first. Unfortunately pre Lollipop doesn’t support path animations! It will crash, so optimize your avd.xml file for pre 21 versions.

 

Alright, that was a simple icon animation. By using those principle we can make really awesome animations. You can clone this repo to test it yourself. Thanks for reading and don’t forget to subscribe to receive latest updates!

 

 


  • EdgarMacas

    thanks, Excellent articles waiting for many more on animations