アプリアイコンを作成する（ビュー）

Jetpack Compose の実装

このページでは、View ベースのレイアウトに固有のアプリアイコンの作成と使用に関する情報を提供します。アプリアイコンの作成に関するより包括的な情報については、推奨される UI フレームワークを網羅したアプリアイコンを作成するをご覧ください。

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

Image Asset Studio を使用して、View ベースのレイアウトのアクションバー アイコンとタブアイコンを作成します。

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

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

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

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

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

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. [次へ] をクリックします。

  5. （任意）リソース ディレクトリを変更します。

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

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

  6. [Finish] をクリックします。

    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);

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