アダプティブ アイコン

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

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

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

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

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

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

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

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

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

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

  • アイコンのカラー バージョンには、フォアグラウンドとバックグラウンドの 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 のドキュメントをご覧ください。また、 ブログ投稿「Designing Adaptive Icons」もご覧ください。

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

アダプティブ アイコンは、非アダプティブ アイコンと同様に、アプリのマニフェストの using the 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() メソッドを呼び出します。

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

参考情報

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