1. 始める前に
アプリアイコンは、独自のスタイルと見た目でアプリを差別化する重要な手段です。アプリアイコンは、ホーム画面、[すべてのアプリ] 画面、設定アプリを含め、さまざまな場所に表示されます。
アプリアイコンをランチャー アイコンということもあります。ランチャーは、Android デバイスでホームボタンを押してアプリの表示と整理を行う場合や、ウィジェットとショートカットを追加する場合に使用します。
さまざまな Android デバイスを使用していると、デバイス メーカーによってランチャーが異なることに気づくかもしれません。デバイス メーカーは、自社ブランドに特徴的なカスタム ランチャーを作成することがあります。たとえばメーカーによっては、上に示した円形のアイコン形状とは異なる形状でアプリアイコンを表示することがあります。
すべてのアプリアイコンを正方形、丸みを帯びた正方形、またはスクワークル（正方形と円形の中間）で表示することもあります。
目標は、デバイス メーカーが選択する形状にかかわらず、1 つのデバイス上のすべてのアプリアイコン形状を統一し、一貫したユーザー エクスペリエンスを実現することです。
そのため Android プラットフォームでは、API レベル 26 でアダプティブ アイコンのサポートが導入されました。アプリにアダプティブ アイコンを実装すると、デバイスのディスプレイに合わせてランチャー アイコンを調整し、幅広いデバイスに対応できるようになります。
この Codelab には、Affirmations アプリのランチャー アイコン用の画像ソースファイルが用意されています。Android Studio の Image Asset Studio というツールを使用して、ランチャー アイコンのさまざまなバージョンを生成します。学習した内容は、その後他のアプリのアプリアイコンにも応用できます。
前提条件
- リソース ファイルを含め、基本的な Android プロジェクトのファイルを操作できること
- Android Studio からエミュレータまたは実機に Android アプリをインストールできること
学習内容
- アプリのランチャー アイコンを変更する方法
- Android Studio で Image Asset Studio を使用してランチャー アイコン アセットを生成する方法
- アダプティブ アイコンの概要と、2 つのレイヤである理由
作成するもの
- Affirmations アプリのカスタム ランチャー アイコン
必要なもの
- Android Studio の最新の安定版がインストールされているパソコン
- 画像リソース ファイルをダウンロードするためのインターネット接続
- GitHub へのアクセス
スターター コードをダウンロードする
Android Studio で basic-android-kotlin-compose-training-affirmations フォルダを開きます。
- プロジェクト用に提供されている GitHub リポジトリ ページに移動します。
- ブランチ名が Codelab で指定されたブランチ名と一致していることを確認します。たとえば、次のスクリーンショットでは、ブランチ名は main です。
- プロジェクトの GitHub ページで、[Code] ボタンをクリックすると、ポップアップが表示されます。
- ポップアップで、[Download ZIP] をクリックして、プロジェクトをパソコンに保存します。ダウンロードが完了するまで待ちます。
- パソコンに保存したファイルを見つけます（[ダウンロード] フォルダなど）。
- ZIP ファイルをダブルクリックして展開します。プロジェクト ファイルが入った新しいフォルダが作成されます。
Android Studio でプロジェクトを開く
- Android Studio を起動します。
- [Welcome to Android Studio] ウィンドウで、[Open] をクリックします。
注: Android Studio がすでに開いている場合は、メニューから [File] > [Open] を選択します。
- ファイル ブラウザで、展開したプロジェクト フォルダがある場所（[ダウンロード] フォルダなど）に移動します。
- そのプロジェクト フォルダをダブルクリックします。
- Android Studio でプロジェクトが開かれるまで待ちます。
- 実行ボタン
をクリックして、アプリをビルドし、実行します。期待どおりにビルドされることを確認します。
2. ランチャー アイコン
目標は、デバイスのモデルや画面密度にかかわらず、ランチャー アイコンを鮮明かつ明瞭に表示することです。画面密度とは、画面上の 1 インチあたりのピクセル数（1 インチあたりのドット数、dpi）を指します。中密度デバイス（mdpi）の場合、画面上の 1 インチあたりのドット数は 160 であり、超超超高密度デバイス（xxxhdpi）の場合、画面上の 1 インチあたりのドット数は 640 です。
さまざまな画面密度のデバイスに対応するには、さまざまなバージョンのアプリアイコンを用意する必要があります。
ランチャー アイコン ファイルを探す
- ランチャー アイコンがプロジェクト内でどのように表示されるかを確認するには、まず Android Studio でプロジェクトを開きます。
- [Project] ウィンドウで、[Project] ビューに切り替えます。プロジェクトのファイル構造が表示されます。
- リソース ディレクトリ（[app] > [src] > [main] > [res]）に移動し、
mipmapフォルダをいくつか開きます。これらのmipmapフォルダは、Android アプリのランチャー アイコン アセットを配置する場所です。
drawable フォルダには、ランチャー アイコン用のベクターが XML ファイルで格納されています。ドローアブル アイコンの場合、ベクターは、コンパイル時に画像を描画する一連の命令です。mdpi、hdpi、xhdpi などは密度修飾子です。リソース ディレクトリの名前（mipmap, など）に付加することで、特定の画面密度のデバイス用のリソースであることを示すことができます。Android の密度修飾子のリストを次に示します。
mdpi- 中密度画面（160 dpi まで）用のリソースhdpi- 高密度画面（240 dpi まで）用のリソースxhdpi- 超高密度画面（320 dpi まで）用のリソースxxhdpi- 超超高密度画面（480 dpi まで）用のリソースxxxhdpi- 超超超高密度画面（640 dpi まで）用のリソースnodpi- 画面のピクセル密度にかかわらずスケーリングされることを想定してないリソースanydpi- 任意の密度にスケーリングされるリソース
- 画像ファイルをクリックすると、プレビューが表示されます。
ic_launcher.webpファイルにはアイコンの正方形バージョンが含まれ、ic_launcher_round.webpファイルにはアイコンの円形バージョンが含まれています。どちらも各 mipmap ディレクトリにあります。
たとえば、[res] > [mipmap-xxxhdpi] > [ic_launcher_round.webp] は次のようになります。アセットのサイズは右上に表示されています。この画像のサイズは 192 px x 192 px です。
[res] > [mipmap-mdpi] > [ic_launcher_round.webp] は次のようになります。サイズは 48 px x 48 px のみです。
このように、こうしたビットマップ画像ファイルは一定のピクセル グリッドで構成されています。また、特定の画面解像度向けに作成されています。そのため、サイズを変更すると画質が低下することがあります。
ランチャー アイコンの概要について理解したところで、次はアダプティブ アイコンについて学習します。
3.アダプティブ アイコン
フォアグラウンド レイヤとバックグラウンド レイヤ
Android 8.0 リリース（API レベル 26）で、アダプティブ アイコンがサポートされました。これにより、柔軟かつ面白い視覚的効果が可能になりました。デベロッパーにとって、これはアプリアイコンがフォアグラウンド レイヤとバックグラウンド レイヤという 2 つのレイヤで構成されることを意味します。
上の例では、白の Android アイコンがフォアグラウンド レイヤにあり、青と白のグリッドがバックグラウンド レイヤにあります。フォアグラウンド レイヤはバックグラウンド レイヤの上に重ねられます。その上にマスク（この場合は円形マスク）が適用され、円形のアプリアイコンが生成されます。
アダプティブ アイコン ファイルを探す
Affirmations アプリのコードですでに提供されているデフォルトのアダプティブ アイコン ファイルを見てみましょう。
- Android Studio の [Project] ウィンドウで、[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"/>
<monochrome android:drawable="@drawable/ic_launcher_foreground"/>
</adaptive-icon>
<adaptive-icon>要素を使用して、それぞれにリソース ドローアブルを指定することで、アプリアイコンの<background>レイヤと<foreground>レイヤを宣言しています。- [Project] ビューに戻り、バックグラウンド ドローアブルとフォアグラウンド ドローアブルを探します（[res] > [drawable] > [ic_launcher_background.xml] と [res] > [drawable] > [ic_launcher_foreground.xml]）。
- [Design] ビューに切り替えると、それぞれのプレビューが表示されます。
バックグラウンド:
フォアグラウンド:
- どちらもベクター型ドローアブル ファイルです。ピクセル単位の固定サイズはありません。[Code] ビューに切り替えると、
<vector>要素を使用したベクター型ドローアブルの XML 宣言を表示できます。
ic_launcher_foreground.xml
<!--
Copyright (C) 2023 The Android Open Source Project
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
https://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<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="M31,63.928c0,0 6.4,-11 12.1,-13.1c7.2,-2.6 26,-1.4 26,-1.4l38.1,38.1L107,108.928l-32,-1L31,63.928z">
<aapt:attr name="android:fillColor">
<gradient
android:endX="85.84757"
android:endY="92.4963"
android:startX="42.9492"
android:startY="49.59793"
android:type="linear">
<item
android:color="#44000000"
android:offset="0.0" />
<item
android:color="#00000000"
android:offset="1.0" />
</gradient>
</aapt:attr>
</path>
<path
android:fillColor="#FFFFFF"
android:fillType="nonZero"
android:pathData="M65.3,45.828l3.8,-6.6c0.2,-0.4 0.1,-0.9 -0.3,-1.1c-0.4,-0.2 -0.9,-0.1 -1.1,0.3l-3.9,6.7c-6.3,-2.8 -13.4,-2.8 -19.7,0l-3.9,-6.7c-0.2,-0.4 -0.7,-0.5 -1.1,-0.3C38.8,38.328 38.7,38.828 38.9,39.228l3.8,6.6C36.2,49.428 31.7,56.028 31,63.928h46C76.3,56.028 71.8,49.428 65.3,45.828zM43.4,57.328c-0.8,0 -1.5,-0.5 -1.8,-1.2c-0.3,-0.7 -0.1,-1.5 0.4,-2.1c0.5,-0.5 1.4,-0.7 2.1,-0.4c0.7,0.3 1.2,1 1.2,1.8C45.3,56.528 44.5,57.328 43.4,57.328L43.4,57.328zM64.6,57.328c-0.8,0 -1.5,-0.5 -1.8,-1.2s-0.1,-1.5 0.4,-2.1c0.5,-0.5 1.4,-0.7 2.1,-0.4c0.7,0.3 1.2,1 1.2,1.8C66.5,56.528 65.6,57.328 64.6,57.328L64.6,57.328z"
android:strokeWidth="1"
android:strokeColor="#00000000" />
</vector>
ベクター型ドローアブルとビットマップ画像はどちらもグラフィックを表しますが、重要な違いがあります。
ビットマップ画像は、各ピクセルの色情報を除き、保持する画像についてあまり理解していません。一方、ベクター グラフィックは、画像を定義する図形の描画方法を理解しています。これらの命令は、色情報とともに、点、線、曲線のセットで構成されています。ベクター グラフィックの利点は、画質を損なうことなく、任意の画面密度のキャンバス サイズに応じてスケーリングできることです。
ベクター型ドローアブルは Android のベクター グラフィックの実装であり、モバイル デバイスで柔軟性を持たせることを目的としています。使用可能な要素によって、XML で定義できます。すべての密度バケットに対してビットマップ アセットのバージョンを指定するのではなく、画像を一度定義するだけで済みます。そのため、アプリのサイズが小さくなり、保守が簡単になります。
それでは、アプリアイコンを実際に変更する作業に入ります。
4. 新しいアセットをダウンロードする
次に示す 2 つの新しいアセットをダウンロードすると、Affirmations アプリ用のアダプティブ アイコンを作成できます。ベクター型ドローアブル ファイルの詳細をすべて理解する必要はありません。内容はデザインツールから自動的に生成されます。
- バックグラウンド レイヤのベクター型ドローアブル
ic_launcher_background.xmlをダウンロードします。ブラウザがファイルをダウンロードせずに表示する場合は、[File] > [Save Page As...] の順に選択し、ファイルをパソコンに保存します。 - フォアグラウンド レイヤのベクター型ドローアブル
ic_launcher_foreground.xmlをダウンロードします。
なお、フォアグラウンド レイヤ アセットとバックグラウンド レイヤ アセットには、両方ともサイズが 108 dpi x 108 dpi でなければならないなど、一定の要件があります。詳細については、AdaptiveIconDrawable のドキュメントをご覧ください。また、マテリアル デザイン サイトの Android アイコンに関するページにもデザイン ガイダンスが記載されています。
デバイス メーカーが提供するマスクの形状によっては、アイコンの端が切り取られる可能性があるため、アイコンに関する重要な情報は「セーフゾーン」に配置することが重要です。セーフゾーンは、フォアグラウンド レイヤ中央にある直径 66 dpi の円形です。セーフゾーンの外のコンテンツは、切り取られても構わない、必須でないものにする必要があります（背景色など）。
5. アプリアイコンを変更する
Android Studio に戻って、ダウンロードした新しいアセットを使用します。
- まず、Android アイコンと緑色のグリッド背景を持つ古いドローアブル リソースを削除します。[Project] ビューで、ファイルを右クリックして [Delete] を選択します。
次を削除します。
drawable/ic_launcher_background.xml
drawable/ic_launcher_foreground.xml
次を削除します。
mipmap-anydpi-v26/
mipmap-hdpi/
mipmap-mdpi/
mipmap-xhdpi/
mipmap-xxhdpi/
mipmap-xxxhdpi/
[Safe delete (with usage search)] チェックボックスをオフにして、[OK] をクリックします。「Safe delete (with usage search)」機能は、削除しようとしているリソースの使用状況についてコードを検索します。この場合、これらのフォルダは同じ名前の新しいフォルダに置き換えられるため、[Safe delete] を気にする必要はありません。
- 新しい画像アセットを作成します。[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 つのレイヤが互いに独立して移動、スケーリングできるため、面白い視覚効果が得られます。視覚効果の見え方に関する面白い例については、設計上の考慮事項のアダプティブ アイコンのデザインに関するブログ記事をご覧ください。ユーザーが使用するデバイスや、OEM がアイコンに適用するマスクを知ることはできないため、重要な情報が切り落とされないようにアダプティブ アイコンを設定する必要があります。
- 重要な内容が切り落とされている場合や小さすぎる場合は、各レイヤの [Scaling] セクションにある [Resize] スライダーバーを使用して、すべてがセーフゾーンに表示されるようにできます。切り落とされないようにするには、[Foreground Layer] タブと [Background Layer] タブの [Resize] スライダーをドラッグして、フォアグラウンドとバックグラウンドの画像のサイズを 99% に変更します。
- [Next] をクリックします。
- このステップは [Confirm Icon Path] です。個々のファイルをクリックすると、プレビューが表示されます。
- [Finish] をクリックします。
mipmapフォルダで、生成されたすべてのアセットが正しく表示されることを確認します。次に例を示します。
よくできました。ここでもう 1 つ変更を加えます。
アプリをテストする
- 新しいアプリアイコンが表示されるかどうかをテストします。デバイス（エミュレータまたは実機）でアプリを実行します。
- デバイスのホームボタンをタップします。
- 上にスワイプしてすべてのアプリリストを表示します。
- 更新したアプリを探します。新しいアプリアイコンが表示されます。
よくできました。新しいアプリアイコンは上出来です。
アダプティブ ランチャー アイコンとレガシー ランチャー アイコン
これでアダプティブ アイコンが正しく機能するようになりましたが、アプリアイコンのビットマップ画像をすべて削除できないのはなぜかと思うかもしれません。これらのファイルは、以前のバージョンの Android で高品質なアプリアイコンを表示するために必要です。これを下位互換性といいます。
Android 8.0 以降（API バージョン 26 以降）を搭載したデバイスの場合、アダプティブ アイコンを使用できます（フォアグラウンド ベクター型ドローアブル、バックグラウンド ベクター型ドローアブル、その上に適用される OEM マスクの組み合わせ）。プロジェクトの関連ファイルは次のとおりです。
res/drawable/ic_launcher_background.xml
res/drawable/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.webp
res/mipmap-mdpi/ic_launcher_round.webp
res/mipmap-hdpi/ic_launcher.webp
res/mipmap-hdpi/ic_launcher_round.webp
res/mipmap-xhdpi/ic_launcher.png
res/mipmap-xhdpi/ic_launcher_round.webp
res/mipmap-xxhdpi/ic_launcher.webp
res/mipmap-xxhdpi/ic_launcher_round.webp
res/mipmap-xxxhdpi/ic_launcher.webp
res/mipmap-xxxhdpi/ic_launcher_round.webp
Android は基本的に、アダプティブ アイコンをサポートしていない以前のデバイスではビットマップ画像にフォールバックします。
これで、アプリアイコンを変更する手順がすべて完了しました。
6. 解答コードを取得する
この Codelab の完成したコードをダウンロードするには、以下の git コマンドを使用します。
$ git clone https://github.com/google-developer-training/basic-android-kotlin-compose-training-affirmations.git $ cd basic-android-kotlin-compose-training-affirmations $ git checkout main
または、リポジトリを ZIP ファイルとしてダウンロードし、Android Studio で開くこともできます。
解答コードを確認する場合は、GitHub で表示します。
- プロジェクト用に提供されている GitHub リポジトリ ページに移動します。
- ブランチ名が Codelab で指定されたブランチ名と一致していることを確認します。たとえば、次のスクリーンショットでは、ブランチ名は main です。
- プロジェクトの GitHub ページで、[Code] ボタンをクリックすると、ポップアップが表示されます。
- ポップアップで、[Download ZIP] をクリックして、プロジェクトをパソコンに保存します。ダウンロードが完了するまで待ちます。
- パソコンに保存したファイルを見つけます（[ダウンロード] フォルダなど）。
- ZIP ファイルをダブルクリックして展開します。プロジェクト ファイルが入った新しいフォルダが作成されます。
Android Studio でプロジェクトを開く
- Android Studio を起動します。
- [Welcome to Android Studio] ウィンドウで、[Open] をクリックします。
注: Android Studio がすでに開いている場合は、メニューから [File] > [Open] を選択します。
- ファイル ブラウザで、展開したプロジェクト フォルダがある場所（[ダウンロード] フォルダなど）に移動します。
- そのプロジェクト フォルダをダブルクリックします。
- Android Studio でプロジェクトが開かれるまで待ちます。
- 実行ボタン をクリックして、アプリをビルドし、実行します。期待どおりにビルドされることを確認します。
7. まとめ
- アプリアイコン ファイルを
mipmapリソース ディレクトリに配置する。 - 以前のバージョンの Android との下位互換性のために、各密度バケット（
mdpi、hdpi、xhdpi、xxhdpi、xxxhdpi）に異なるバージョンのアプリアイコン ビットマップ画像を提供する。 - リソース ディレクトリにリソース修飾子を追加して、特定の構成（
v24またはv26）のデバイスで使用するリソースを指定する。 - ベクター型ドローアブルは Android のベクター グラフィックの実装であり、関連する色情報とともに、点、線、曲線のセットとして XML で定義される。ベクター型ドローアブルでは、画質を損なうことなく任意の密度にスケーリングできる。
- API 26 で Android プラットフォームにアダプティブ アイコンが導入された。特定の要件を満たすフォアグラウンド レイヤとバックグラウンド レイヤで構成されているため、さまざまな OEM マスクを使用して、幅広いデバイスで高品質なアプリアイコンが表示される。
- Android Studio の Image Asset Studio を使用して、アプリのレガシー アイコンとアダプティブ アイコンを作成する。