Android で VectorDrawable を利用する

はじめに

Android 5.0から vector を使ったリソースを扱えるようになりました。
vector型のdrawableを使用することでデザインを損なうことなく画像を拡張でき、画面密度ごとに画像を用意しなくてもよくなります！

VectorDrawable
ベクター型ドローアブルを作成する

そしてAndroidStudio1.4で .svg から VectorDrawable を生成する VectorAssets がサポートされ、vectorが簡単に扱えるようになりました。
実際に業務で導入してみたのでこちらにまとめてみます。
（まだ使い始めたばかりのため誤っている箇所があるかもしれません、ご了承ください。）

手順

1. 使いたい画像を .svg で書き出す
2. svg で書かれたファイルを Vector Asset Studio を使って vector に変換する
3. vector に変換したファイルを res/drawable に .xml として格納する（Vector Asset Studio を使用した場合は自動で格納されます）
4. 必要に応じて中身のパラメータを変更する
5. そのまま @drawable/hogehoge 画像として使う

まずは事前準備

build.gradleに

build.gradle

classpath 'com.android.tools.build:gradle:1.4.0-beta3
classpath 'com.github.ben-manes:gradle-versions-plugin:0.11.3

を追加します。

Vector Asset Studio を使って svg -> vector 変換

プロジェクトの res/drawable で New - Vector Asset を選択します。
すると Vector Asset Studio が表示されるので、.svg で書きだした画像を選択します。
公式のMaterialIcons一覧から読み出すこともできます。
そして必要に応じて下記のパラメータを変更します。（Override default size... はMaterialDesign用にサイズを最適化してくれるようです。）

各パラメータの説明

• android:width, android:height
  画像を表示させるサイズ(dp)を指定します。
  画像をImageViewなどで表示させる際、このサイズより大きくしたり小さくしたりするとジャギったりぼやけたりします。
  基本的には 画像px = 表示dp で扱うようです。（公式のMaterialIconsもそうなっています）

• android:viewportWidth, android:viewportHeight
  実際の画像サイズ(px)を指定します。
  書きだした画像のサイズを指定してください。

• android:fillColor
  pathの色を指定します。
  ここを変更するだけでpath全体の色が変わります。

• android:pathData
  画像を描画するためのpathです。
  画像px = 表示dp でもそうでなくても特に問題なく表示できます。
  例えば48pxで書きだした画像を32dpとして画面に表示させても表示に違和感がでません。
  同じpathdataの画像でも極端でなければwidth, heightをいじって様々なサイズに流用しても大丈夫そうです。

その他

xxhdpi基準でデザインする場合

• vectorに指定する dp を px / 3 にする
• サイズ / 3 で書き出してもらい、開発側でサイズ指定する際は dp = px にする

のどちらかがよさそうです。