アプリアイコンを変更する

アプリアイコンは、アプリを差別化する重要な手段です。また、ホーム画面、[すべてのアプリ] 画面、設定アプリを含め、さまざまな場所に表示されます。

アプリアイコンをランチャーアイコンということもあります。ランチャーとは、Android デバイスでホームボタンを押してアプリの表示と整理を行う場合や、ウィジェットとショートカットを追加する場合などのエクスペリエンスのことです。

さまざまな Android デバイスを試していると、デバイスメーカーによってランチャーのユーザーエクスペリエンスが異なる場合があることに気づくかもしれません。デバイスメーカーは、自社ブランドに特徴的なカスタムランチャーエクスペリエンスを作成することがあります。その一環として、さまざまなメーカーが、上に示した丸いアイコン形状とは異なる形状でアプリアイコンを表示することがあります。

たとえば、すべてのアプリアイコンを正方形、丸みを帯びた正方形、またはスクワークル（正方形と円形の中間）で表示できます。

デバイスメーカーが選択する形状に関係なく、目標は、1 つのデバイス上のすべてのアプリアイコン形状を統一し、一貫したユーザーエクスペリエンスを実現することです。

そのため Android プラットフォームでは、API レベル 26 でアダプティブアイコンのサポートが導入されました。アプリにアダプティブアイコンを実装すると、高品質なアプリアイコンを適切に表示することで、幅広いデバイスに対応できるようになります。

この Codelab では、Tip Calculator ランチャーアイコンの練習用の画像ソースファイルが提供されます。Android Studio の Image Asset Studio というツールを使用して、必要なランチャーアイコンのすべてのバージョンを生成します。その後、学習した内容を応用して他のアプリのアプリアイコンを変更できます。

前提条件

リソースファイルを含め、基本的な Android プロジェクトのファイルを操作できること
Android Studio からエミュレータまたは物理デバイスに Android アプリをインストールできること

学習内容

アプリのランチャーアイコンを変更する方法
Android Studio で Image Asset Studio を使用してランチャーアイコンアセットを生成する方法
アダプティブアイコンの概要と、2 つのレイヤで構成されている理由

作成するアプリの概要

ランチャーアイコンが新しい Android アプリ

必要なもの

Android Studio バージョン 4.1 以降がインストールされているパソコン。
画像リソースファイルをダウンロードするためのインターネット接続。

この Codelab に Kotlin の Android の基本コースの一環として取り組む場合は、すでに実施した前の Codelab のチップ計算ツールを直接使用できます。

この Codelab に単独で（コース外で）取り組んでいる場合は、Android Studio で Empty Activity テンプレートを使用して新しいプロジェクトをセットアップできます。そうすると、これらの手順に慣れるまで、既存のアプリのランチャーアイコンファイルが変更または上書きされることはありません。

目標は、デバイスのモデルや画面密度に関係なく、ランチャーアイコンをきれいに（鮮明かつ明瞭に）表示することです。具体的な話をすると、画面のピクセル密度とは、画面上の 1 インチあたりのピクセル数（dpi、1 インチあたりのドット数）を指します。中密度デバイス（mdpi）の場合、画面上の 1 インチあたりのドット数は 160 であり、超超超高密度デバイス（xxxhdpi）の場合、画面上の 1 インチあたりのドット数は 640 です。

さまざまな画面密度のデバイスに対応するには、さまざまなバージョンのアプリアイコンを用意する必要があります。

ランチャーアイコンファイルを探す

外観を確認するには、Android Studio でプロジェクトを開きます。アプリをテンプレートから開始した場合、Android Studio であらかじめ用意されているデフォルトのランチャーアイコンがあるはずです。
[Project] ウィンドウで、[Project] ビューに切り替えます。これにより、ファイルがパソコンにどのように保存されるかを示すファイル構造に従って、プロジェクト内のファイルが表示されます。

