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

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

この記事からわかること

  • Android Studio/KotlinVector Asset Studioとは?
  • マテリアルアイコン表示させる方法
  • SVGPSDファイル

index

[open]

\ アプリをリリースしました /

みんなの誕生日

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

posted withアプリーチ

環境

Vector Asset Studioとは?

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

このツールを使用することでSVG(Scalable Vector Graphic)ファイルやPSD(Adobe Photoshop Document)ファイル、またはアプリ内で既に組み込まれて使用できるマテリアルアイコンをAndroidプロジェクトに組み込むことが可能になります。

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

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

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

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

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

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

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

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

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

これで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" />
【Android Studio】Vector Asset Studioの使い方!マテリアルアイコン画像

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。

searchbox

スポンサー

ProFile

ame

趣味:読書,プログラミング学習,サイト制作,ブログ

IT嫌いを克服するためにITパスを取得しようと勉強してからサイト制作が趣味に変わりました笑
今はCMSを使わずこのサイトを完全自作でサイト運営中〜

New Article

index