Android Studioでベクター画像を登録しよう

  • このエントリーをはてなブックマークに追加

Androidアプリを作成しているとアプリ内のアイコン画像を追加したい、ということありますよね。
そんな時は画像の解像度を気にせず使用できる、ベクター画像を使用すると便利です。

Android Studioでは、ちょっとした手順を踏めばベクター画像をdrawableリソースの中にxmlファイルとして生成してしてくれます。

簡単なので、早速進めてみましょう。

Android Studioを開こう

まずはAndroid Studioを開いて、ファイルの一覧を確認します。

ベクター画像の登録画面を開こう

ファイルの一覧の『app』の場所で右クリックをしましょう。


そこから『新規>ベクター・アセット』をクリックします。


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

クリップ・アートで登録してみよう

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


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


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


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

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


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


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


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


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


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


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

ローカル・ファイル(自分の好きな画像)で登録してみよう

次に自分の用意したファイルを設定する方法をご紹介します。
先ほどと同じ手順でベクター画像の登録画面を開いてください。

そこで次はアセット・タイプを『ローカル・ファイル』にします。


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


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


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


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


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



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

執筆者:工藤[ WEBデザイナー ]

WEBデザイナー。 最近はWordPressを触るのが好きです。よろしくお願いします。

関連記事

プログラミング

SharePointではできないこと 4選

「これってSharePointでできないの!?」なんていう瞬間、開発やカスタマイズの現場では意外と多くあります。SharePointはとても柔軟なプラットフォームですが、実は“万能ツール”ではありません。「コードを書けば何とかなる」と思って構築を進めると、モダンページの仕様や制限に阻まれて苦い思いをすることもしばしば。今回は、実際のプロジェクトや運用の中で見えてきた「SharePointではできないこと」をまとめて紹介します。 目次1 1.CSSとJSが直接使えない1.1 ク […]

Webサイト制作

WordPress納品後にクライアントが安心して運用できる仕組みづくりをしよう

ホームページ制作において、更新機能を手軽に導入できるのがWordPressです。 専門知識がなくても記事の投稿やページ編集を行いやすい一方で、クライアントが自分で運用するには、が欠かせません。 今回は、そのための仕組みづくりについてご紹介します。 制作側の方はもちろん、クライアント側でホームページ運用を担当される方も、制作時のご相談などにぜひ参考にしてみてください。 目次1 管理画面のロゴを企業ロゴに変更する2 管理画面のURLを変更する・認証などを付けてセキュリティ面を強化 […]

Webデザイン

アプリのロゴアニメーションをAfter Effectsで作成→Lottieに変換【iOS/Android対応】

こちらは、当社でリリースしたアプリ「ピンピタ」で使用しているロゴアニメーションです。 スプラッシュ画面でロゴが動くと、ぐっとアプリらしい印象になりますし、作ってみたいですよね。 今回は、After Effects(以降AE)でロゴアニメーションを作成し、アプリに組み込むまでをご紹介します。 AEと聞くと難しい印象がありますが、PremiereやFlashなどを触った経験がある方なら、すぐに慣れます。 もう一度再生 目次1 作業フロー1.1 注意点:グラデーションが使用不可2 […]

株式会社8bit (エイトビット)

東京都目黒区でWebサイト制作、Webシステム開発などを行っております。
コーポレートサイトやWebサービスの企画・提案を得意としており、自社での経験を元にアイデアをカタチにするお手伝いをさせていただいております。

Web制作に関するご相談はお気軽にどうぞ

弊社に制作をご依頼いただく際の費用感をご確認いただける、
見積りシミュレーションをご用意いたしました。