リソースディレクトリ（[app] > [src] > [main] > [res]）に移動し、mipmap フォルダをいくつか展開します。これらの mipmap フォルダは、Android アプリのランチャーアイコンアセットを配置する場所です。

mdpi、hdpi、xhdpi などは密度修飾子です。リソースディレクトリの名前（mipmap など）に付加することで、特定の画面密度のデバイス用のリソースであることを示すことができます。Android の密度修飾子のリストを次に示します。

mdpi - 中密度画面（160 dpi まで）用のリソース
hdpi - 高密度画面（240 dpi まで）用のリソース
xhdpi - 超高密度画面（320 dpi まで）用のリソース
xxhdpi - 超超高密度画面（480 dpi まで）用のリソース
xxxhdpi - 超超超高密度画面（640 dpi まで）用のリソース
nodpi - 画面のピクセル密度に関係なくスケーリングされることを想定してないリソース
anydpi - 任意の密度にスケーリングされるリソース

画像ファイルをクリックすると、プレビューが表示されます。ic_launcher.png ファイルにはアイコンの正方形バージョンが含まれ、ic_launcher_round.png ファイルにはアイコンの円形バージョンが含まれています。どちらも各リソースディレクトリにあります。

たとえば、[res] > [mipmap-xxxhdpi] > [ic_launcher_round.png] は次のようになります。また、アセットのサイズは右上に表示されています。この画像のサイズは 192 px x 192 px です。

一方、[res] > [mipmap-mdpi] > [ic_launcher_round.png] は次のようになります。サイズは 48 px x 48 px しかありません。

このように、こうしたビットマップ画像ファイルは一定のピクセルグリッドで構成されています。また、特定の画面解像度向けに作成されています。そのため、サイズを変更すると画質が低下することがあります。

ビットマップ画像を縮小すると、ピクセル情報が削除されるため、おそらく問題なく表示されます。ビットマップ画像を大幅に拡大すると、Android はピクセル情報を推測して入力する必要があるため、ぼやけた表示になる可能性があります。

ランチャーアイコンの概要について理解したところで、次はアダプティブアイコンについて学習します。

フォアグラウンドレイヤとバックグラウンドレイヤ

Android 8.0 リリース（API レベル 26）で、アダプティブランチャーアイコンがサポートされました。これにより、アプリアイコンの柔軟かつ面白い視覚的効果が可能になりました。デベロッパーにとって、これはアプリアイコンがフォアグラウンドレイヤとバックグラウンドレイヤという 2 つのレイヤで構成されることを意味します。

上の例では、白の Android アイコンがフォアグラウンドレイヤにあり、青と白のグリッドがバックグラウンドレイヤにあります。フォアグラウンドレイヤはバックグラウンドレイヤの上に重ねられます。その上にマスク（この場合は円形マスク）が適用され、円形のアプリアイコンが生成されます。

アダプティブアイコンファイルを探す

Android Studio のプロジェクトテンプレートで提供されているデフォルトのアダプティブアイコンファイルを見てみましょう。

Android Studio の [Project] ウィンドウで、[res] > [mipmap-anydpi-v26] リソースディレクトリを探して展開します。

XML ファイルのいずれか（ic_launcher.xml など）を開きます。次のようになっているはずです。

<?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>

<adaptive-icon> 要素を使用して、それぞれにリソースドローアブルを指定することで、アプリアイコンの <background> レイヤと <foreground> レイヤを宣言しています。
[Project] ビューに戻り、ドローアブルが宣言されている場所（[drawable] > [ic_launcher_background.xml] と [drawable-v24] > [ic_launcher_foreground.xml]）を探します。
[Design] ビューに切り替えると、それぞれのプレビューが表示されます（左がバックグラウンド、右がフォアグラウンド）。

どちらもベクター型ドローアブルファイルです。ピクセル単位の固定サイズはありません。[Code] ビューに切り替えると、<vector> 要素を使用したベクター型ドローアブルの XML 宣言を表示できます。

