Android – render and animate with SVG

Few days back, we released the android version of Peekaboo HD. It’s a series of apps focusing on introducing animals and their voices to kids in a very pleasant way. It’s minimalistic and quite fun for toddlers. (more details here)

We chose SVG for rendering the images considering the smaller size and better scaling capabilities that it provides. This was an interesting choice considering android doesn’t support SVG natively, and the browser support for SVG started very recently (3.0+). We went the route of SVG renderers. We looked at few SVG renderers available and finalized AndroidSVG (by Paul Lebeau).

AndroidSVG rendered our svg files the best and seems more active than the other libraries available. (Also, Paul responded to our query email very promptly 🙂 ). This solved our problem for finding a good SVG renderer. Next up was animations..

Peekaboo animates the animals to add some fun and engagement. AndroidSVG doesn’t support SVG animations, so we chose to do a custom frame-by-frame animation.

Looking at the options, AnimationDrawable seemed almost perfect. So, we dynamically created an AnimationDrawable object and used the addFrame() method to add the Drawables to it. AndroidSVG gave us a picture object, which we could add as PictureDrawable. Here’s a brief of that particular code:

AnimationDrawable animationDrawable =
new AnimationDrawable();

SVG svgImage1 = SVG.getFromResource(context,

new PictureDrawable(
svgImage1.renderToPicture(), 50));

SVG svgImage2 = SVG.getFromResource(context,

new PictureDrawable(
svgImage2.renderToPicture(), 50));

//finally, set it to the imageView

That’s pretty much it and we have an animated Animal. We had the animation choreographed for the voice, so that it seems in sync. We achieved that by varying the animation duration of each frame.

Hope this helps you if you’re trying out something similar. Let me know if you’ve been successful in other ways as well..