Menambahkan grafik vektor multi-kepadatan (Tampilan)

Konsep dan penerapan Jetpack Compose

Android Studio menyertakan alat bernama Vector Asset Studio yang membantu Anda menambahkan ikon Material dan mengimpor file Scalable Vector Graphic (SVG) dan Adobe Photoshop Document (PSD) ke dalam project sebagai resource vektor drawable. Penggunaan vektor drawable sebagai ganti bitmap akan mengurangi ukuran APK karena file yang sama dapat diubah ukurannya untuk kepadatan layar yang berbeda tanpa mengurangi kualitas gambar. Untuk Android versi lama yang tidak mendukung vektor drawable, Vector Asset Studio dapat, selama proses build, mengubah resource vektor drawable menjadi beragam ukuran bitmap untuk setiap kepadatan layar.

Tentang Vector Asset Studio

Vector Asset Studio menambahkan grafik vektor ke project sebagai file XML yang menjelaskan gambar tersebut. Memelihara satu file XML lebih mudah daripada mengupdate beberapa grafis raster pada beragam resolusi.

Android 4.4 (API level 20) dan yang lebih lama tidak mendukung vektor drawable. Jika API level minimum Anda disetel pada salah satu API level ini, Anda memiliki dua opsi saat menggunakan Vector Asset Studio: menghasilkan file Portable Network Graphic (PNG) (default) atau menggunakan teknik kompatibilitas mundur di AndroidX.

Untuk kompatibilitas mundur, Vector Asset Studio menghasilkan gambar raster dari vektor drawable. Vektor dan raster drawable dipaketkan bersama dalam APK. Anda dapat merujuk ke vektor drawable sebagai Drawable dalam kode Java atau @drawable dalam kode XML; jika aplikasi Anda berjalan, gambar vektor atau raster terkait akan otomatis ditampilkan, bergantung pada API level-nya.

Kompatibilitas mundur di AndroidX

Teknik ini memerlukan AndroidX 1.0 atau yang lebih baru dan plugin Android untuk Gradle 3.2 atau yang lebih baru, serta hanya menggunakan vektor drawable. Class VectorDrawableCompat di AndroidX memungkinkan Anda mendukung VectorDrawable di Android 2.1 (API level 7) dan yang lebih baru.

Sebelum menggunakan Vector Asset Studio, Anda harus menambahkan pernyataan ke file 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")
}

Anda juga harus menggunakan teknik coding AndroidX untuk kompatibilitas mundur, misalnya menggunakan atribut app:srcCompat sebagai ganti atribut android:src untuk vektor drawable. Untuk mengetahui informasi selengkapnya, lihat AndroidX.

Menambahkan vektor drawable ke tata letak

Dalam file tata letak, Anda dapat menyetel widget terkait ikon apa pun, seperti ImageButton, ImageView, dan seterusnya, untuk mengarah ke vektor drawable. Misalnya, tata letak berikut menampilkan vektor drawable yang ditampilkan pada tombol:

Gambar 1. Vektor drawable yang ditampilkan pada tombol dalam tata letak.

Untuk menampilkan vektor drawable pada widget, seperti yang ditampilkan dalam gambar:

  1. Buka project dan impor vektor drawable.

    Contoh ini menggunakan project Ponsel/Tablet yang dihasilkan dengan New Project Wizard.

  2. Pada Android view di jendela Project, klik dua kali file XML tata letak, seperti content_main.xml.

  3. Klik tab Design untuk menampilkan Layout Editor.

  4. Tarik widget ImageButton dari jendela Palette ke Layout Editor.

  5. Pada dialog Resources, pilih Drawable di panel kiri, lalu pilih vektor drawable yang telah diimpor. Klik OK.

    Vektor drawable akan muncul di ImageButton pada tata letak.

  6. Untuk mengubah warna gambar menjadi warna aksen yang didefinisikan dalam tema, pada jendela Properties , temukan properti tint , lalu klik … .

  7. Pada dialog Resources, pilih Color di panel kiri, lalu pilih colorAccent. Klik OK.

    Warna gambar akan berubah menjadi warna aksen di tata letak.

Jika project menggunakan AndroidX, kode ImageButton harus sama dengan kode berikut:

<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" />

Jika project tidak menggunakan AndroidX, kode vektor drawable akan menjadi android:src="@drawable/ic_build_black_24dp".

Merujuk ke vektor drawable dalam kode

Biasanya, Anda dapat merujuk ke resource vektor drawable dengan cara biasa dalam kode Anda, dan saat aplikasi dijalankan, gambar vektor atau raster yang terkait akan otomatis ditampilkan, bergantung pada API level-nya:

  • Dalam sebagian besar kasus, Anda dapat merujuk ke vektor drawable sebagai @drawable dalam kode XML atau Drawable dalam kode Java.

    Misalnya, kode XML tata letak berikut akan menerapkan gambar ke tampilan:

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

    Kode berikut mengambil gambar sebagai Drawable:

    Kotlin

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

    Java

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

    Metode getResources() berada di class Context, yang berlaku untuk objek UI, seperti activity, fragment, layout, view, dan seterusnya.

  • Jika aplikasi Anda menggunakan AndroidX (meskipun Anda tidak memiliki pernyataan vectorDrawables.useSupportLibrary = true dalam file build.gradle), Anda juga dapat merujuk ke vektor drawable dengan pernyataan app:srcCompat. Contoh:

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

  • Terkadang, Anda mungkin perlu menetapkan resource drawable ke class-nya yang tepat, seperti saat Anda perlu menggunakan fitur spesifik dari class VectorDrawable. Caranya, Anda dapat menggunakan kode seperti berikut:

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

Anda hanya dapat mengakses resource vektor drawable dari thread utama.

Untuk Android 5.0 (API level 21) dan yang lebih baru, Anda dapat menggunakan class AnimatedVectorDrawable untuk menganimasikan properti class VectorDrawable. Dengan AndroidX, Anda dapat menggunakan class AnimatedVectorDrawableCompat untuk menganimasikan class VectorDrawable untuk Android 3.0 (API level 11) dan yang lebih baru. Untuk mengetahui informasi selengkapnya, lihat Menganimasikan grafik drawable.