Android Dev Summit, October 23-24: two days of technical content, directly from the Android team. Sign-up for livestream updates.

Image Asset Studio を使用してアプリアイコンを作成する

Android Studio には Image Asset Studio というツールがあります。このツールは、マテリアル アイコン、カスタム画像、テキスト文字列から独自のアプリアイコンを生成するのに役立ちます。アプリがサポートするピクセル密度ごとに、適切な解像度でアイコンのセットを生成できます。Image Asset Studio は、プロジェクトの res/ ディレクトリにある画面密度ごとのフォルダに、新たに生成されたアイコンを格納します。Android は、アプリが実行されるデバイスの画面密度に応じて、実行時に適切なリソースを使用します。

Image Asset Studio では、次のタイプのアイコンを生成できます。

  • ランチャー アイコン
  • アクションバー アイコンとタブアイコン
  • 通知アイコン

Image Asset Studio の概要

Image Asset Studio を使用すると、さまざまなタイプのアイコンを異なる画面密度で作成できます。さらに、アイコンがプロジェクトのどこに配置されるかも確認できます。以下のセクションでは、作成可能なアイコンのタイプと、使用可能な画像およびテキスト入力について説明します。

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

ランチャー アイコンは、ユーザー向けにアプリを表現したグラフィックです。具体的な機能は以下のとおりです。

  • デバイスにインストールされたアプリのリストと、ホーム画面に表示できます。
  • アプリのショートカットとして機能します(たとえば、連絡先ショートカット アイコンから連絡先の詳細情報を開きます)。
  • ランチャー アプリで使用できます。
  • ユーザーが Google Play でアプリを検索するときに役立ちます。

アダプティブ ランチャー アイコンは、さまざまなデバイスモデルにさまざまな形状で表示でき、Android 8.0(API レベル 26)以上で使用可能です。Android Studio 3.0 では、Image Asset Studio でアダプティブ アイコンを作成するためのサポートが導入されました。Image Asset Studio は、円、長方形、丸みのある四角形、正方形のアダプティブ アイコンのプレビューに加えて、アイコンの全画面プレビューを生成します。アイコンのレガシー、ラウンド、および Google Play ストア プレビューも生成します。レガシー ランチャー アイコンは、デバイスのホーム画面とランチャー ウィンドウでアプリを表すグラフィックです。レガシー ランチャー アイコンは、アダプティブ アイコンをサポートしていない Android 7.1(API レベル 25)以下を実行しているデバイスでの使用を目的としています。

Image Asset Studio は、res/mipmap-density/ ディレクトリの適切な場所にアイコンを配置します。Google Play ストアに適した 512 x 512 ピクセルの画像も作成します。

古いバージョンの Android をサポートしている場合でも、ランチャー アイコンにはマテリアル デザイン スタイルを採用することをおすすめします。

詳しくは、アダプティブ ランチャー アイコンプロダクト アイコン - マテリアル デザインをご覧ください。

アクションバー アイコンとタブアイコン

アクションバー アイコンは、アクションバーに配置されるグラフィック要素で、個々のアクション アイテムを表します。詳しくは、アクションの追加と処理アプリバー - マテリアル デザインアクションバーのデザインをご覧ください。

タブアイコンは、マルチタブ インターフェースで個々のタブを表すために使用されるグラフィック要素です。各タブアイコンには、未選択と選択済みの 2 つの状態があります。詳しくは、タブを使用してスワイプビューを作成するタブ - マテリアル デザインをご覧ください。

Image Asset Studio は、アイコンを res/drawable-density/ ディレクトリの適切な場所に配置します。

古いバージョンの Android をサポートしている場合でも、アクションバー アイコンとタブアイコンにはマテリアル デザイン スタイルを採用することをおすすめします。古いバージョンのプラットフォームにマテリアル デザイン UI を配信する場合は、appcompat およびその他のサポート ライブラリを使用します。

