2023/7/25

【Android Studio】Vector Asset Studioの使い方！マテリアルアイコン画像

この記事からわかること

Android Studio/KotlinのVector Asset Studioとは？
マテリアルアイコンを表示させる方法
SVGやPSDファイル

index

[open]

＼アプリをリリースしました／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

環境

Android Studio：Narwhal Feature Drop
Kotlin：2.1.10
Material3
AGP：8.9.2
Gradle：8.11.1
Mac M1：Sequoia 15.4

公式リファレンス：さまざまな密度に適用可能なベクターグラフィックを追加する

Vector Asset Studioとは？

Vector Asset Studio(ベクターアセットスタジオ)とはAndroid Studioに組み込まれているベクターグラフィック(SVG・PSD)を作成・編集・統合するためのツールです。

このツールを使用することでSVG(Scalable Vector Graphic)ファイルやPSD(Adobe Photoshop Document)ファイル、またはアプリ内で既に組み込まれて使用できるマテリアルアイコンをXML形式に変換してAndroidプロジェクトに組み込むことが可能になります。これにより端末の解像度を意識することなく自動でさまざまな画面密度に合わせて同じファイルのサイズを変更してくれるようになります。

画像の管理もXML形式に変換する方法で入れ込むことで「画像のピクセル密度」対応のために複数画像を用意して導入する必要がなくなるので管理も楽になり、ファイルも1つで済むのでAPKサイズも低減させることが可能です。

SVG画像をプロジェクトに取り込む

SVG画像をプロジェクトに取り込むにはres/drawableを右クリックして「New」＞「Vector Asset」をクリックします。「Asset Type」は「Clip art」だと既存のマテリアルアイコンを「Local file」だとプロジェクトに組み込んだオリジナルの画像を使用できるので「Local file」を選択します。

ここに対象のSVGファイルを指定して「Next」をクリックするとres/drawable/の中に「ファイル名.xml」というXMLファイルが生成されます。

マテリアルアイコンを使用する

マテリアルアイコンを使用するにはres/drawableを右クリックして「New」＞「Vector Asset」をクリックし、「Asset Type」を「Clip art」にすることて既存のマテリアルアイコンを使用できます。

3段目の「Clip art」をクリックすると用意されているマテリアルアイコンの一覧が開きます。ここから好きなアイコンを選択できます。

2段目の「Name」にはこのマテリアルアイコンの名称を設定できます。この名称がのちのファイル名にも適応されます。あとはお好みでサイズやカラー、透明度などを選択し「Next」をクリックします。

すると保存先を確認できるので問題なければ「Finish」をクリックします。

これでres/drawable/の中に「ファイル名.xml」というXMLファイルが生成されます。

ビューに反映させてみる

実際にアプリの画面で表示させるにはImageViewを使用します。app:srcCompat属性に先ほどのファイルを指定することで画面に表示されるようになります。

<ImageView
    android:id="@+id/logo"
    android:layout_width="300dp"
    android:layout_height="100dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:srcCompat="@drawable/android" />