Since the very beginning, one of the most annoying aspects of using VectorDrawables on Android has been the lack of a reliable SVG converter. Google has recently made huge strides towards improving Android Studio’s SVG-to-VectorDrawable tool in order to improve this experience.

However, there has always been one major issue for me: the tool doesn’t support batch conversion of SVGs and can’t be invoked from the command line. Working at Lyft, it’s not uncommon for me to need to convert hundreds of SVGs into VectorDrawables at a time. Having to go through Android Studio’s GUI in order to convert each SVG one-by-one is simply not realistic.

Today I am open sourcing the first alpha release of an animation library I’ve been writing named Kyrie. Think of it as a superset of Android’s VectorDrawable and AnimatedVectorDrawable classes: it can do everything they can do and more.

One of the coolest projects I worked on during my 3 years at Google was Google Expeditions, a virtual reality app that allows teachers to lead students on immersive virtual field trips around the world. I especially enjoyed working on the app’s field trip selector screen, which renders a SurfaceView behind a beautifully designed card-based layout that allows the user to quickly switch between different VR experiences.

Creative customization is one of the tenets of material design; the subtle addition of an icon animation can add an element of wonder to the user experience, making your app feel more natural and alive. Unfortunately, building an icon animation from scratch using VectorDrawables can be challenging. Not only does it take a fair amount of work to implement, but it also requires a vision of how the final result should look and feel. If you aren’t familiar with the different techniques that are most often used to create icon animations, you’re going to have a hard time designing your own.

This blog post covers several different techniques that you can use to create beautiful icon animations. The best way to learn is by example, so as you read through the post you’ll encounter interactive demos highlighting how each technique works. I hope this blog post can at the very least open your eyes to how icon animations behave under-the-hood, because I genuinely believe that understanding how they work is the first step towards creating your own.

Say you want to change the background color of a Button. How can this be done?

This blog post covers two different approaches. In the first approach, we’ll use AppCompat’s Widget.AppCompat.Button.Colored style and a custom ThemeOverlay to modify the button’s background color directly, and in the second, we’ll use AppCompat’s built-in background tinting support to achieve an identical effect.