Image Asset Studio の代わりに Vector Asset Studio を使用して、アクションバー アイコンとタブアイコンを作成することもできます。ベクター型ドローアブルはシンプルなアイコンに適しており、APK のサイズを縮小するのに役立ちます。

通知アイコン

通知は、アプリの通常の UI と無関係にユーザーに表示できるメッセージです。Image Asset Studio は、次のように、通知アイコンを res/drawable-density/ ディレクトリ内の適切な場所に配置します。

  • Android 2.2(API レベル 8)以下のアイコンは、res/drawable-density/ ディレクトリに配置されます。
  • Android 2.3~2.3.7(API レベル 9~10)のアイコンは、res/drawable-density-v9/ ディレクトリに配置されます。
  • Android 3(API レベル 11)以上のアイコンは、res/drawable-density-v11/ ディレクトリに配置されます。

Android 2.3~2.3.7(API レベル 9~10)に対応するアプリに対して、Image Asset Studio は灰色のアイコンを生成します。それ以降の Android バージョンに対しては、白いアイコンを生成します。

詳しくは、通知通知(マテリアル デザイン)通知(Android 5.0 の変更点)、通知(Android 4.4 以下)ステータスバー アイコン(Android 3.0 以下)をご覧ください。

クリップアート

Image Asset Studio では、VectorDrawable 形式または PNG 形式の Google マテリアル アイコンを、ダイアログで選択するだけで簡単にインポートできます。詳細については、マテリアル アイコンをご覧ください。

画像

独自の画像をインポートして、アイコンタイプに合わせて調整できます。Image Asset Studio は、PNG(推奨)、JPG(使用可能)、GIF(非推奨)のファイルタイプをサポートしています。

テキスト文字列

Image Asset Studio では、さまざまなフォントで入力したテキスト文字列をアイコン上に配置できます。テキストベースのアイコンは、さまざまな画面密度の PNG ファイルに変換されます。フォントは、使用するパソコンにインストールされているものを使用できます。

Image Asset Studio を実行する

Image Asset Studio を起動する手順は次のとおりです。

  1. [Project] ウィンドウで [Android] ビューを選択します。
  2. res フォルダを右クリックして、[New] > [Image Asset] を選択します。

    Image Asset Studio のアダプティブ アイコンおよびレガシー アイコンのウィザード。

  3. 続いて次の手順を行います。

アダプティブ ランチャー アイコンとレガシー ランチャー アイコンを作成する

注: アプリが Android 7.1 以下のバージョンに対応している場合は、レガシー ランチャー アイコンのみを作成してください。

