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アプリ:画面の高さと幅を取得する

Andoroidで、画面の高さと幅を取得する方法です。 MainActivity.java Android端末の画面サイズ(高さと幅)を表示します。 public class QuestionActi…続きを読む

Androidアプリ:ボタンやEditTextに背景色・枠線をつける

Android Studioで、ボタンやEditTextに背景色や枠線をつける方法です。 コントロールの見た目の設定をするには、別途専用のxmlファイルを生成して、そこに書いた設定を読み込むようにしま…続きを読む

Androidアプリ:ボタンを押すとメッセージが入れ替わる

Android StudioでAndroidアプリを試作します。 今回は「ボタンを1回押すとテキストの内容が変わり、もう1回押すと元に戻る」というだけのアプリをつくります。 プロジェクトの生成 And…続きを読む

Androidアプリ:Firebaseを利用したAdMobの実装方法

AndroidアプリでFirebaseを利用したAdMobの実装方法を調べました。 なお、FirebaseおよびAdMobには既にユーザ登録済みであることを想定しています。 未登録の場合は先に登録して…続きを読む

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

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

Androidアプリ:テキストをリスト表示する

Androidアプリで、ListViewを使い、配列に格納したテキストをリスト表示します。 MainActivity.java import android.app.Activity; import …続きを読む

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

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

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

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

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

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

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

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