<commit_before>---
layout: post
categories: posts
title: PathMorphing with AnimatedVectorDrawables in Android
excerpt: "A walkthrough of how to morph between two complex shapes using Androids native vector format."
modified: 2015-10-28
tags: [Android, AnimatedVectorDrawable, VectorDrawable, pathMorph, SVG, objectAnimator]
comments: true
image:
  feature: sample-image-5.jpg
  credit: WeGraphics
  creditlink: http://wegraphics.net/downloads/free-ultimate-blurred-background-pack/
---

In Android version 5.0, Lollipop, Google introduced its own vector graphics format, the VectorDrawable. The benefits of using vector graphics are numerous when dealing with a wide range of screen sizes, but in this article I’ll be discussing another aspect, the ability to manipulate how images are drawn in real time so they can move and change on the screen. In this case I’ll be showing how we can use the AnimatedVectorDrawable class to create this effect, morphing between the Android and Apple Logos.

<figure>
  <img src="{{ site.url }}/images/pathMorphing/pathMorphing-no-buttons-full-transition.gif">
</figure>

I’ll start with a brief introduction to VectorDrawables in Android, using a simple example:
<commit_msg>add GitHub link<commit_after>---
layout: post
categories: posts
title: PathMorphing with AnimatedVectorDrawables in Android
excerpt: "A walkthrough of how to morph between two complex shapes using Androids native vector format."
modified: 2015-10-28
tags: [Android, AnimatedVectorDrawable, VectorDrawable, pathMorph, SVG, objectAnimator]
comments: true
image:
  feature: sample-image-5.jpg
  credit: WeGraphics
  creditlink: http://wegraphics.net/downloads/free-ultimate-blurred-background-pack/
---

In Android version 5.0, Lollipop, Google introduced its own vector graphics format, the VectorDrawable. The benefits of using vector graphics are numerous when dealing with a wide range of screen sizes, but in this article I’ll be discussing another aspect, the ability to manipulate how images are drawn in real time so they can move and change on the screen. In this case I’ll be showing how we can use the AnimatedVectorDrawable class to create this effect, morphing between the Android and Apple Logos.

The full source code is [available on GitHub](https://github.com/lewismcgeary/AndroidtoAppleVectorLogo).

<figure>
  <img src="{{ site.url }}/images/pathMorphing/pathMorphing-no-buttons-full-transition.gif">
</figure>

I’ll start with a brief introduction to VectorDrawables in Android, using a simple example:

{'fraction_non_alphanumeric': 0.07069510268562401, 'fraction_numerical': 0.008688783570300158, 'mean_word_length': 5.148058252427185, 'pattern_counts': {'":': 0, '<': 9, '<?xml version=': 0, '>': 9, 'https://': 1, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3312511', 'n_tokens_mistral': 694, 'n_tokens_neox': 675, 'n_words': 308}