アダプティブ アイコン(AdaptiveIconDrawable
)は、個々のデバイスの機能やユーザーのテーマ設定に応じて異なる表示が可能です。アダプティブ アイコンは、主にホーム画面のランチャーで使用されますが、ショートカット、設定アプリ、共有ダイアログ、概要画面でも使用されます。アダプティブ アイコンは、Android のすべてのフォーム ファクタで使用されます。
ビットマップ画像とは異なり、アダプティブ アイコンはさまざまなユースケースに適応できます。
さまざまな形状: アダプティブ アイコンでは、デバイスモデルに応じてさまざまな形状を表示できます。たとえば、ある OEM デバイスでは円形を表示し、別のデバイスでは四角形(正方形と円の間の形状)を表示できます。各デバイスの OEM は、すべてのアダプティブ アイコンを同じ形状でレンダリングするために使用するマスクを提供する必要があります。
視覚効果: アダプティブ アイコンは、ユーザーがホーム画面でアイコンを配置または移動したときに表示される魅力的な視覚効果をサポートします。
ユーザーテーマ設定: Android 13(API レベル 33)以降では、ユーザーはアダプティブ アイコンのテーマを設定できます。ユーザーがシステム設定で [テーマアイコン] 切り替えをオンにすることでテーマ別アプリアイコンを有効にした場合、ランチャーがこの機能をサポートしている場合、ユーザーが選択した壁紙とテーマの色を使用して、色合いが決定されます。
次のシナリオでは、ホーム画面にテーマ別アプリアイコンが表示されず、代わりにアダプティブ アプリまたは標準アプリアイコンが表示されます。
- ユーザーがテーマ別アプリアイコンを有効にしていない場合。
- アプリにモノクロのアプリアイコンがない場合。
- ランチャーがテーマ別アプリアイコンをサポートしていない場合。
アダプティブ アイコンを設計する
アダプティブ アイコンでさまざまな形状、視覚効果、ユーザーテーマ設定をサポートするには、デザインが次の要件を満たす必要があります。
アイコンのカラー バージョンには、フォアグラウンドとバックグラウンドの 2 つのレイヤを用意する必要があります。レイヤはベクターでもビットマップでもかまいませんが、ベクターが推奨されます。
アプリアイコンのユーザーテーマ設定をサポートする場合は、アイコンのモノクロ バージョン用の単一のレイヤを提供します。
すべてのレイヤのサイズを 108x108 dp に設定する。
角がすっきりしたアイコンを使用します。レイヤでは、アイコンの輪郭の周囲にマスクや背景の影があってはなりません。
48x48 dp 以上のロゴを使用します。アイコンの内側の 66x66 dp はマスクされたビューポート内に表示されるため、66x66 dp を超えないようにする必要があります。
レイヤの 4 辺の外側の 18 dp は、マスキングと、視差やパルスなどの視覚効果の作成用に予約されています。
Android Studio を使用してアダプティブ アイコンを作成する方法については、Android アプリアイコンの Figma テンプレートまたはランチャー アイコンの作成に関する Android Studio のドキュメントをご覧ください。また、ブログ投稿アダプティブ アイコンの設計もご覧ください。
アダプティブ アイコンをアプリに追加する
アダプティブ アイコンは、非アダプティブ アイコンと同様に、アプリ マニフェストの 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" /> // Starting with Android 13 (API level 33), you can opt-in to providing a // <monochrome> drawable. <monochrome android:drawable="@drawable/ic_launcher_monochrome" /> </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 コミュニティ ページ テンプレート
- Android アダプティブ アイコンについて
- アダプティブ アイコンの設計
- アダプティブ アイコンの実装
- Android Studio でアプリアイコンを作成する
- Google Play アイコンのデザイン仕様