Androidアプリを作成しているとアプリ内のアイコン画像を追加したい、ということありますよね。
そんな時は画像の解像度を気にせず使用できる、ベクター画像を使用すると便利です。
Android Studioでは、ちょっとした手順を踏めばベクター画像をdrawableリソースの中にxmlファイルとして生成してしてくれます。
簡単なので、早速進めてみましょう。
Android Studioを開こう
まずはAndroid Studioを開いて、ファイルの一覧を確認します。
ベクター画像の登録画面を開こう
ファイルの一覧の『app』の場所で右クリックをしましょう。
そこから『新規>ベクター・アセット』をクリックします。

すると『ベクター・アセットの構成』という画面が開きます。

クリップ・アートで登録してみよう
項目の一番上に『アセット・タイプ』という項目があります。まずは『クリップ・アート』の方。
こちらを選択するとGoogleの提供しているマテリアルアイコンと同様のものを使用することができます。

この部分をクリックすると、一覧画面が表示されます。

一覧が表示されました。
好きなアイコンを選択して、OKをクリックしましょう。

選択したアイコンが表示されました。

名前が変更できます。
自動で生成されていますが、必要に応じて変更しましょう。

サイズや色、透明度が変更できます。
生成されるxmlで編集もできますが、現時点で変更が必要そうでしたら内容を編集してください。

設定が完了したら『次へ』をクリックしましょう

すると確認画面が表示されます。
出力ディレクトリーや名前等に問題がなければ『完了』をクリックしましょう。

これで無事drawbleの中にxmlが生成されました!

必要に応じてコードを編集することもできます。

画像を使用するときは通常の画像と同じようにsrcで指定すると、使用することができます。

ローカル・ファイル(自分の好きな画像)で登録してみよう
次に自分の用意したファイルを設定する方法をご紹介します。先ほどと同じ手順でベクター画像の登録画面を開いてください。
そこで次はアセット・タイプを『ローカル・ファイル』にします。

するとパスの入力画面が表示されるので、フォルダのアイコンをクリックしましょう。

自分の用意した画像を開いて選択、問題なければ『OK』をクリックします。
今回はSVGファイルを使用します。

自分の用意したアイコンがプレビューに表示されました!
名前やサイズ、透明度などは必要に応じて変更してください。
色は単純なSVGであれば生成されたxmlで変更できます。

クリップ・アートの時と同じ要領で、問題なければ『完了』をクリックします。

これでdrawbleにファイルが生成されました!
こちらも画像として、問題なく使用できます。

最初は悩むかもしれませんが、覚えればとても簡単にベクター画像を追加できます。
ぜひ、試してみてください。