ベクター型ドローアブルとビットマップ画像はどちらもグラフィックを表しますが、重要な違いがあります。

ビットマップ画像は、各ピクセルの色情報を除き、保持する画像についてあまり理解していません。一方、ベクターグラフィックは、画像を定義する図形の描画方法を理解しています。これらの命令は、色情報とともに、点、線、曲線のセットで構成されています。ベクターグラフィックの利点は、画質を損なうことなく、任意の画面密度のキャンバスサイズに応じてスケーリングできることです。

ベクター型ドローアブルは Android のベクターグラフィックの実装であり、モバイルデバイスで十分な柔軟性を持たせることを目的としています。使用可能な要素によって、XML で定義できます。すべての密度バケットに対してビットマップアセットのバージョンを指定するのではなく、画像を一度定義するだけで済みます。そのため、アプリのサイズが小さくなり、保守が簡単になります。

それでは、アプリアイコンを実際に変更する作業に入ります。

次に示す 2 つの新しいアセットをダウンロードすると、Tip Calculator アプリ用のアダプティブアイコンを作成できます。ベクター型ドローアブルファイルの詳細をすべて理解する必要はありません。内容はデザインツールから自動的に生成されます。

バックグラウンドレイヤのベクター型ドローアブル ic_launcher_background.xml をダウンロードします。ブラウザがファイルをダウンロードせずに表示する場合は、[File] > [Save Page As...] の順に選択し、ファイルをパソコンに保存します。
フォアグラウンドレイヤのベクター型ドローアブル ic_launcher_foreground.xml をダウンロードします。

なお、フォアグラウンドレイヤアセットとバックグラウンドレイヤアセットには、両方ともサイズが 108 dp x 108 dp でなければならないなど、一定の要件があります。要件の詳細については、こちらか、マテリアルサイトの Android アイコンのデザインガイダンスをご覧ください。

デバイスメーカーが提供するマスクの形状によっては、アイコンの端が切り取られる可能性があるため、アイコンの重要な情報は、レイヤ中央にある直径 66 dp の円形である「セーフゾーン」に配置することが重要です。セーフゾーンの外のコンテンツは、切り取られても構わない、必須でないものにする必要があります（背景色など）。

Android Studio に戻って、新しいアセットを使用します。

まず、Android アイコンと緑のグリッド背景を持つ古いドローアブルリソースを削除します。[Project] ビューで、ファイルを右クリックして [Delete] を選択します。

次のファイルを削除します。

drawable/ic_launcher_background.xml
drawable-v24/ic_launcher_foreground.xml

[Safe delete (with usage search)] チェックボックスをオフにして、[OK] をクリックします。

新しい画像アセットを作成します。[res] ディレクトリを右クリックして、[New] > [Image Asset] を選択します。または、[Resource Manager] タブをクリックし、「+」アイコンをクリックして [Image Asset] を選択します。

Android Studio の Image Asset Studio ツールが開きます。
デフォルト設定のままにします。
Icon Type: Launcher Icons (Adaptive and Legacy)
Name: ic_launcher

[Foreground Layer] タブがすでに選択されている状態で、[Source Asset] サブセクションに移動します。[Path] フィールドで、フォルダアイコンをクリックします。
パソコンを参照してファイルを選択するように促すポップアップが表示されます。パソコンにダウンロードした新しい ic_launcher_foreground.xml ファイルの場所を探します。パソコンのダウンロードフォルダに保存されている可能性があります。見つかったら、[Open] をクリックします。
[Path] が、新しいフォアグラウンドベクター型ドローアブルの場所に更新されます。[Layer Name] は [ic_launcher_foreground]、[Asset Type] は [Image] のままにします。

次に、インターフェースの [Background Layer] タブに切り替えます。デフォルトはそのままにしておきます。[Path] のフォルダアイコンをクリックします。
ダウンロードした ic_launcher_background.xml ファイルの場所を探します。[Open] をクリックします。

