LoginSignup
3
3

More than 5 years have passed since last update.

Adaptiveなアイコンを作ってみよう

Posted at

はじめに

ちょっと遅くなりましたが,
Life is Tech !アドベントカレンダー21日目を担当するカーキです.
実は12/21は「シュガーラッシュ・オンライン」の公開日でもあります.

皆さんはもう観ましたか?
僕はもう観ました!

「そんなん観てないで先にアドベントカレンダーかけや!」と聞こえてきそうですが
何はともあれ作中ではたくさんのインターネット企業が出てきて面白かったです!
さて,この作品のエンドロールでは様々なアプリのアイコンが登場してきます.

そこで僕は思いつきました!

『アイコンについて書こう』と
ということで21日目の今日はAndroidのAdaptiveIconを実際に使ってみたいと思います.

Adaptive Iconとは

簡単に説明すると
Androidのランチャーによって勝手に丸やら四角やらにトリムされてしまうアイコンをうまーくいい感じに調整できる機能です.
こちらの記事に詳しくまとめられています
3分で分かる?Android OのAdaptive Iconに対応しよう

AdaptiveIconでは見切れても問題ないバックグラウンド絶対アイコンに表示させたいフォアグランド層に分けて設定することができます.
今回は次のような画像で作成していきます.

バックグラウンド

Group.png
グーグルっぽい配色です

フォアグラウンド

curryw.png
カレーですね

実践

AndroidStudioのプロジェクトファイル一覧を右クリックしNew>ImageAssetを選択します.
スクリーンショット_2018-12-22_21_46_05.png

するとこんなウィンドウが出てきます.
アイコンのパターンんってこんなにあるんですね...
矢印のところから画像を指定できます.
早速先ほどの画像をBackgroundとforegroundに指定していきます.
スクリーンショット_2018-12-22_22_33_51.png
backgroundには単色も選べるようです.
foregroundのサイズが大きすぎたり小さすぎるときは矢印のインジゲータでサイズの変更ができます.
スクリーンショット_2018-12-22_22_41_33.png

なんともカオスなアイコンができてしまいました...

Nextで次へ進みます

スクリーンショット 2018-12-22 22.41.46.png
Androidのアイコンでは様々なデバイスの画素数に対応するためにはいくつかのサイズを用意する必要がありますが,このAdaptiveIconを使用すると自動で全サイズ分作成してくれます.
便利!! 最高!!

わざわざ全サイズ分用意するのが面倒な個人プロジェクトなら背景色も一緒に選択できるこの方法が一番手っ取り早くて楽かもしれませんね.

さて,
実際のアイコンがどのようになっているかエミュレータで確認してみます.

いい感じです!
アイコンを長押ししてからゆらゆらしてみるとアニメーションも確認できます!

 まとめ

さてAdaptiveIconいかがだったでしょうか?
アイコンにpngなど透過画像を使おうとしている際でもこれで簡単に背景色などをつけられて,それぞれのサイズのアイコンを自動で生成してくれるのは便利ですよね!

3
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
3