ひさしぶりの Android Studio 6 アイコン作成 (おてがるに)

やりたいこと

Android用のアイコンの作り方の紹介となります。

はるかとおいむかしこちらの記事のやりかたでやっていたのですが、
いろいろ変わっていたので、メモしておきます。

環境

Windows 11 21H2
Android Studio 2021.2.1 Patch 1
アイコン作成のツール : Vectr

完成イメージ

こんなアイコンを作ります。

大まかな流れ

1.VectrでForegroundの画像(*.svg)を作成する。
↓
2.Android StudioのImage AssetでForegroundの画像と、背景の色を指定する。
↓
3.完了

Step1. VectrでForegroundの画像(*.svg)を作成する。

Vectrはオンラインのツールで無料でかつsvgでエクスポートできるソフトなので、これを使ってみました。
登録しなくても使用可能でした。また、フォントも追加できるので便利です。
それではまずはこのツールを使ってForegroundの画像を作ります。

1.Vectrのサイトにアクセスし、UseOnlineボタンを押す。

2.NEW ARTWORK → 500x500 px のサイズを選択して、名前を入力してCreateする。

もし該当するサイズがなければ作ればよいと思います。

3.文字を入れてアイコンっぽくデザインする。
フォント名の右にある+ボタンをおすと、PCのフォントも登録できます。

4.文字を右クリックして、Outline Textをクリックします。 (これしないとだめだったのでやってます)

5.色を変更します。　白にしたかったので白くしたのですが、そうすると真っ白になってしまいます。
おそらく背景の色を変えたりもできるのでしょうが、よくわからないので今後の課題として、このまま続けます。
左側のアイコンからは文字が確認できます。

6.右上のエクスポートボタンからエクスポートします。
ファイル形式だけSVGにしてその他の設定はデフォルトのままにしました。

svgファイルが作成できたらstep1完了です。

Step2.Image AssetでForegroundの画像と、背景の色を指定する。

ここからはAndroid Studioの操作になります。

1.ファイルメニュー → New → Image Assetを選択して、Image Assetを起動する。

2.Image Assetで、Pathに先ほど作成したsvgファイルを指定して、
Resizeというところで、サイズを微調整します。

3.BackGround Layerタブを選択し、背景の色をお好みの色に変更します。
変更したらNextボタンを押します。

4.Finishボタンを押して完了です。

Step3. 完成

emulator(Pixel5 android8)で確認すると、こうなりました。

苦労した点

・Step1の手順を昔やったたりかたで、Excelとペイントで作って、背景を透過させて...とやったところ、
なぜか機種によってはアイコンの周りに白枠ができたので、*.svgファイルでやってみたところうまくいきました。なんでなんだろ？