Image Asset Studio を開いた後、次の手順でアダプティブ アイコンとレガシー アイコンを追加できます。

  1. [Icon Type] フィールドで、[Launcher Icons (Adaptive & Legacy)] を選択します。
  2. [Foreground Layer] タブで [Asset Type] を選択し、その下のフィールドでアセットを指定します。
    • [Image] を選択して、画像ファイルのパスを指定します。
    • [Clip Art] を選択して、マテリアル デザイン アイコンセットから画像を指定します。
    • [Text] を選択してテキスト文字列を指定し、フォントを選択します。
  3. [Background Layer] タブで [Asset Type] を選択し、その下のフィールドでアセットを指定します。色を選択するか、または背景レイヤーとして使用する画像を指定します。
  4. [Legacy] タブでデフォルト設定を確認し、レガシー アイコン、ラウンド アイコン、Google Play ストアアイコンを生成するかどうかを決定します。
  5. (任意)[Foreground Layer] タブと [Background Layer] タブで、それぞれ名前と表示設定を変更します。
    • [Name] - デフォルト名を使用しない場合は、新しい名前を入力します。リソース名がすでにプロジェクトに存在する場合は、上書きされます(ウィザードの下部にエラーとして示されます)。名前には、小文字、アンダースコア、数字のみを使用できます。
    • [Trim] - ソースアセットのアイコン グラフィックと境界の間のマージンを調整するには、[Yes] を選択します。この操作により、アスペクト比を維持したまま、透明な余白が削除されます。ソースアセットを変更しない場合は、[No] を選択します。
    • [Color] - クリップアートまたはテキスト アイコンの色を変更するには、このフィールドをクリックします。[Select Color] ダイアログで色を指定して、[Choose] をクリックします。新しい値がこのフィールドに表示されます。
    • [Resize] - 画像クリップアートテキストのサイズを変更するには、倍率をパーセント単位で指定します。[Color] アセットタイプを指定すると、このコントロールは背景レイヤーに対して無効になります。
  6. [Next] をクリックします。
  7. (任意)リソース ディレクトリを変更します。画像アセットを追加したいリソース ソースセット(src/main/ressrc/debug/ressrc/release/res、またはカスタム ソースセット)を選択します。メイン ソースセットは、デバッグとリリースを含むすべてのビルド バリアントに適用されます。デバッグ ソースセットとリリース ソースセットはメイン ソースセットよりも優先され、ビルドのバージョンの 1 つに適用されます。デバッグ ソースセットはデバッグ専用です。新しいソースセットを定義するには、[File] > [Project Structure] > [app] > [Build Types] を選択します。たとえば、ベータ ソースセットを定義して、右下隅に「BETA」というテキストを表示するバージョンのアイコンを作成できます。詳細については、ビルド バリアントの設定をご覧ください。
  8. [Finish] をクリックします。Image Asset Studio により、さまざまな画面密度に応じた mipmap フォルダに画像が追加されます。

レガシー ランチャー アイコンを作成する

注: アプリが Android 8.0 に対応している場合は、アダプティブ ランチャー アイコンとレガシー ランチャー アイコンを作成してください。

Image Asset Studio を開いた後、次の手順でランチャー アイコンを追加できます。

  1. [Icon Type] フィールドで、[Launcher Icons (Legacy Only)] を選択します。
  2. [Asset Type] を選択し、その下のフィールドでアセットを指定します。
    • [Clip Art] フィールドで、ボタンをクリックします。
    • [Select Icon] ダイアログでマテリアル アイコンを選択し、[OK] をクリックします。

    • [Path] フィールドで、画像のパスとファイル名を指定します。ダイアログを使用するには、[...] をクリックします。
    • [Text] フィールドで、テキスト文字列を入力してフォントを選択します。

    画面の右側の [Source Asset] 領域とウィザードの下部のプレビュー領域に、アイコンが表示されます。

  3. (任意)アイコンの名前と表示設定を変更します。
    • [Name] - デフォルト名を使用しない場合は、新しい名前を入力します。リソース名がすでにプロジェクトに存在する場合は、上書きされます(ウィザードの下部にエラーとして示されます)。名前には、小文字、アンダースコア、数字のみを使用できます。
    • [Trim] - ソースアセットのアイコン グラフィックと境界の間のマージンを調整するには、[Yes] を選択します。この操作により、アスペクト比を維持したまま、透明な余白が削除されます。ソースアセットを変更しない場合は、[No] を選択します。
    • [Padding] - 4 つの辺のすべてでソースアセットのパディングを調整するには、スライダーを使用します。-10% から 50% の範囲で値を選択します。[Trim] も選択している場合は、先にトリミングが行われます。
    • [Foreground] - クリップアートまたはテキスト アイコンの前景色を変更するには、このフィールドをクリックします。[Select Color] ダイアログで色を指定して、[Choose] をクリックします。新しい値がこのフィールドに表示されます。
    • [Background] - 背景色を変更するには、このフィールドをクリックします。[Select Color] ダイアログで色を指定して、[Choose] をクリックします。新しい値がこのフィールドに表示されます。
    • [Scaling] - アイコンのサイズを調整するには、[Crop] または [Shrink to Fit] を選択します。[Crop] を選択すると画像の端が切り取られますが、[Shrink to Fit] では切り取られません。ソースアセットがうまく収まらない場合は、必要に応じてパディングを調整できます。
    • [Shape] - ソースアセットの背後に背景を配置する場合、円、正方形、縦長の長方形、横長の長方形のいずれかの図形を選択します。透明な背景を使用する場合は、[None] を選択します。
    • [Effect] - 正方形または長方形の右上の角を折る効果を適用するには、[DogEar] を選択します。適用しない場合は、[None] を選択します。

    Image Asset Studio は透明な正方形内にアイコンを配置するため、端にパディングがあります。このパディングにより、標準のドロップ シャドウ アイコン効果を適用する十分なスペースが確保されます。

  4. [Next] をクリックします。
  5. (任意)リソース ディレクトリを変更します。
    • Res ディレクトリ - 画像アセットを追加したいリソース ソースセット(src/main/ressrc/debug/ressrc/release/res、またはユーザー定義のソースセット)を選択します。メイン ソースセットは、デバッグとリリースを含むすべてのビルド バリアントに適用されます。デバッグ ソースセットとリリース ソースセットはメイン ソースセットよりも優先され、ビルドのバージョンの 1 つに適用されます。デバッグ ソースセットはデバッグ専用です。新しいソースセットを定義するには、[File] > [Project Structure] > [app] > [Build Types] を選択します。たとえば、ベータ ソースセットを定義して、右下隅に「BETA」というテキストを表示するバージョンのアイコンを作成できます。詳細については、ビルド バリアントの設定をご覧ください。

    [Output Directories] 領域に、画像と、[Project] ウィンドウの [Project Files] ビューで画像が表示されるフォルダが表示されます。

  6. [Finish] をクリックします。
  7. Image Asset Studio により、さまざまな画面密度に応じた mipmap フォルダに画像が追加されます。

