Skip to content

Most visited

Recently visited

navigation

Image Asset Studio を使用したアプリアイコン作成

Video

密度非依存ピクセル

Android Studio には Image Asset Studio と呼ばれるツールがあり、これを利用するとマテリアル アイコン、カスタム画像、およびテキスト文字列から独自のアプリアイコンを生成できます。また、アプリがサポートする汎用画面密度ごとに、適切な解像度で一連のアイコンを生成することが可能です。Image Asset Studio では、プロジェクトの res/ ディレクトリの下にある各密度専用のフォルダに、新たに生成されたアイコンを格納します。Android では、アプリが実行される端末の画面密度に基づいて、実行時に適切なリソースを使用します。

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

Image Asset Studio の概要

Image Asset Studio を使用すると、さまざまな種類のアイコンを複数の密度で作成することができます。さらにアイコンがプロジェクトのどこに格納されるかも確認できます。アイコンの調整や背景の追加が可能なツールも備わっており、変更結果をプレビュー パネルで確認しながら、意図したとおりのアイコンを作成することが可能です。これらのツールを活用することで、アイコンの設計とインポート プロセスが大幅に効率化されます。次のセクションでは、作成可能なアイコンのタイプと、使用可能な画像とテキスト入力について説明します。

ランチャー アイコン

ランチャー アイコンは、アプリの内容をユーザーに伝えるためのグラフィックです。具体的な機能は以下のとおりです。

Image Asset Studio では、mdpi、hdpi、xhdpi、xxhdpi、xxxhdpi などの推奨される汎用画面密度向けに、別々のアイコンを自動的に作成します。これにより、さまざまな画面と端末で鮮明なアイコンが表示されるようになります。アイコンは、res/mipmap-density/ ディレクトリの適切な場所にを格納されます。Google Play ストアに適した 512x512 ピクセルの画像も作成されます。

旧バージョンの Android をサポートしている場合でも、アクションバーとタブアイコン向けのマテリアル デザイン スタイルを採用することをお勧めします。

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

アクションバーおよびタブ用のアイコン

アクションバー アイコンは、アクションバーに配置されるグラフィック要素で、個々のアクション アイテムを表します。詳細については、Adding and Handling Actionsアプリバー - マテリアル デザインAction Bar Designをご覧ください。

タブアイコンは、複数タブのインターフェースで個々のタブを表すために使用されるグラフィック要素です。各タブアイコンの状態は、未選択または選択済みのどちらかになります。詳細については、Creating Swipe Views with Tabsタブ - マテリアル デザインをご覧ください。

Image Asset Studio では、mdpi、hdpi、xhdpi、xxhdpi などの推奨される汎用画面密度向けに、別々のアイコンを自動的に作成します。アイコンは、res/drawable-density/ ディレクトリの適切な場所にを格納されます。

旧バージョンの Android をサポートしている場合でも、アクションバーとタブアイコン向けのマテリアル デザイン スタイルを採用することをお勧めします。旧バージョンのプラットフォーム上でマテリアル デザイン UI 表示する場合は、appcompat と他のサポート ライブラリを使用します。

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

通知アイコン

通知は、アプリの通常の UI 以外で、ユーザーに表示できるメッセージです。システムによって発行された通知は、まず通知領域にアイコンで表示されます。通知の詳細を確認するには、ユーザーが通知ドロワーを開く必要があります。通知エリアと通知ドロワーはどちらも、システムによって制御されている領域であり、ユーザーはいつでも見ることができます。

Image Asset Studio では、mdpi、hdpi、xhdpi、xxhdpi などの推奨される汎用画面密度向けに、別々のアイコンを自動的に作成します。アイコンは、res/drawable-density/ ディレクトリの適切な場所にを格納されます。

Android 2.3 から 2.3.7(API level 9 から 10)をサポートするアプリの場合、Image Asset Studio では灰色のバージョンのアイコンを生成します。これ以降の Android バージョンでは、Image Asset Studio で生成される白色アイコンを使用します。

詳細については、通知通知マテリアル デザイン通知、Android 5.0 の変更点Android 4.4 以前での通知Status Bar Icons, Android 3.0 and Lower をご覧ください。

クリップアート

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

画像

独自の画像をインポートして、アイコンタイプ向けに調整することができます。Image Asset Studio でサポートするファイルタイプは、PNG(推奨)、JPG(許容)、GIF(非推奨)です。

テキスト文字列

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

Image Asset Studio を実行する

次の手順で Image Asset Studio を起動します。

  1. Android Studio で Android アプリのプロジェクトを開きます。
  2. [Project] ウィンドウで [Android] ビューを選択します。
  3. res フォルダを選択して、[File] > [New] > [Image Asset] の順に選択します。
  4. または、res フォルダを右クリックして、[New] > [Image Asset] の順に選択します。

    他のプロジェクト ビューとフォルダにも、このメニュー項目があります。

    Image Asset Studio が表示されます。

  5. ランチャー アイコンを作成するアクションバーまたはタブアイコンを作成する通知アイコンを作成するに進みます。

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

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

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

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

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

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

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

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

    [Output Directories] 領域に、 [Project] ウィンドウの [Project Files view] に表示される画像とフィルタが表示されます。

  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] を選択します。デフォルトは [No] です。
    • [Padding] - 四辺すべてにおいてソースアセットのパディングを調整したい場合は、スライダを動かします。-10% から 50% の範囲で値を選択します。[Trim] も選択している場合は、先にトリミングが行われます。デフォルトは 0% です。
    • [Theme] - [HOLO_LIGHT] または [HOLO_DARK] を選択します。あるいは、[Select Color] ダイアログで色を指定し、[CUSTOM] を選択して [Custom color] フィールドをクリックします。デフォルトは [None] です。

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

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

    [Output Directories] 領域に、 [Project] ウィンドウの [Project Files view] に表示される画像とフィルタが表示されます。

  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] を選択します。デフォルトは [No] です。
    • [Padding] - 四辺すべてにおいてソースアセットのパディングを調整したい場合は、スライダを動かします。-10% から 50% の範囲で値を選択します。[Trim] も選択している場合は、先にトリミングが行われます。デフォルトは 0% です。

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

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

    [Output Directories] 領域に、 [Project] ウィンドウの [Project Files view] に表示される画像とフィルタが表示されます。

  6. [Finish] をクリックします。
  7. Image Asset Studio では、さまざまな画面密度およびバージョンの画像を drawable フォルダに追加します。

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

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

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

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

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 ではコード内のエラー部分がハイライト表示されます。コードからすべての参照を削除すると、プロジェクトを正常にビルドできる状態になります。

This site uses cookies to store your preferences for site-specific language and display options.

Get the latest Android developer news and tips that will help you find success on Google Play.

* Required Fields

Hooray!

Follow Google Developers on WeChat

Browse this site in ?

You requested a page in , but your language preference for this site is .

Would you like to change your language preference and browse this site in ? If you want to change your language preference later, use the language menu at the bottom of each page.

This class requires API level or higher

This doc is hidden because your selected API level for the documentation is . You can change the documentation API level with the selector above the left navigation.

For more information about specifying the API level your app requires, read Supporting Different Platform Versions.

Take a short survey?
Help us improve the Android developer experience.
(Sep 2017 survey)