Androidはワンツーパンチ 三歩進んで二歩下がる

Android卵プログラマーの記録ブログ

Material DesignのsvgアイコンをAndroid StudioでVector Asset Studioを使ってVectorDrawableのxml形式に変換する方法

GoogleのマテリアルデザインのアイコンをAndroid Studioで簡単に使えるようにして普通の画像に近い感じでImageViewで使えるようにする方法です。
エントリの題名はマテリアルアイコンのことについてになっていますが、SVGまたはPSDフォーマットのベクター画像をVector Asset Studioでxml形式に変換できます。ベクター画像の制限についてはこちらをご覧ください。
公式サイトはこちらです。

Add Multi-Density Vector Graphics | Android Studio

マテリアルアイコンはこちらでも一覧が載っています。
material.io

前提

Gradle plugin v2.0以上。当エントリではv2.3.1を使っています。
AppCompat v23.2以上。当エントリではv25.3.1を使っています。

app/build.gradleに以下を加えておきます。
defaultConfig {
vectorDrawables.useSupportLibrary = true
}

作成

Asset Studioを起動します。

Android Studioのプロジェクトから/app/src/main/res/drawable のところで右クリックします。
New > Vector Assetをクリックします。

f:id:sakura_bird1:20170430102511p:plain:w300

Configure Vector Asset画面が表示されます。
Asset TypeはデフォルトでMaterial Iconが選択されています。

Iconボタンをクリックします。

f:id:sakura_bird1:20170430102806p:plain

Select Iconから使用したいアイコンを選択します。

Sizeは24dp固定ですがベクター画像なので拡大縮小による画像の劣化などを気にしなくていいので気にしないでいきます。

Nextボタンをクリックします。

保存先のフォルダを指定します。

Finishボタンをクリックします。

drawableフォルダにxmlが追加されています。
開いてみるとそれらしいコードになっています。画面右側のPreviewをクリックするとイメージが表示されるので確認するとちゃんと表示されました。

f:id:sakura_bird1:20170430103353p:plain


ImageViewで使用する時はsrcの代わりに
app:srcCompat="@drawable/ic_announcement_black_24dp"のように指定します。

f:id:sakura_bird1:20170430104009p:plain


参考にさせてもらったサイトさま
AppCompat — Age of the vectors – Chris Banes – Medium
VectorDrawable対応まとめ - Qiita



以上です。