アダプティブ アイコン

アダプティブ アイコン（AdaptiveIconDrawable）は、個々のデバイスの機能やユーザーのテーマ設定に応じて表示が変わります。主にホーム画面のランチャーで使用しますが、ショートカット、設定アプリ、共有ダイアログ、概要画面でも使用できます。

アダプティブ アイコンは、以下のようにさまざまなユースケースに適応できます。

• さまざまな形状: アダプティブ アイコンは、デバイスモデルに応じてさまざまな形状を表示できます。たとえば、ある OEM デバイスでは円形のシェイプを表示し、別のデバイスではスクワークル（四角と円との間の形状）を表示できます。各デバイスの OEM は、すべてのアダプティブ アイコンを同じ形状でレンダリングするためにシステムが使用するマスクを提供する必要があります。

  図 1.アダプティブ アイコンは、デバイスによって異なるさまざまなマスクをサポートしています。

• 視覚効果: アダプティブ アイコンは、ユーザーがホーム画面にアイコンを配置または移動したときに表示される魅力的なさまざまな視覚効果をサポートしています。

  図 2.アダプティブ アイコンで表示される視覚効果の例。

  注: アニメーションによる視覚効果は、対応するランチャーによって生成されます。視覚効果はランチャーによって異なる場合があります。

• ユーザーテーマ設定: Android 13（API レベル 33）以降、ユーザーはアダプティブ アイコンのテーマを設定できます。ユーザーがシステム設定でテーマアイコン トグルをオンにしてテーマ別アプリアイコンを有効にした場合、ランチャーがこの機能をサポートしている場合、ユーザーが選択した壁紙とテーマの色合いによって色合いが決定されます。

  

  図 3. ユーザーの壁紙とテーマを継承するアダプティブ アイコン。

次のシナリオでは、ホーム画面にテーマ別アプリアイコンが表示されず、代わりにアダプティブまたは標準のアプリアイコンが表示されます。

• ユーザーがテーマ別アプリアイコンを有効にしていない場合。
• アプリにモノクロのアプリアイコンが用意されていない場合。
• ランチャーがテーマ別アプリアイコンをサポートしていない場合。

アダプティブ アイコンをデザインする

アダプティブ アイコンでさまざまな形状、視覚効果、ユーザーテーマ設定をサポートするには、デザインが次の要件を満たす必要があります。

• アイコンのカラー バージョンには、フォアグラウンドとバックグラウンドの 2 つのレイヤを提供する必要があります。

  

  図 4. フォアグラウンド レイヤとバックグラウンド レイヤを使用して定義されたアダプティブ アイコンこの図の 72x72 のセーフゾーンは、OEM が定義した形状マスクによってクリップされない領域です。

  

  図 5.円形マスクが適用されたフォアグラウンド レイヤとバックグラウンド レイヤの統合例

• アプリアイコンのユーザーテーマ設定をサポートする場合は、アイコンのモノクロ バージョンの単一のレイヤを提供します。

  

  図 6.モノクロのアイコンレイヤ（左）。カラー プレビューの例（右）。

• すべてのレイヤのサイズを 108x108 dp にします。

• 角がすっきりしたアイコンを使用します。レイヤでは、アイコンの輪郭の周囲にマスクや背景の影を使わないでください。

• 48x48 dp 以上のロゴを使用します。アイコンの内側の 72x72 dp はマスクされたビューポート内に表示されるため、72x72 dp 以下にする必要があります。

レイヤの 4 辺の外側の 18 dp は、マスキングと、視差やパルスなどの視覚効果を生み出すために予約されています。

注意: ランチャー アイコンを必要なレイヤで更新しないと、システムによって表示される他のアイコンとアイコンが整合せず、視覚効果もサポートされなくなります。

Android Studio を使用してアダプティブ アイコンを作成する方法については、Android アプリアイコンの Figma テンプレートまたはランチャー アイコンの作成に関する Android Studio のドキュメントをご覧ください。また、ブログ投稿アダプティブ アイコンの設計もご覧ください。

アダプティブ アイコンをアプリに追加する

アダプティブ アイコンをアプリに追加するには、アプリ マニフェストの android:icon 属性を更新してドローアブル リソースを指定します。android:roundIcon 属性を使用してアイコン ドローアブル リソースを定義することもできますが、円形マスク用に別のアイコン アセットが必要な場合（ブランディングが円形に依存している場合など）に限られます。

次のコード スニペットは、この両方の属性を示していますが、ほとんどのアプリは android:icon のみを指定します。

<application
    ...
    android:icon="@mipmap/ic_launcher"
    android:roundIcon="@mipmap/ic_launcher_round"
    ...>
</application>

次に、res/mipmap-anydpi-v26/ic_launcher.xml で、Android 8.0（API レベル 26）との下位互換性を保つため、アプリに代替ドローアブル リソースを作成します。<adaptive-icon> 要素を使用して、アイコンのフォアグラウンド、バックグラウンド、モノクロのレイヤ ドローアブルを定義します。<foreground>、<background>、<monochrome> の内部要素は android:drawable 属性をサポートしています。

次の例は、<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 のアダプティブ アイコンについて
• アダプティブ アイコンの設計
• アダプティブ アイコンの実装
• Google Play アイコンのデザイン仕様