新しいリソースファイルを選択すると、プレビューが更新されます。新しいフォアグラウンドレイヤとバックグラウンドレイヤでは、次のようになります。

アプリアイコンを 2 つのレイヤで表すことで、デバイスメーカー（相手先ブランド製品製造企業、略称 OEM）は、上のプレビューに示したように、Android デバイスに応じてさまざまな形状を作成できます。OEM は、デバイス上のすべてのアプリアイコンに適用されるマスクを提供します。

このマスクは、アプリアイコンのフォアグラウンドレイヤとバックグラウンドレイヤの上に適用されます。円形マスクと正方形マスクの例を次に示します。

円形マスクをアプリアイコンの両レイヤに適用すると、背景が青いグリッドでその中に Android が入った、円形のアイコンが作成されます（上の左の画像）。また、正方形マスクを適用すると、上の右の画像のようなアプリアイコンを生成できます。

2 つのレイヤを使用すると、2 つのレイヤを別々に動かしたりスケーリングしたりできるため、面白い視覚効果が得られます。視覚効果の見え方に関する面白い例については、設計上の考慮事項のブログ投稿をご覧ください。ユーザーが使用するデバイスや、OEM がアイコンに適用するマスクを事前に知ることはできないため、重要な情報が途切れないようにアダプティブアイコンを設定する必要があります。

フォアグラウンドレイヤのメインコンテンツ（この場合はサービスベルのアイコン）がセーフゾーン内にあり、さまざまなマスク形状によって切り取られていないことを確認します。重要なコンテンツが切り取られている場合や小さすぎる場合は、各レイヤの [Scaling] セクションにある [Resize] スライダーバーを使用できます。この場合、サイズ変更は不要であるため、100% のままで構いません。

[Next] をクリックします。
このステップは [Confirm Icon Path] です。個々のファイルをクリックすると、プレビューが表示されます。既存のファイルが上書きされる（赤い文字で表示）という警告も下部に表示されます。古いファイルは以前のアプリアイコン用であったため、問題ありません。

デフォルトのままで構わないため、[Finish] をクリックします。
mipmap フォルダで、生成されたすべてのアセットが正しく表示されることを確認します。次に例を示します。

よくできました。ここでもう 1 つ変更を加えます。

ベクター型ドローアブルファイルを -v26 ディレクトリに移動する

アプリの最小 SDK によっては、フォアグラウンドアセットが drawable-v24 フォルダにあり、バックグラウンドアセットが drawable フォルダにあることに気づくかもしれません。これは、フォアグラウンドアセットに、Android 7.0 リリース（API バージョン 24 ともいうため、-v24 リソース修飾子）から利用可能になったグラデーションが含まれているためです。バックグラウンドアセットにはグラデーションが含まれていないため、ベースの drawable フォルダに配置できます。

フォアグラウンドアセットとバックグラウンドアセットを 2 つの別々の drawable フォルダに配置するのではなく、両方のベクター型ドローアブルファイルを -v26 リソースディレクトリに移動します。これらのアセットはアダプティブアイコンにのみ使用されるため、これら 2 つのドローアブルは API 26 以降でのみ必要です。このフォルダ構造により、アダプティブアイコンファイルの検索と管理が簡単になります。

drawable-anydpi-v26
   ic_launcher_background.xml
   ic_launcher_foreground.xml
mipmap-anydpi-v26
   ic_launcher.xml
   ic_launcher_round.xml

まず、drawable-anydpi-v26 ディレクトリを作成します。[res] フォルダを右クリックします。[New] > [Android Resource Directory] を選択します。
[New Resource Directory] ダイアログが表示されます。オプションを次のように選択します。

Directory name: drawable-anydpi-v26

Resource type: drawable（プルダウンから選択します）

