Adaptive Iconにとりあえず対応する方法

Android8.0で導入されたAdaptive Icon。 とりあえず対応するには何をすればいいのかがイマイチはっきりしないので実際に試してみました。

(2018/6/16 追記 ここから)

Android Studioを使ってもっと簡単に対応する方法を記事にしました。

• Android StudioでAdaptive Iconを作る | backport

(2018/6/16 追記 ここまで)

まずはAndroid 7.0での表示。いままで通りですね。

次にAndroid 8.0。これまた今まで通り。API level 25以下でbuildしたapkは旧来通りの表示になるようです。

API levelを26に上げてapkを作り直してみます。なんか変な表示になりました。

API levelが26以上の場合はAdaptive iconに対応していると見なされてしまうようです。 apk側で特に何も対応しないと旧来のアイコンが中央に表示され、周りを白い円で囲う、という表示になる模様。 （実際にはどう表示されるかはランチャーアプリ次第らしい）

それではここからAdaptive Iconに対応してみましょう。

Adaptive Iconの最低限の構成は前面画像と背面画像の2つ。どちらも108dp x 108dpです。 中心から直径66dpの円の内側は「確実に描画される」領域。その外側は場合によっては描画されないかも領域です。

なので、最低限の修正で済ませたい場合は

• 背面：元のアイコンの背景をもとにした単色
• 前面：元のアイコンのデザイン部分を残し、背景を透過に

が一番単純ですかね。背面を透過色にしたらラクかもと思ったんですが、どうもうまくいきませんでした。

resディレクトリにmipmap-anydpi-v26というディレクトリを作り、ic_launcher.xmlファイルを作成します。

<?xml version="1.0" encoding="utf-8"?>
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
    <background android:drawable="@color/ic_launcher_background"/>
    <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
</adaptive-icon>

Android Studio2.3だと「adaptive-iconなんて知らないよー」ということでエラー表示になりますが、apkは問題なく作れます。とりあえず無視。

ic_launcher_foreground.pngという名前で前面のアイコンを作りましょう。周囲の白く見える部分は実際には透過色です。

今までのアプリアイコンのとサイズ対比は以下のようになります。

(2018/5/18 追記 ここから)

元のアイコンを512pxで作っていた場合、896pxになるよう上下左右に余白を付けた上で上記のサイズにリサイズするとちょうどいい感じになるようです。

厳密じゃないですが、「とりあえず対応」であれば問題ないかと。

(2018/5/18 追記 ここまで)

背面はcolor.xmlに定義しましょう。

<color name="ic_launcher_background">#3f51b5</color>

前面、背面とも準備できました。apkを作ってみましょう。

それっぽく表示されましたね。前面のサイズ調整で手を抜いたので元々のサイズよりちょっと大きくなってしまったのはご愛敬。 これでAdaptive Iconに最低限対応できました。

Adaptive Iconはいろいろと凝ったこともできるんですが、デザインで四苦八苦している身としてはやること増えて大変、というのが率直な印象です。 とりあえず最低限の対応でしのぎつつ、Android Asset Studio - Launcher icon generatorがAdaptive Iconに対応してくれるのを期待して待つ感じですかねー。

Adaptive Iconの仕様

Adaptive Icons  |  Android Developersから抜粋。

In Android 7.1 (API level 25) and earlier, launcher icons were sized at 48 x 48 dp. You must now size your icon layers using the following guidelines:

• Both layers must be sized at 108 x 108 dp.
• The inner 72 x 72 dp of the icon appears within the masked viewport.
• The system reserves the outer 18 dp on each of the 4 sides to create interesting visual effects, such as parallax or pulsing.

ざっくりまとめると

• Android 7.1までのランチャーアイコンは 48 x 48 dp
• Android 8.0からのランチャーアイコンは以下のルールになる
  • 背景と前景の2枚のレイヤーから成る
  • どちらのレイヤーも 108 x 108 dp で作る
  • 周囲の 18 dp はビジュアルエフェクト（アニメーションなど）の時だけ表示される
  • 内側の 72 dp 四方がアイコンとして描画『されうる』領域になる
  • どの領域を描画するかは描画側（ランチャー）が定める
  • ただし、中心から半径 33 dp の領域は必ず表示されることが担保されている

という感じでしょうか。

参考URL

• Adaptive Icons | Android Developers
• 3分で分かる？Android OのAdaptive Iconに対応しよう - Qiita
• プレゼント-OTHER - アイコン素材
  • サンプルで使ったアイコンはこちらから拝借しました。多謝

関連(するかもしれない)記事

• Intentで巨大なファイルを共有する
• 画面遷移時にTransactionTooLargeExceptionが起きる
• Timberを使ったアプリをbuildするとBUILD SUCCESSFULなのにエラーが出る
• Eclipseで開発していたAndroidアプリをAndroid Studioに移行する
• 暗黙的な<uses-permission>

おススメ