さまざまな密度に適用可能なベクター グラフィックを追加する（ビュー）

コンセプトと Jetpack Compose の実装

Android Studio には、Vector Asset Studio というツールが含まれています。このツールは、マテリアル アイコンを追加する場合や、Scalable Vector Graphic（SVG）ファイルや Adobe Photoshop Document（PSD）ファイルをベクター型ドローアブル リソースとしてプロジェクトにインポートする場合に役立ちます。ビットマップの代わりにベクター型ドローアブル形式を使用すると、画質を低下させずに、さまざまな画面密度に合わせて同じファイルのサイズを変更できるため、APK のサイズが小さくなります。Vector Asset Studio は、ベクター型ドローアブルをサポートしていない古いバージョンの Android では、ベクター型ドローアブルを、ビルド時に画面密度に合わせて異なるサイズのビットマップに変換できます。

Vector Asset Studio の概要

Vector Asset Studio は、ベクター グラフィックを、画像を記述した XML ファイルとしてプロジェクトに追加します。解像度の異なる複数のラスター グラフィックを更新するより、1 つの XML ファイルを管理するほうが簡単です。

Android 4.4（API レベル 20）以下では、ベクター型ドローアブルはサポートされていません。最小 API レベルがそのような API レベルに設定されている場合、Vector Asset Studio を使用する方法は 2 つあります。それは、Portable Network Graphic（PNG）ファイルを生成する方法（デフォルト）と、AndroidX の下位互換性テクニックを使用する方法です。

下位互換性を確保するために、Vector Asset Studio はベクター型ドローアブルのラスター画像を生成します。ベクター型ドローアブルとラスター型ドローアブルは、ともに APK 内にパッケージ化されます。ベクター型ドローアブルは、Java コードでは Drawable、XML コードでは @drawableとして参照できます。アプリを実行すると、API レベルに応じて、対応するベクター画像 またはラスター画像が自動的に表示されます。

AndroidX の下位互換性

このテクニックでは、AndroidX 1.0 以上と Android Plugin for Gradle 3.2 以上が必要です。また、ベクター型ドローアブルのみを使用します。AndroidX の VectorDrawableCompat クラスを使用すると、Android 2.1（API レベル 7）以上で VectorDrawable をサポートできます。

Vector Asset Studio を使用する前に、build.gradle ファイルに次のステートメントを追加する必要があります。

Groovy

android {
    defaultConfig {
        vectorDrawables.useSupportLibrary = true
    }
}

dependencies {
    implementation 'androidx.appcompat:appcompat:1.7.1'
}

Kotlin

android {
    defaultConfig {
        vectorDrawables.useSupportLibrary = true
    }
}

dependencies {
    implementation("androidx.appcompat:appcompat:1.7.1")
}

また、下位互換性を確保するために、AndroidX コーディング テクニックを使用する必要もあります。たとえば、ベクター型ドローアブルに対して android:src 属性の代わりに app:srcCompat 属性を使用します。詳細については、AndroidX をご覧ください。

ベクター型ドローアブルをレイアウトに追加する

レイアウト ファイルでは、 `ImageButton`、ImageButton`ImageView`ImageView などのアイコン関連のウィジェットがベクター型ドローアブルを指すように設定することが可能です。 たとえば、次のレイアウトは、ボタン上に表示されるベクター型ドローアブルを示しています。

図 1 。レイアウト内のボタンに表示されたベクター型ドローアブル

図のようにベクター型ドローアブルをウィジェット上に表示する方法は次のとおりです。

  1. プロジェクトを開いて、ベクター型ドローアブルをインポートします。

    この例では、New Project ウィザードを使用して生成した Phone/Tablet プロジェクトを使用します。

  2. [Android] ビューで、[Project] ウィンドウのレイアウト XML ファイル（content_main.xml など）をダブルクリックします。

  3. [Design] タブをクリックして、[Layout Editor] を表示します。

  4. ImageButton ウィジェットを [Palette] ウィンドウから Layout Editor にドラッグします。

  5. [Resources ] ダイアログで左側のペインの [Drawable] を選択してから、インポートしたベクター型ドローアブルを選択します。[OK] をクリックします。

    ベクター型ドローアブルがレイアウトの ImageButton の上に表示されます。

  6. 画像の色をテーマで定義されているアクセント カラーに変更するには、[Properties ] ウィンドウで [tint] プロパティを見つけて、[…] をクリックします。

  7. [Resources ] ダイアログで左側のペインの [Color] を選択してから、[colorAccent] を選択します。[OK] をクリックします。

    レイアウト内で画像の色がアクセント カラーに変わります。

プロジェクトで AndroidX を使用している場合、ImageButton のコードは次のようになります。

<ImageButton
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  app:srcCompat="@drawable/ic_build_black_24dp"
  tools:layout_editor_absoluteX="11dp"
  tools:layout_editor_absoluteY="225dp"
  android:id="@+id/imageButton"
  android:tint="@color/colorAccent" />

プロジェクトで AndroidX を使用していない場合、ベクター型ドローアブルのコードは 代わりに android:src="@drawable/ic_build_black_24dp" のようになります。

コード内でベクター型ドローアブルを参照する

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

  • ほとんどの場合、ベクター型ドローアブルは XML コードでは @drawable、Java コードでは Drawable として参照できます。

    たとえば、次のレイアウト XML コードは、ビューに画像を適用します。

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

    次のコードは、画像を 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 オブジェクト（アクティビティ、フラグメント、レイアウト、ビューなど）に適用されます。

  • アプリで AndroidX を使用していれば、build.gradle ファイルに vectorDrawables.useSupportLibrary = true ステートメントがなくても、app:srcCompat ステートメントでベクター型ドローアブルを参照できます。例:

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

  • ドローアブル リソースは、正確な クラスに型キャストしなければならないことがあります（たとえば、 VectorDrawable クラスの特定の機能を使用する必要がある場合など）。その場合は、次のようなコードを使用できます。

    Kotlin

    if (Build.VERSION.SDK_INT &gt;= Build.VERSION_CODES.LOLLIPOP) {
  val vectorDrawable = drawable as VectorDrawable
} else {
  val bitmapDrawable = drawable as BitmapDrawable
}

    Java

    if (Build.VERSION.SDK_INT &gt;= Build.VERSION_CODES.LOLLIPOP) {
  VectorDrawable vectorDrawable = (VectorDrawable) drawable;
} else {
  BitmapDrawable bitmapDrawable = (BitmapDrawable) drawable;
}

ベクター型ドローアブル リソースには、メインスレッドからのみアクセスできます。

Android 5.0（API レベル 21）以上では、 AnimatedVectorDrawable クラスを使用して、 VectorDrawable クラスのプロパティをアニメーション化できます。AndroidX を使用する場合は、 AnimatedVectorDrawableCompat クラスにより、Android 3.0（API レベル 11）以上用の VectorDrawable クラスをアニメーション化できます。詳細については、 ドローアブル グラフィックをアニメーションにするをご覧ください。