Source set: main（デフォルト値をそのまま残します）

[OK] をクリックします。[Project] ビューで、新しいリソースディレクトリ [res] > [drawable-anydpi-v26] が作成されていることを確認します。

ic_launcher_foreground.xml ファイルを左クリックして、[drawable] フォルダから [drawable-anydpi-v26] フォルダにドラッグします。「任意の dpi」のディレクトリにリソースを配置することは、任意の密度にスケーリングできるリソースであることを表します。
ic_launcher_background.xml ファイルを左クリックして、[drawable-v24] フォルダから [drawable-anydpi-v26] フォルダにドラッグします。
drawable-v24 フォルダが空であれば、削除します。フォルダを右クリックして、[Delete] を選択します。
プロジェクト内のすべての drawable ファイルと mipmap ファイルをクリックします。これらのアイコンのプレビューが正しく表示されることを確認します。

アプリをテストする

新しいアプリアイコンが表示されるかどうかをテストします。デバイス（エミュレータまたは物理デバイス）でアプリを実行します。
デバイスのホームボタンをタップします。
上にスワイプして「すべてのアプリ」リストを表示します。
更新したアプリを探します。新しいアプリアイコンが表示されます。

注: デバイスモデルによっては、異なる形状のランチャーアイコンが表示される場合があります。ただし、それでもバックグラウンドレイヤの上にフォアグラウンドレイヤが表示され、なんらかのマスクが適用されます。

よくできました。新しいアプリアイコンは上出来です。

アダプティブランチャーアイコンとレガシーランチャーアイコン

これでアダプティブアイコンが正しく機能するようになりましたが、アプリアイコンのビットマップ画像をすべて削除できないのはなぜかと思うかもしれません。これらのファイルは、以前のバージョンの Android で高品質なアプリアイコンを表示するために必要です。これを下位互換性といいます。

Android 8.0 以降（API バージョン 26 以降）を搭載したデバイスの場合:

アダプティブアイコンを使用できます（フォアグラウンドベクター型ドローアブル、バックグラウンドベクター型ドローアブル、その上に適用される OEM マスクの組み合わせ）。プロジェクトの関連ファイルは次のとおりです。

res/drawable-anydpi-v26/ic_lancher_background.xml
res/drawable-anydpi-v26/ic_launcher_foreground.xml
res/mipmap-anydpi-v26/ic_launcher.xml
res/mipmap-anydpi-v26/ic_launcher_round.xml

Android 8.0 より前（ただしアプリの必要な最小 API レベルより後）を搭載したデバイスの場合:

レガシーランチャーアイコンが使用されます（さまざまな密度バケットの mipmap フォルダにあるビットマップ画像）。プロジェクトの関連ファイルは次のとおりです。

res/mipmap-mdpi/ic_launcher.png
res/mipmap-mdpi/ic_launcher_round.png
res/mipmap-hdpi/ic_launcher.png
res/mipmap-hdpi/ic_launcher_round.png
res/mipmap-xhdpi/ic_launcher.png
res/mipmap-xhdpi/ic_launcher_round.png
res/mipmap-xxdpi/ic_launcher.png
res/mipmap-xxdpi/ic_launcher_round.png
res/mipmap-xxxdpi/ic_launcher.png
res/mipmap-xxxdpi/ic_launcher_round.png

Android は基本的に、アダプティブアイコンをサポートしていない以前のデバイスではビットマップ画像にフォールバックします。

これで、アプリアイコンを変更する手順がすべて完了しました。

この Codelab のソリューションコードを以下に示します。

res/mipmap-anydpi-v26/ic_launcher.xml

<?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>

res/mipmap-anydpi-v26/ic_launcher_round.xml

<?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>

