アダプティブ アイコン

Android 8.0(API レベル 26)では、アダプティブ ランチャー アイコンが導入され、デバイスモデルごとに異なる図形を表示できるようになりました。たとえば、アダプティブ ランチャー アイコンを利用すれば、ある OEM デバイスでは円形のアイコン、別のデバイスで角が丸い正方形のアイコンを表示できます。各デバイスの OEM が指定するマスクを使って、すべてのアダプティブ アイコンが同じ図形でレンダリングされます。アダプティブ ランチャー アイコンは、ショートカット、設定アプリ、共有ダイアログ、概要画面でも使用されます。

アダプティブ アイコンのワイヤフレームに適用されるさまざまなマスク アダプティブ アイコンに適用されるさまざまなマスク

図 1: アダプティブ アイコンは、デバイスによって異なるさまざまなマスクに対応します。

アダプティブ ランチャー アイコンのデザインは、バックグラウンドとフォアグラウンドの 2 つのレイヤを定義して調整できます。アイコンレイヤは、アイコンの枠線の周囲にマスクや背景のシャドウがないドローアブルとして指定する必要があります。

アダプティブ アイコンの作成の等角投影図

図 2: アダプティブ アイコンは 2 つのレイヤとマスクを使って定義されます。

Android 7.1(API レベル 25)以前では、ランチャー アイコンのサイズは 48 x 48 dp でした。現在、アイコンレイヤのサイズを設定する場合は、以下のガイドラインに準拠してください。

  • レイヤのサイズはどちらも 108 x 108 dp にする必要があります。
  • アイコンの内側の 72 x 72 dp の部分は、マスクされたビューポート内に表示されます。
  • 4 つの辺それぞれの外側の 18 dp の部分は、パララックスや点滅など、視覚効果を作成する領域として予約されています。

注: アニメーションの視覚効果は、対応するランチャーで生成されます。 視覚効果はランチャーによって異なる可能性があります。

注意: デバイスの OEM が指定するマスクには、図形の特定のポイントに沿った半径 33 dp の領域が含まれていることがあります。

アダプティブ アイコンに適用されるパララックスのデモ アダプティブ アイコンに適用されるピックアップ アニメーションのデモ

図 3: アダプティブ アイコンはさまざまな視覚効果に対応します。

注意: 必要なレイヤでランチャー アイコンを更新しなかった場合、アイコンのデザインはシステム UI に表示される他のアイコンと整合しません。また、視覚効果も生成されません。

Android Studio を使用してアダプティブ アイコンを作成する方法については、Image Asset Studio を使用したアプリ アイコンの作成についての説明をご覧ください。

XML でアダプティブ アイコンを作成する

XML を使用してアダプティブ アイコンをアプリに追加するには、まず、ドローアブル リソースを指定するようにアプリ マニフェストの android:icon 属性を更新します。アイコンのドローアブル リソースは android:roundIcon 属性を使用して定義することもできます。android:roundIcon 属性は、円形マスク用に別のアイコン アセットが必要な場合(たとえば、ロゴのブランディングに円形を利用する場合)にのみ使用してください。次のコード スニペットに、両方の属性を示します。

    <application
        …
        android:icon="@mipmap/ic_launcher"
        android:roundIcon="@mipmap/ic_launcher_round"
        …>
    </application>
    

次に、Android 8.0(API レベル 26)で使用する別のドローアブル リソースをアプリの res/mipmap-anydpi-v26/ic_launcher.xml に作成します。<adaptive-icon> 要素を使って、アイコンのフォアグラウンドとバックグラウンドのレイヤ ドローアブルを定義できます。<foreground><background> の内部要素はどちらも android:drawable 属性をサポートしています。

    <?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" />
    </adaptive-icon>
    

バックグラウンドとフォアグラウンドのドローアブルは <foreground> 要素と <background> 要素で囲んで要素として定義することもできます。

通常のアダプティブ ランチャー アイコンと同じマスクと視覚効果をショートカットに適用する場合は、次のいずれかの方法をご利用ください。

  • 静的ショートカットの場合は、<adaptive-icon> 要素を使用します。
  • 動的ショートカットの場合は、作成時に createWithAdaptiveBitmap() メソッドを呼び出します。

ショートカットについて詳しくは、アプリのショートカットについての説明をご覧ください。

参考情報

アダプティブ アイコンのデザインと実装について詳しくは、Google のデザイナー兼デベロッパー Nick Butcher による以下の記事(英語)をご覧ください。