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アプリ:背景に画像を指定する

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

Androidアプリ:ストアの掲載情報

Androidアプリのプログラムが完成したらすぐにGoogle Playにアップロードできるわけではありません。 プログラム以外に必要なデータを以下にリストアップしました。 ストアの掲載情報として必要…続きを読む

Androidアプリ:タイトルバーを消す

Android Studioで、タイトルバーを消す方法です。 通常は、以下のように画面上部にタイトルバーが表示されています。 AndroidManifest.xmlを編集する android:them…続きを読む

Androidアプリ:Android StudioでデバッグしようとするとPlease select Android SDKと表示される

Android Studioを使っていて、動作確認するために実行(run)をすると、ADVが起動せず、「Error: Please select Android SDK」と表示されてしまった場合の復旧…続きを読む

Androidアプリ:画面をタップしたら文字を入れ替える

画面をタップしたら文字を入れ替えるアプリをつくります。 今回はタッチイベントを取得する方法を調べました。 ここではレイアウト定義ファイルを「activity_main.xml」、 プログラムファイルを…続きを読む

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

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

Androidアプリ:入力された数値を足して表示する

2つのテキストボックスに入力した数値を受け取り、それぞれを足した結果を表示するアプリをつくります。 ここではレイアウト定義ファイルを「activity_main.xml」、 プログラムファイルを「Ma…続きを読む

Androidアプリ:ボタンの仕様を1つのxmlファイルにまとめる

Android Studioで、ボタンなどの色や形の指定をする際、1つのxmlファイルで、ボタンを押したときと押していないときの状態を指定する方法です。 xmlファイルの指定 Android Stud…続きを読む

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

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

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

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