res/drawable-anydpi-v26/ic_launcher_background.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt"
    android:width="108dp"
    android:height="108dp"
    android:viewportWidth="108"
    android:viewportHeight="108">
  <path
      android:pathData="M0,0h108v108h-108z">
    <aapt:attr name="android:fillColor">
      <gradient
          android:startY="-1.0078"
          android:startX="54"
          android:endY="106.9922"
          android:endX="54"
          android:type="linear">
        <item android:offset="0" android:color="#FF12C26D"/>
        <item android:offset="1" android:color="#FF0F9453"/>
      </gradient>
    </aapt:attr>
  </path>
</vector>

res/drawable-anydpi-v26/ic_launcher_foreground.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="108dp"
    android:height="108dp"
    android:viewportWidth="108"
    android:viewportHeight="108">
  <path
      android:pathData="M38.19,65.92L69.32,65.92a1.2,1.2 0,0 0,1.2 -1.2,0.89 0.89,0 0,0 0,-0.23 17,17 0,0 0,-33.25 0,1.18 1.18,0 0,0 0.9,1.42ZM74.53,69.05a0.85,0.85 0,0 0,-0.78 -0.84L34,68.21a0.85,0.85 0,0 0,-0.77 0.84v2.82a0.84,0.84 0,0 0,0.77 0.86L73.78,72.73a0.85,0.85 0,0 0,0.77 -0.86L74.55,70.65C74.55,70.24 74.56,69.58 74.53,69.05ZM52.08,49h3.59a1.86,1.86 0,0 0,0 -3.72L52.08,45.28a1.86,1.86 0,0 0,0 3.72ZM53.87,39.81a1.19,1.19 0,0 0,1.19 -1.19L55.06,32.87a1.19,1.19 0,0 0,-2.38 0v5.71a1.19,1.19 0,0 0,1.19 1.19h0ZM61.69,41l4.62,-3.35a1.19,1.19 0,1 0,-1.4 -1.93L60.29,39A1.2,1.2 0,0 0,60 40.67a1.18,1.18 0,0 0,1.66 0.26ZM41.69,37.65L46.31,41a1.2,1.2 0,0 0,1.35 -2L43,35.66a1.19,1.19 0,0 0,-1.66 0.26,1.2 1.2,0 0,0 0.3,1.67Z"
      android:fillColor="#FFFFFF"/>
</vector>

また次の場所に、Android Studio によってビットマップ画像が自動生成されているはずです。

res/mipmap-mdpi/ic_launcher.png
res/mipmap-mdpi/ic_launcher_round.png
res/mipmap-hdpi/ic_launcher.png
res/mipmap-hdpi/ic_launcher_round.png
res/mipmap-xhdpi/ic_launcher.png
res/mipmap-xhdpi/ic_launcher_round.png
res/mipmap-xxdpi/ic_launcher.png
res/mipmap-xxdpi/ic_launcher_round.png
res/mipmap-xxxdpi/ic_launcher.png
res/mipmap-xxxdpi/ic_launcher_round.png

アプリアイコンファイルを mipmap リソースディレクトリに配置する。
以前のバージョンの Android との下位互換性のために、各密度バケット（mdpi、hdpi、xhdpi、xxhdpi、xxxhdpi）に異なるバージョンのアプリアイコンビットマップ画像を提供する。
リソースディレクトリにリソース修飾子を追加して、特定の構成（v26 など）のデバイスで使用するリソースを指定する。
ベクター型ドローアブルは Android のベクターグラフィックの実装であり、関連する色情報とともに、点、線、曲線のセットとして XML で定義される。ベクター型ドローアブルでは、画質を損なうことなく任意の密度にスケーリングできる。
API 26 で Android プラットフォームにアダプティブアイコンが導入された。特定の要件を満たすフォアグラウンドレイヤとバックグラウンドレイヤで構成されているため、さまざまな OEM マスクを使用して、幅広いデバイスで高品質なアプリアイコンが表示される。
Android Studio の Image Asset Studio を使用して、アプリのレガシーアイコンとアダプティブアイコンを作成する。