[Android] アイコンを簡単作成できる Image Asset

アプリ完成だと思っても、最後の仕上げでたくさんのアイコンをつくらないといけないのは面倒ですよね〜。更に、Adaptive icons というのを Oreoから作らないといけません。

ところが簡単に作成できるツール Image AssetがAndroid Studioにあります。これはありがたい！

Adaptive Icons

　
昨今、アプリのリリースには新しいAPIを対応しないといけなり、Adaptive Iconsを避けるわけにはいかなくなりました。

https://akira-watson.com/android/apk.html#1

こちらにGoogleの説明がありますので、Adaptive iconsこれらを睨みながら確認していきましょう。

更に、Google Play アイコンのデザイン仕様の変更があります。

　

Adaptive Icons の構成

　
Adaptive iconは２枚のforeground、background画像とその上をおおうマスクで構成されています。

　

　

• 2枚の画像サイズは108dp x108dp
• foregroundの画像は直径66dpの範囲外はアニメーションで隠れる可能性がある
• マスクはランチャー次第で正円形から四角まで色々ある

　
例えばこのようなアイコンを用意して見ます。これをforegroundに使いますので背景は透明にします。
　

Image Asset Studio

　
アイコンをforegroundとbackgroundの２枚作るのはいいのですが、その他のサイズの異なるアイコンも同時に作成しないといけません。そこでAndroid StudioにはImage Assetという便利ツールがあります。

Fileかappなどを選択したところから「New」「Image Asset」からアイコンを作成するツールが起動します。
　

 

　

このアイコン画像を設定します。Image Assetの「Source Asset」からImageを選択して画像が存在するPathを設定します。そうすると画像を取り込んでアイコンのそれぞれの作成例ができます。
　

 

「Foreground Layer」「Source Asset」「Path」からdrawable-v24のパスに入ります。
ここで「Drag and drop a file into the space …」とあるのですが、うまくいかないときはpngなどの画像ファイルをそのままここで選択したほうがいいかもしれません。

　
次はbackgroundです。これは同じように画像を作ってもいいのですが、カラーコードで設定してしまうという安直な方法もありです。
「Background Layer」を選び「Asset Type」をColorにしてカラーコードをクリックするとSelect Colorのダイアログが現れますので背景色を決めます。
　

　
この他にTrimやResizeがありますので遊んでみてはどうでしょう
　
先に進めるために「Next」をクリックすると「Confirm Icon Path」が表示されます。デフォルトでドロイド君のアイコンが設定されていましたが、同じ名前にしたので上書きされるぞという警告がでています。気にせずここでは「Finish」
　

　
これで一気にアイコンが作成されました！
　

実機上のアイコン

　
これで実行してみるとアイコンが確かに出来上がっています。
　

　

Google Play アイコンのデザイン仕様

　
Google Play Consoleでアプリをリリースしていると、このようなワーニングが表示されています。

アプリアイコンの変更か！と一瞬思いましたが、これはあくまでGoogle Playでアプリが紹介されているページのアイコンの事です。

実際に良い例、悪い例が表示されていますので確認しておきましょう
Google Play アイコンのデザイン仕様
　
　
References:
Image Asset Studio を使用したアプリアイコン作成
Adaptive icons | Android Developers
Designing adaptive icons