アダプティブ アイコン

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

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

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

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

    ユーザーのレスポンスを示すためにアニメーション化された、2 つの円形の Android サンプル アイコンの例を示す GIF。最初のアイコンでは、Android ロゴが円の中で左から右、そして上下に揺れていることがわかります。2 番目のアイコンは拡大し、再び縮小します。
    図 2. アダプティブ アイコンで表示される視覚効果の例。
  • ユーザーテーマ設定: Android 13(API レベル 33)以降では、ユーザーはアダプティブ アイコンのテーマを設定できます。ユーザーがシステム設定で [テーマアイコン] 切り替えをオンにすることでテーマ別アプリアイコンを有効にした場合、ランチャーがこの機能をサポートしている場合、ユーザーが選択した壁紙とテーマの色を使用して、色合いが決定されます。

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

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

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

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

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

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

    フォアグラウンド レイヤ(左の画像)とバックグラウンド レイヤ(右の画像)の例を示す画像。前景には、66x66 のセーフゾーンの中央に配置された Android ロゴのサンプルの 16 面アイコンが表示されています。セーフゾーンは 108x108 のコンテナの中央に配置されています。背景にはセーフゾーンとコンテナについて同じ測定ディメンションが表示されますが、背景は青のみで、ロゴは表示されていません。
    図 4. フォアグラウンド レイヤとバックグラウンド レイヤを使用して定義されたアダプティブ アイコンここに示されている 66x66 のセーフゾーンは、OEM が定義したシェーピング マスクによってクリップされることはありません。
    円形のマスクに前の画像のアイコンを重ねた画像。
    図 5.円形マスクが適用されたフォアグラウンド レイヤとバックグラウンド レイヤが一緒にどのように表示されるかを示す例。
  • アプリアイコンのユーザーテーマ設定をサポートする場合は、アイコンのモノクロ バージョン用の単一のレイヤを提供します。

    モノクロのアイコンレイヤの例(左の画像)とカラー プレビュー(右の画像)を示す画像。モノクロ レイヤでは、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" />

    // 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() メソッドを呼び出します。

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

参考情報

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