アダプティブ アイコン

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

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

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

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

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

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

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

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

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

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

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

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

    モノクロのアイコンレイヤ(左の画像)とカラー プレビュー(右の画像)の例を示す画像。モノクロのレイヤでは、サンプルの Android ロゴの 16 面アイコンが 66x66 のセーフゾーンの中央に配置されています。セーフゾーンは 108x108 のコンテナの中央に配置されます。カラー プレビューでは、異なる色のユーザーテーマ(オレンジ、ピンク、黄色、緑)に適用した場合、このレイヤ表示が表示されます。
    図 6.モノクロのアイコンレイヤ(左)。カラー プレビューの例(右)。
  • すべてのレイヤのサイズを 108x108 dp にします。

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

  • 48x48 dp 以上のロゴを使用します。アイコンの内側の 66x66 dp はマスクされたビューポート内に表示されるため、66x66 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() メソッドを呼び出します。

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

参考情報

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