アクションバー アイコンまたはタブアイコンを作成する

Image Asset Studio を開いた後、次の手順でアクションバー アイコンまたはタブアイコンを追加できます。

  1. [Icon Type] フィールドで、[Action Bar and Tab Icons] を選択します。
  2. [Asset Type] を選択し、その下のフィールドでアセットを指定します。
    • [Clip Art] フィールドで、ボタンをクリックします。
    • [Select Icon] ダイアログでマテリアル アイコンを選択し、[OK] をクリックします。

    • [Path] フィールドで、画像のパスとファイル名を指定します。ダイアログを使用するには、[...] をクリックします。
    • [Text] フィールドで、テキスト文字列を入力してフォントを選択します。

    画面の右側の [Source Asset] 領域とウィザードの下部のプレビュー領域に、アイコンが表示されます。

  3. (任意)アイコンの名前と表示オプションを変更します。
    • [Name] - デフォルト名を使用しない場合は、新しい名前を入力します。リソース名がすでにプロジェクトに存在する場合は、上書きされます(ウィザードの下部にエラーとして示されます)。名前には、小文字、アンダースコア、数字のみを使用できます。
    • [Trim] - ソースアセットのアイコン グラフィックと境界の間のマージンを調整するには、[Yes] を選択します。この操作により、アスペクト比を維持したまま、透明な余白が削除されます。ソースアセットを変更しない場合は、[No] を選択します。
    • [Padding] - 4 つの辺のすべてでソースアセットのパディングを調整するには、スライダーを使用します。-10% から 50% の範囲で値を選択します。[Trim] も選択している場合は、先にトリミングが行われます。
    • [Theme] - [HOLO_LIGHT] または [HOLO_DARK] を選択します。または、[Select Color] ダイアログで色を指定し、[CUSTOM] を選択してから [Custom color] フィールドをクリックします。

    Image Asset Studio は透明な正方形内にアイコンを作成するため、端にパディングがあります。このパディングにより、標準のドロップ シャドウ アイコン効果を適用する十分なスペースが確保されます。

  4. [Next] をクリックします。
  5. (任意)リソース ディレクトリを変更します。
    • Res ディレクトリ - 画像アセットを追加したいリソース ソースセット(src/main/ressrc/debug/ressrc/release/res、またはユーザー定義のソースセット)を選択します。メイン ソースセットは、デバッグとリリースを含むすべてのビルド バリアントに適用されます。デバッグ ソースセットとリリース ソースセットはメイン ソースセットよりも優先され、ビルドのバージョンの 1 つに適用されます。デバッグ ソースセットはデバッグ専用です。新しいソースセットを定義するには、[File] > [Project Structure] > [app] > [Build Types] を選択します。たとえば、ベータ ソースセットを定義して、右下隅に「BETA」というテキストを表示するバージョンのアイコンを作成できます。詳細については、ビルド バリアントの設定をご覧ください。

    [Output Directories] 領域に、画像と、[Project] ウィンドウの [Project Files] ビューで画像が表示されるフォルダが表示されます。

  6. [Finish] をクリックします。
  7. Image Asset Studio により、さまざまな画面密度に応じた drawable フォルダに画像が追加されます。

