アダプティブ アイコン

アダプティブ アイコンのヘッダー

アダプティブ アイコン(AdaptiveIconDrawable)は、個別デバイスの性能やユーザーのテーマ設定に応じて表示が変わります。アダプティブ アイコンは主にホーム画面のランチャーで使用されますが、ショートカット、設定アプリ、共有ダイアログ、概要画面でも使用できます。アダプティブ アイコンは、すべての Android フォーム ファクタで使用されます。

ビットマップ画像とは異なり、アダプティブ アイコンはさまざまなユースケースに適応できます。

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

    同じサンプルの Android アイコンが繰り返しアニメーション表示される GIF。使用されるマスク(円、2 種類の角丸四角形)に応じて異なる形状が表示される
    図 1. アダプティブ アイコンは、デバイスごとに異なるさまざまなマスクをサポートしています。
  • 視覚効果: アダプティブ アイコンにはさまざまな視覚効果を適用できます。設定した視覚効果は、ユーザーがホーム画面にアイコンを追加したり移動したりするときに表示されます。

    2 つの円形の Android サンプル アイコンの例を示す GIF。ユーザーの反応を示すアニメーション。最初のアイコンは、Android ロゴが円の中で左右に揺れ、次に上下に揺れる様子を示しています。2 番目のアイコンが展開され、再び縮小されます。
    図 2. アダプティブ アイコンによって表示される視覚効果の例。
  • ユーザーによるテーマ設定: Android 13(API レベル 33)以降、ユーザーはアダプティブ アイコンのテーマを設定できるようになりました。ユーザーがシステム設定でテーマ別アプリアイコンを有効にすると、ユーザーが選択している壁紙やテーマに合わせて、アダプティブ アイコンに monochrome レイヤがあるアプリのアイコンの色合いが調整されます(ただし、ランチャーがこの機能をサポートしている必要があります)。Android 16 QPR 2 以降、Android は、独自のテーマを提供していないアプリのアプリアイコンに自動的にテーマを適用します。

    3 台の Android デバイスの例。それぞれ異なる色合いのユーザーテーマが表示されています。1 台目は暗い色合いの壁紙、2 台目は金色がかった壁紙、3 台目は青みがかった明るいグレーの壁紙が表示されています。各例では、アイコンが壁紙の色合いを継承し、完全に調和しています。
    図 3. ユーザーの壁紙とテーマを継承するアダプティブ アイコン。

    次のいずれかに当てはまる場合は、ホーム画面にテーマ別アプリアイコンが表示されず、アダプティブ アイコンまたは標準のアプリアイコンが表示されます。

    • ユーザーがテーマ別アプリアイコンを有効にしていない場合。
    • アプリにモノクロのアプリアイコンが用意されておらず、ユーザーのデバイスが Android 16 QPR 2 より前のバージョンの Android を搭載している場合。
    • ランチャーがテーマ別アプリアイコンをサポートしていない場合。

アダプティブ アイコンを設計する

アダプティブ アイコンがさまざまな形状、視覚効果、ユーザーテーマ設定に対応できるようにするには、以下の要件を満たす必要があります。

  • カラー バージョンのアイコン用に 2 つのレイヤ(フォアグラウンドとバックグラウンド)を提供する必要があります。レイヤはベクターまたはビットマップのいずれかですが、ベクターが推奨されます。

    フォアグラウンド レイヤ(左)とバックグラウンド レイヤ(右)の例。フォアグラウンドには、66x66 のセーフゾーンの中央に配置されたサンプルの Android ロゴの 16 面アイコンが表示されています。セーフゾーンは 108x108 のコンテナの中央に配置されます。背景には、セーフゾーンとコンテナの同じ測定寸法が表示されますが、青色の背景のみでロゴはありません。
    図 4. フォアグラウンド レイヤとバックグラウンド レイヤを使用して定義されたアダプティブ アイコン。図に示されている 66x66 のセーフゾーンは、OEM が定義した形状のマスクによって切り取られることがない領域です。
    上の図のアイコンを円形マスクに重ねた例。
    図 5. 円形マスクを適用したフォアグラウンド レイヤとバックグラウンド レイヤの表示例。
  • アプリアイコンのユーザーテーマ設定をサポートするには、モノクロ バージョンのアイコン用に 1 つのレイヤを提供する必要があります。

    モノクロ アイコン レイヤ(左)とカラー プレビュー(右)の例。モノクロレイヤには、66x66 のセーフゾーンの中央に、サンプルの Android ロゴの 16 面アイコンが表示されています。セーフゾーンは、108x108 のコンテナの中央に配置されます。色のプレビューには、さまざまな色のユーザーテーマ(オレンジ、ピンク、黄色、緑)に適用された場合のこのレイヤの表示が示されています。
    図 6. モノクロのアイコンレイヤ(左)と、色のプレビューの例(右)。
  • すべてのレイヤのサイズを 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" />
    <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() メソッドを呼び出します。

アダプティブ アイコンの実装について詳しくは、アダプティブ アイコンの実装をご覧ください。ショートカットの詳細については、アプリ ショートカットの概要をご覧ください。

参考情報

アダプティブ アイコンの設計と実装について詳しくは、以下のリソースをご覧ください。