Androidアプリ:アダプティブアイコンに対応する
AndroidではOS 8.0からAdaptiveアイコン(アダプティブアイコン)というアイコンを用意する必要がでてきました。
これまでの通常のアイコン、ラウンドアイコンに加えて、アダプティブアイコンも必要になるということです。
APIレベルが26以降になるとアダプティブアイコンへの対応が必須になります。
わたしはこれを知らずそのままアップしてOS 7.1の古いスマホで確認していたので全く気が付かず、携帯を買い替えて初めてこの事実を知りました。
ここではアダプティブアイコンの用意の仕方をまとめました。
アダプティブアイコンとは
AndroidはOS8.0から、アイコンの形を統一する方向に変わります。
それまではアプリごとに様々な形をしており、自由に作ることができましたが、iOSのようにすべてのアイコンが同じ形になることになります。
これに対応したアイコンが、アダプティブアイコンと言います。
アダプティブアイコンを作るには、背景と前面の2つのリソースを用意する必要があります。
背景は色指定で前面は画像、または背景と前面ともに画像、というように指定することができます。
この背景と前面を、特定の形にくりぬいて表示します。
そのため、くりぬかれる範囲を想定してつくらないと、みせたい部分が表示されなくなってしまいます。
なお、くりぬく形は丸や角丸の四角であったり、スマホごとに採用されるくりぬき方が異なるようです。
くりぬく種類は数種類に定まっています。
画像のサイズ
アイコンを画像で用意する場合には、108dp×108dpで作る必要があります。
108px x 108pxの画像を規準として、以下のように画像を作ります。
解像度 |
比率 |
Adaptiveアイコン |
それまでのアイコン |
mdpi |
1 |
108px x 108px |
48px x 48px |
hdpi |
1.5 |
162px x 162px |
72px x 72px |
xhdpi |
2 |
216px x 216px |
96px x 96px |
xxhdpi |
3 |
324px x 324px |
144px x 144px |
xxxhdpi |
4 |
432px x 432px |
192px x 192px |
表示される形の種類
アダプティブアイコンは、背景画像の上に前面画像が乗っかっており、さらにその上から端末メーカーごとに指定したマスクが被された形で表示されます。
つまり、最終的には端末メーカーが選んだマスクの形に表示されるということです。
そのため、今までのように自由な形で表示することはできなくなります。
マスクの形には以下のものがありますが、どのマスクが選ばれるかは端末によって異なります。

Circle、Squircle、Rounded Square、Squareの4つです。
端末はこの4種類から1つ、マスクを選んでおり、その形にアイコンが切り抜かれます。
必ず表示される範囲
マスクが端末ごとに異なりますが、必ず表示される範囲は決められています。
それが、直径66dpの円です。
中心から半径33dpで描かれる円型に収まる部分は必ず表示されます。
場合によって表示される範囲
場合によって表示される範囲とは、円型のマスクよりも大きいマスクを採用している端末で表示されます。
これは72dp x 72dpの範囲になります(角丸です)。
以上のことから、必ず表示させたい部分は中心から66dpの範囲で画像を用意します。
アダプティブアイコンの用意の仕方
1.前面を画像、背面を色にする
「ic_launcher.xml」を以下の内容にします。
※ic_launcher.xmlは「mipmap-anydpi-v26」フォルダ以下に格納します。
<?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>
背景色はcolorフォルダ以下のic_launcher_background.xmlで指定します。
前面画像はmipmap-[各dpi]フォルダ以下に、それぞれic_launcher_foreground.pngとして保存します。
2.前面を画像、背面を画像にする(各サイズ対応)
「ic_launcher.xml」を以下の内容にします。
※ic_launcher.xmlは「mipmap-anydpi-v26」フォルダ以下に格納します。
<?xml version="1.0" encoding="utf-8"?>
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
<background android:drawable="@mipmap/ic_launcher_background"/>
<foreground android:drawable="@mipmap/ic_launcher_foreground"/>
</adaptive-icon>
背景画像はmipmap-[各dpi]フォルダ以下に、それぞれic_launcher_background.pngとして保存します。
前面画像はmipmap-[各dpi]フォルダ以下に、それぞれic_launcher_foreground.pngとして保存します。
3.前面を画像、背面を画像にする(背面は画像1つだけ)
「ic_launcher.xml」を以下の内容にします。
※ic_launcher.xmlは「mipmap-anydpi-v26」フォルダ以下に格納します。
<?xml version="1.0" encoding="utf-8"?>
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
<background android:drawable="@drawable/ic_launcher_background"/>
<foreground android:drawable="@mipmap/ic_launcher_foreground"/>
</adaptive-icon>
背景画像はdrawableフォルダ以下に、ic_launcher_background.pngとして保存します。
ic_launcher_background.xmlがある場合は、削除します。
前面画像はmipmap-[各dpi]フォルダ以下に、それぞれic_launcher_foreground.pngとして保存します。
関連記事