通知アイコンを作成する

Image Asset Studio を開いた後、次の手順で通知アイコンを追加できます。

  1. [Icon Type] フィールドで、[Notification Icons] を選択します。
  2. [Asset Type] を選択し、その下のフィールドでアセットを指定します。
    • [Clip Art] フィールドで、ボタンをクリックします。
    • [Select Icon] ダイアログでマテリアル アイコンを選択し、[OK] をクリックします。

    • [Path] フィールドで、画像のパスとファイル名を指定します。ダイアログを使用するには、[...] をクリックします。
    • [Text] フィールドで、テキスト文字列を入力してフォントを選択します。

    画面の右側の [Source Asset] 領域とウィザードの下部のプレビュー領域に、アイコンが表示されます。

  3. (任意)アイコンの名前と表示オプションを変更します。
    • [Name] - デフォルト名を使用しない場合は、新しい名前を入力します。リソース名がすでにプロジェクトに存在する場合は、上書きされます(ウィザードの下部にエラーとして示されます)。名前には、小文字、アンダースコア、数字のみを使用できます。
    • [Trim] - ソースアセットのアイコン グラフィックと境界の間のマージンを調整するには、[Yes] を選択します。この操作により、アスペクト比を維持したまま、透明な余白が削除されます。ソースアセットを変更しない場合は、[No] を選択します。
    • [Padding] - 4 つの辺のすべてでソースアセットのパディングを調整するには、スライダーを使用します。-10% から 50% の範囲で値を選択します。[Trim] も選択している場合は、先にトリミングが行われます。

    Image Asset Studio は透明な正方形内にアイコンを作成するため、端にパディングがあります。このパディングにより、標準のドロップ シャドウ アイコン効果を適用する十分なスペースが確保されます。

  4. [Next] をクリックします。
  5. (任意)リソース ディレクトリを変更します。
    • Res ディレクトリ - 画像アセットを追加したいリソース ソースセット(src/main/ressrc/debug/ressrc/release/res、またはユーザー定義のソースセット)を選択します。メイン ソースセットは、デバッグとリリースを含むすべてのビルド バリアントに適用されます。デバッグ ソースセットとリリース ソースセットはメイン ソースセットよりも優先され、ビルドのバージョンの 1 つに適用されます。デバッグ ソースセットはデバッグ専用です。新しいソースセットを定義するには、[File] > [Project Structure] > [app] > [Build Types] を選択します。たとえば、ベータ ソースセットを定義して、右下隅に「BETA」というテキストを表示するバージョンのアイコンを作成できます。詳細については、ビルド バリアントの設定をご覧ください。

    [Output Directories] 領域に、画像と、[Project] ウィンドウの [Project Files] ビューで画像が表示されるフォルダが表示されます。

  6. [Finish] をクリックします。
  7. Image Asset Studio により、さまざまな画面密度に応じた drawable フォルダに画像が追加されます。

