AndroidのAdaptive Icon対応

android_adaptive_icon.md

Androidのアダプティブアイコンの対応方法

とりあえず、アダプティブ アイコンのガイドをよく読んで理解し、参考リンク先も見る。

デザインファイルの体裁

Designing Adaptive Icons - Google Design - Medium にリンクのある Sketchファイルが秀逸なのでそれを真似するだけでOK(ついでにそのリポジトリはこちら)。

Sketchファイルの safe-zone を表示した様子:

• サイズは108x108で用意
• 直径66・センター配置の円のSafe Zoneをガイドとして置いて、それに収まるようにする
  • 直径72・センター配置の円でマスクされた時(circle-masked)に一番ちょうど良い見た目になるように意識すると良いはず
  • 上述のSketchファイルでは色々なマスク時のプレビューも添えてある💯
• エクスポート対象は、backgroundとforegroundの2つ
  • Sketchファイルではその2つに対してスライス設定がされている
  • foregroundはbackgroundと同じサイズ(108x108)になるように透明のマージン含めることに注意
  • 背景は、単色の場合は画像エクスポートではなくカラーコード指定でOK(実装時観点)
• エクスポート形式は、SVGがベターだが(minSdkVersionが21以上の場合)、flutter_launcher_iconsは未対応(仮対応ブランチはあるものの)なので、Flutterでこのパッケージを使う場合は@4xのpngでエクスポートしておくのが良い
  • 参考: Flutter のアプリアイコンを環境ごとに分ける - Flutter 🇯🇵 - Medium
• Image Asset Studio使うのもお勧め
  • https://developer.android.com/studio/write/image-asset-studio#create-adaptive

エクスポート画像例

上述の通り、以下の108x108のSVG or @4xのPNG。

background	foreground

※ foregroundは元々は白かったが分かりにくいので緑に変えた