アダプティブ アイコン

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

bitmap とは対照的に、 画像、アダプティブ アイコンを さまざまなユースケースに対応できます

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

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

    2 つの円形の Android サンプル アイコンの例を示す GIF
アニメーションでユーザーの反応を示します。1 つ目のアイコンは Android ロゴです
円の中を左右し、上下に揺れています。2 つ目の
アイコンが展開され、その後再び縮小されます。
    図 2. によって表示される視覚効果の例 アダプティブ アイコンです。
    で確認できます。
  • ユーザーテーマ設定: Android 13(API レベル 33)以降、ユーザーはテーマ設定が可能 アダプティブアイコンを使用しますユーザーがテーマ別アプリアイコンを有効にした場合は、 システム設定でテーマアイコンを切り替える(ランチャーはこれをサポートする) ユーザーが選択した壁紙と同じ色が使用されます。 色合いを決定します。

    3 つの Android デバイスの例を示す画像。それぞれが
異なるユーザーテーマをさまざまな色合いで表示できます。1 つ目の画面は、
暗い色合い2 枚目には金色の壁紙が写っている。3 つ目のグラフは、
ライトグレーの壁紙と青っぽい色合いの壁紙です。各例の
壁紙の色合いを引き継いで、アイコンに違和感なく溶け込みます。
    図 3. 継承されるアダプティブ アイコンは ユーザーの壁紙やテーマを変更できます。

    以下のシナリオでは、ホーム画面にテーマ 代わりにアダプティブまたは標準のアプリアイコンを表示します。

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

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

アダプティブ アイコンで、さまざまな形状、視覚効果、スタイルをサポートするには、 設計する場合は、次の要件を満たす必要があります。

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

    フォアグラウンド レイヤの例(左の画像)と
背景レイヤ(右の画像)。前景には、16 面アイコンが表示されている
66x66 のセーフゾーンの中央に配置された Android ロゴのサンプルセーフゾーンは、
108x108 のコンテナの中央に配置する背景は以前と変わりません。
セーフゾーンとコンテナの測定寸法が表示されますが、
ロゴなしにしています
    図 4. フォアグラウンドを使用して定義されたアダプティブ アイコン 使用できます。66x66 のセーフゾーンは、 OEM が定義したシェイプ付きマスクでクリップされない
    で確認できます。
    <ph type="x-smartling-placeholder">
    </ph> 前の画像のアイコンが
使用します。 <ph type="x-smartling-placeholder">
    </ph> 図 5.フォアグラウンドと Compute Engine の 背景レイヤは、円形マスクが適用された状態で一緒に表示されます。
  • アプリアイコンのユーザーテーマ設定をサポートする場合は、 アイコンのモノクロ バージョンにします。

    <ph type="x-smartling-placeholder">
    </ph> モノクロのアイコンレイヤの例を示す画像(左の画像)
カラープレビューが表示されます(右の画像)。モノクロレイヤでは、16 面の
66x66 のセーフゾーンの中央に配置された Android ロゴのサンプルのアイコン。安全な
108x108 のコンテナの中央に配置されます。カラープレビューは
このレイヤは、異なる色のユーザーテーマ(オレンジ、
ピンク、黄、緑)。 <ph type="x-smartling-placeholder">
    </ph> 図 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> の内部要素は両方をサポートします。 作成できます

次の例は、<foreground><background><adaptive-icon> 内の <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() メソッドを定義します。

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

参考情報

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