コード内で画像リソースを参照する

通常、画像リソースは汎用的な方法によってコード内で参照できます。アプリが実行されると、デバイスに応じて対応する画像が自動的に表示されます。

  • ほとんどの場合、画像リソースは XML コードでは @drawable、Java コードでは Drawable として参照できます。
  • たとえば、次のレイアウト XML コードは、ImageView にドローアブルを表示します。

        <ImageView
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:src="@drawable/myimage" />
        

    次の Java コードは、画像を Drawable として取得します。

    Kotlin

        val drawable = resources.getDrawable(R.drawable.myimage, theme)
        

    Java

        Resources res = getResources();
        Drawable drawable = res.getDrawable(R.drawable.myimage, getTheme());
        

    getResources() メソッドは Context クラスにあり、アクティビティ、フラグメント、レイアウト、ビューなどの UI オブジェクトに適用されます。

  • アプリがサポート ライブラリを使用している場合は、app:srcCompat ステートメントを使用して、XML コード内で画像リソースを参照できます。例:
  •     <ImageView
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            app:srcCompat="@drawable/myimage" />
        

画像リソースには、メインスレッドからのみアクセスできます。

プロジェクトの res/ ディレクトリに画像リソースを作成している場合、そのリソース ID を使用して Java コードまたは XML レイアウトから画像リソースを参照できます。次の Java コードは、drawable/myimage.png リソースを使用するように ImageView を設定します。

Kotlin

    findViewById<ImageView>(R.id.myimageview).apply {
        setImageResource(R.drawable.myimage)
    }
    

Java

    ImageView imageView = (ImageView) findViewById(R.id.myimageview);
    imageView.setImageResource(R.drawable.myimage);
    

詳細については、リソースへのアクセスをご覧ください。

ランチャー アイコンの場合、AndroidManifest.xml ファイルは mipmap/ の場所を参照する必要があります。Image Asset Studio はこのコードを自動的に追加します。次のマニフェスト ファイルのコードは、mipmap/ ディレクトリの ic_launcher アイコンを参照しています。

    <application android:name="ApplicationTitle"
             android:label="@string/app_label"
             android:icon="@mipmap/ic_launcher" >
    

プロジェクトからアイコンを削除する

プロジェクトからアイコンを削除する手順は次のとおりです。

  1. [Project] ウィンドウで [Android] ビューを選択します。
  2. ランチャー アイコン用の res/mipmap フォルダを展開するか、その他のタイプのアイコン用の res/drawable フォルダを展開します。
  3. 削除するアイコン名があるサブフォルダを探します。
  4. このフォルダには、さまざまな画面密度のアイコンが含まれています。

  5. フォルダを選択して、Delete キーを押します。
  6. または、[Edit] > [Delete] を選択します。ファイルを右クリックして [Delete] を選択することもできます。

    [Safe Delete] ダイアログが表示されます。

  7. (任意)プロジェクト内でアイコンが使用されている場所を検出するオプションを選択して、[OK] をクリックします。
  8. Android Studio により、プロジェクトとドライブからファイルが削除されます。ただし、プロジェクト内でファイルが使用されている場所の検索を選択して、ファイルが使用されている場所が見つかった場合は、そのファイルを表示して削除するかどうかを決定できます。プロジェクトを正常にコンパイルできるようにするには、これらの参照を削除するか置換する必要があります。

  9. [Build] > [Clean Project] を選択します。
  10. Android Studio によって、削除された画像リソースに対応する生成済みの画像ファイルがすべて削除されます。 画像ファイルはプロジェクトとドライブから削除されます。

  11. 必要に応じて、コードの一部にリソースへの参照が残っているエラーを修正します。
  12. Android Studio は、コード内のエラー箇所を強調表示します。コードからすべての参照を削除すると、プロジェクトを正常にビルドすることが可能になります。