アダプティブ アイコン(AdaptiveIconDrawable)は、個々のデバイスの機能やユーザーのテーマ設定に応じて異なる表示が可能です
。アダプティブ アイコンは主にホーム画面のランチャーで使用されますが、ショートカット、設定アプリ、共有ダイアログ、概要画面でも使用できます。アダプティブ
アイコンは、すべての Android フォーム ファクタで使用されます。
ビットマップ画像とは異なり、アダプティブ アイコンはさまざまなユースケースに対応できます。
さまざまな形状: アダプティブ アイコンは、デバイスモデルに応じてさまざまな形状でアイコンを表示できます。たとえば、ある OEM デバイスでは円形のアイコン、別のデバイスで角が丸い正方形のアイコンを表示できます。各デバイスの OEM は、すべてのアダプティブ アイコンを同じ図形でレンダリングするために使用するマスクを提供する必要があります。
図 1.アダプティブ アイコンは、デバイスによって異なるさまざまなマスクに対応します。 視覚効果: アダプティブ アイコンにはさまざまな視覚効果を適用できます。設定した視覚効果は、ユーザーがホーム画面にアイコンを追加したり移動したりするときに表示されます。
図 2.アダプティブ アイコンで表示される視覚効果の例。 ユーザーのテーマ設定: Android 13(API レベル 33)以降では、ユーザーはアダプティブ アイコンのテーマを設定できます。ユーザーがシステム設定でテーマ別アプリアイコンを有効にしていて、ランチャーがこの機能をサポートしている場合、アダプティブ アイコンに
monochromeレイヤがあるアプリのアプリアイコンの色合いは、ユーザーが選択した壁紙とテーマの色に基づいて決定されます。Android 16 QPR 2 以降では、独自のアプリアイコンを提供していないアプリのアプリアイコンのテーマが自動的に設定されます。
図 3.ユーザーの壁紙とテーマから継承されたアダプティブ アイコン。 次のいずれかに当てはまる場合は、ホーム画面にテーマ別アプリアイコンが表示されず、アダプティブ アイコンまたは標準のアプリアイコンが表示されます。
- ユーザーがテーマ別アプリアイコンを有効にしていない場合。
- アプリがモノクロのアプリアイコンを提供しておらず、ユーザーのデバイスが Android 16 QPR 2 より前のバージョンの Android を実行している場合。
- ランチャーがテーマ別アプリアイコンをサポートしていない場合。
アダプティブ アイコンをデザインする
アダプティブ アイコンがさまざまな形状、視覚効果、ユーザーテーマ設定に対応できるようにするには、以下の要件を満たす必要があります。
アイコンのカラー バージョンには、フォアグラウンドとバックグラウンドの 2 つのレイヤを指定する必要があります。レイヤはベクターまたはビットマップにできますが、ベクターが推奨されます。
図 4.フォアグラウンド レイヤとバックグラウンド レイヤを使用して定義されたアダプティブ アイコン。図に示されている 66x66 の セーフゾーンは、OEM によって定義された形状のマスクで切り取られることのない領域です。
図 5.円形マスクを適用したフォアグラウンド レイヤとバックグラウンド レイヤの表示例。 アプリアイコンのユーザーテーマ設定をサポートする場合は、アイコンのモノクロ バージョンに単一のレイヤを指定します。
図 6.モノクロのアイコン レイヤ(左)とカラー プレビューの例(右)。 すべてのレイヤのサイズを 108x108 dp にします。
エッジがきれいなアイコンを使用します。レイヤには、アイコンの枠線の周囲にマスクや背景のシャドウがないようにします。
48x48 dp 以上のロゴを使用します。アイコンの内側の 66x66 dp の部分は、マスクされたビューポート内に表示されるため、66x66 dp を超えないようにします。
レイヤの 4 つの辺それぞれの外側の 18 dp の部分は、マスキングと、パララックスや点滅などの視覚効果の作成のために予約されています。
Android Studio を使用してアダプティブ アイコンを作成する方法については、 Android アプリアイコンの Figma テンプレートまたは ランチャー アイコンの作成に関する Android Studio のドキュメントをご覧ください。また、 ブログ投稿「Designing Adaptive Icons」もご覧ください。
アダプティブ アイコンをアプリに追加する
アダプティブ アイコンは、非アダプティブ アイコンと同様に、アプリのマニフェストの using the
android:icon 属性を使用して指定します。
オプションの属性 android:roundIcon は、円形のアイコンでアプリを表すランチャーで使用されます。アプリのアイコンに円形の背景がデザインのコア部分として含まれている場合に便利です。このようなランチャーでは、android:roundIcon に円形マスクを適用してアプリアイコンを生成する必要があります。この保証により、ロゴを少し拡大して、切り抜かれたときに円形の背景がフルブリードになるようにするなど、アプリアイコンの外観を最適化できます。
次のコード スニペットは、これらの両方の属性を示していますが、ほとんどのアプリでは android:icon のみが指定されています。
<application ... android:icon="@mipmap/ic_launcher" android:roundIcon="@mipmap/ic_launcher_round" ...> </application>
次に、アダプティブ アイコンを res/mipmap-anydpi-v26/ic_launcher.xml に保存します。
要素を使用して、アイコンのフォアグラウンド、バックグラウンド、
モノクロのレイヤリソースを定義します。<adaptive-icon><foreground>、
<background>、<monochrome> の内部要素は、
ベクター画像とビットマップ画像のどちらもサポートしています。
次の例は、<adaptive-icon> 内で <foreground>、<background>、および
<monochrome> 要素を定義する方法を示しています。
<?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="@drawable/ic_launcher_foreground" /> <monochrome android:drawable="@drawable/ic_launcher_foreground" /> </adaptive-icon> ...
フォアグラウンド レイヤとモノクロ レイヤは同じドローアブルを使用しています。ただし、必要に応じて、各レイヤに個別のドローアブルを作成できます。
ドローアブルを インライン化して、
<foreground>、<background>、<monochrome> 要素に要素として定義することもできます。次のスニペットは、フォアグラウンド ドローアブルでこれを行う例を示しています。
<?xml version="1.0" encoding="utf-8"?> ... <foreground> <inset android:insetBottom="18dp" android:insetLeft="18dp" android:insetRight="18dp" android:insetTop="18dp"> <shape android:shape="oval"> <solid android:color="#0000FF" /> </shape> </inset> </foreground> ...
通常のアダプティブ アイコンと同じマスクと視覚効果をショートカットに適用する場合は、次のいずれかの方法をご利用ください。
- 静的ショートカットの場合は、
<adaptive-icon>要素を使用します。 - 動的ショートカットの場合は、作成時に
createWithAdaptiveBitmap()メソッドを呼び出します。
アダプティブ アイコンの実装について詳しくは、アダプティブ アイコン を実装するをご覧ください。 ショートカットについて詳しくは、アプリのショートカット の概要をご覧ください。
参考情報
アダプティブ アイコンのデザインと実装について詳しくは、次のリソースをご覧ください。
- Figma コミュニティ ページ テンプレート
- Understanding Android Adaptive Icons
- Designing Adaptive Icons
- Implementing Adaptive Icons
- Android Studio でアプリアイコンを作成する
- Google Play アイコンのデザイン仕様