HOME技術AndroidAndroidアプリ:アダプティブアイコンに対応する

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として保存します。

関連記事

Androidアプリ:ERROR: This project uses AndroidX dependencies, but the ‘android.useAndroidX’ property is not enabled.

Android Studioでビルドしようとしたら、「ERROR: This project uses AndroidX dependencies, but the ‘android.us…続きを読む

Androidアプリ:ボタンをタップして別画面に遷移する

ボタンをタップしたら別画面に遷移させる方法です。 以下の例では、メイン画面の「ボタン」をクリックすると、サブ画面に移動し、サブ画面の「終了」ボタンを押すとメイン画面に戻ってきます。 メイン画面 act…続きを読む

Androidアプリ:内部テスト版をリリースする

Androidアプリで完成したものをすぐに公開する前に、内部テスト版としてリリースして動作確認をする方法です。 内部テスト版リリース方法 Google Play Consoleにログインして、「すべて…続きを読む

Androidアプリ:ボタンやEditTextを角丸にする

Android StudioでボタンやEditTextを配置して、角丸にします。 角丸や色などを指定する場合には、それ専用のxmlファイルを別途用意し、読み込ませるようにします。 ボタンの背景色と角丸…続きを読む

Androidアプリ:背景に画像を指定する

Android Studioを使って、背景に画像を設定する方法です。 背景画像を格納する 今回は以下の画像を使います。 画像サイズなどは適当につくります。 Androidは様々な解像度がありますが、画…続きを読む

Androidアプリ:数値型のViewの値がNullか0以下かを判定する

Android Studioで数値型のEditTextのViewを配置して、値を取得した場合に、その値がNull値(空)もしくは0以下であるか否かを判定する方法です。 Null判定にlength()を…続きを読む

Androidアプリ:error: expected color reference but got (raw string)

Android Studioでビルドした際に、C:\android\project\***\app\src\main\res\values\styles.xml: AAPT: error: expec…続きを読む

Androidアプリ:App is not indexable by Google Search;と表示される

Android Studioで、 App is not indexable by Google Search; consider adding at least one Activity with a…続きを読む

Androidアプリ:特定のViewに最初のフォーカスをあてる

Android Studioにおいて、起動時に特定のViewにフォーカスをあてる方法です。 activity_main.xmlで設定 レイアウト定義ファイル(activity_main.xml)におい…続きを読む

Androidアプリ:クリックイベントとロングクリックイベントを取得する

Androidアプリで、クリックイベントとロングクリックイベントの2つを取得して処理する方法です。 OnClickListenerとOnLongClickListenerを併記 public clas…続きを読む