Ringkasan yang dapat digambar vektor

Mencoba cara Compose
Jetpack Compose adalah toolkit UI yang direkomendasikan untuk Android. Pelajari cara menampilkan grafik di Compose.
ImageVector →

Poin utama

  • Vektor drawable adalah grafik vektor yang didefinisikan dalam file XML sebagai serangkaian titik, garis, dan kurva beserta informasi warnanya.
  • Vektor drawable bersifat skalabel, artinya mereka dapat diubah ukurannya tanpa kehilangan kualitas tampilan. Hal ini membuatnya ideal untuk digunakan dalam aplikasi Android, karena dapat membantu mengurangi ukuran file APK dan meningkatkan performa.
  • Anda dapat membuat vektor drawable di Android Studio dengan mengklik kanan folder drawable dalam proyek Anda dan memilih New > Aset Vektor. Anda juga dapat mengimpor file SVG ke Android Studio sebagai vektor drawable.
Ringkasan yang dibuat oleh Google Bard pada 24 Juli 2023

Pengantar

VectorDrawable adalah grafik vektor yang ditentukan dalam file XML sebagai sekumpulan titik, garis, dan kurva beserta elemen informasi warna. Keuntungan utama penggunaan vektor drawable adalah skalabilitas. Iklan ini dapat diskalakan tanpa mengurangi kualitas tampilan, yang berarti file yang sama diubah ukurannya untuk kepadatan layar yang berbeda tanpa kehilangan kualitas gambar. Hasilnya adalah file APK yang lebih kecil dan tugas perawatan yang lebih sedikit bagi developer. Anda juga dapat menggunakan gambar vektor untuk animasi dengan menggunakan beberapa file XML daripada beberapa gambar untuk setiap resolusi tampilan.

Halaman ini dan video di bawah meringkas cara membuat vector drawable di XML. Android Studio juga bisa mengonversi file SVG ke format vektor drawable, seperti yang dijelaskan dalam menggunakan Menambahkan grafik vektor multi-kepadatan.

Android 5.0 (API level 21) adalah versi pertama yang secara resmi mendukung vektor drawable dengan VectorDrawable dan AnimatedVectorDrawable, tetapi Anda dapat mendukung versi lama dengan pustaka dukungan Android, yang menyediakan VectorDrawableCompat dan Class AnimatedVectorDrawableCompat.

Tentang class VectorDrawable

VectorDrawable menentukan drawable statis . Mirip dengan format SVG, setiap grafik vektor didefinisikan sebagai sebuah pohon hierarki, yang terdiri dari objek path dan group. Setiap path berisi geometri garis batas objek dan group berisi detail untuk transformasi. Semua jalur digambar dalam urutan yang sama seperti yang muncul dalam file XML.

Gambar 1. Hierarki sampel aset vector drawable

Aset Vektor Studio menawarkan cara sederhana untuk menambahkan grafik vektor ke project sebagai file XML.

Contoh XML

Berikut contoh file XML VectorDrawable yang merender gambar daya baterai dalam mode pengisian daya. 

<!-- res/drawable/battery_charging.xml -->
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="24dp"
    android:width="24dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">
   <group
         android:name="rotationGroup"
         android:pivotX="10.0"
         android:pivotY="10.0"
         android:rotation="15.0" >
      <path
        android:name="vect"
        android:fillColor="#FF000000"
        android:pathData="M15.67,4H14V2h-4v2H8.33C7.6,4 7,4.6 7,5.33V9h4.93L13,7v2h4V5.33C17,4.6 16.4,4 15.67,4z"
        android:fillAlpha=".3"/>
      <path
        android:name="draw"
        android:fillColor="#FF000000"
        android:pathData="M13,12.5h2L11,20v-5.5H9L11.93,9H7v11.67C7,21.4 7.6,22 8.33,22h7.33c0.74,0 1.34,-0.6 1.34,-1.33V9h-4v3.5z"/>
   </group>
</vector>

XML ini merender gambar berikut:

Tentang class AnimationVectorDrawable

AnimatedVectorDrawable menambahkan animasi ke properti vektor grafis. Anda dapat menentukan animasi grafik vektor sebagai tiga file resource atau sebagai file XML tunggal yang mendefinisikan seluruh drawable. Mari kita lihat kedua pendekatan tersebut untuk pemahaman yang lebih baik: Beberapa file XML dan Satu file XML File XML.

Beberapa file XML

Dengan menggunakan pendekatan ini, Anda dapat mendefinisikan tiga file XML terpisah:

Contoh beberapa file XML

File XML berikut menunjukkan animasi grafik vektor.

  • File XML VectorDrawable: vd.xml 
  • <vector xmlns:android="http://schemas.android.com/apk/res/android"
   android:height="64dp"
   android:width="64dp"
   android:viewportHeight="600"
   android:viewportWidth="600" >
   <group
      android:name="rotationGroup"
      android:pivotX="300.0"
      android:pivotY="300.0"
      android:rotation="45.0" >
      <path
         android:name="vectorPath"
         android:fillColor="#000000"
         android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />
   </group>
</vector>
  • File XML AnimationVectorDrawable: avd.xml 
  • <animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
   android:drawable="@drawable/vd" >
     <target
         android:name="rotationGroup"
         android:animation="@anim/rotation" />
     <target
         android:name="vectorPath"
         android:animation="@anim/path_morph" />
</animated-vector>
  • File XML animator yang digunakan dalam XML AnimationVectorDrawable file: rotation.xml dan path_morph.xml 
  • <objectAnimator
   android:duration="6000"
   android:propertyName="rotation"
   android:valueFrom="0"
   android:valueTo="360" />

    <set xmlns:android="http://schemas.android.com/apk/res/android">
   <objectAnimator
      android:duration="3000"
      android:propertyName="pathData"
      android:valueFrom="M300,70 l 0,-70 70,70 0,0   -70,70z"
      android:valueTo="M300,70 l 0,-70 70,0  0,140 -70,0 z"
      android:valueType="pathType"/>
</set>

Satu file XML

Dengan menggunakan pendekatan ini, Anda bisa menggabungkan file XML terkait menjadi satu file XML melalui Format Paket XML. Pada saat membuat aplikasi, Tag aapt membuat resource terpisah dan mereferensikannya dalam animasi vektor. Pendekatan ini memerlukan Build Tools 24 atau yang lebih tinggi, dan memiliki kompatibilitas mundur.

Contoh file XML tunggal 

<animated-vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt">
    <aapt:attr name="android:drawable">
        <vector
            android:width="24dp"
            android:height="24dp"
            android:viewportWidth="24"
            android:viewportHeight="24">
            <path
                android:name="root"
                android:strokeWidth="2"
                android:strokeLineCap="square"
                android:strokeColor="?android:colorControlNormal"
                android:pathData="M4.8,13.4 L9,17.6 M10.4,16.2 L19.6,7" />
        </vector>
    </aapt:attr>
    <target android:name="root">
        <aapt:attr name="android:animation">
            <objectAnimator
                android:propertyName="pathData"
                android:valueFrom="M4.8,13.4 L9,17.6 M10.4,16.2 L19.6,7"
                android:valueTo="M6.4,6.4 L17.6,17.6 M6.4,17.6 L17.6,6.4"
                android:duration="300"
                android:interpolator="@android:interpolator/fast_out_slow_in"
                android:valueType="pathType" />
        </aapt:attr>
    </target>
</animated-vector>

Solusi kompatibilitas mundur vektor drawable

Untuk mendukung vektor drawable dan animasi vektor drawable pada perangkat yang menjalankan versi platform yang lebih rendah dari Android 5.0 (level API 21), atau gunakan fillColor, fillType, dan Fungsi strokeColor di bawah Android 7.0 (level API 24), VectorDrawableCompat dan AnimatedVectorDrawableCompat tersedia melalui dua support library: support-vector-drawable dan animated-vector-drawable, secara berurutan.

Android Studio 1.4 memperkenalkan dukungan kompatibilitas terbatas untuk vektor drawable dengan menghasilkan file PNG pada waktu build. Namun, vektor drawable dan animasi vektor drawable mendukung Library menawarkan fleksibilitas dan kompatibilitas yang luas — ini adalah pustaka dukungan, sehingga Anda dapat menggunakannya dengan semua Versi platform Android hingga Android 2.1 (API level 7+). Untuk mengonfigurasi aplikasi untuk menggunakan library dukungan vektor, tambahkan vectorDrawables ke file build.gradle di modul aplikasi.

Gunakan cuplikan kode berikut untuk mengonfigurasi vectorDrawables :

Groovy

// For Gradle Plugin 2.0+
android {
    defaultConfig {
        vectorDrawables.useSupportLibrary = true
    }
}

Kotlin

// For Gradle Plugin 2.0+
android {
    defaultConfig {
        vectorDrawables.useSupportLibrary = true
    }
}

Groovy

// For Gradle Plugin 1.5 or below
android {
    defaultConfig {
        // Stops the Gradle plugin’s automatic rasterization of vectors
        generatedDensities = []
    }
    // Flag notifies aapt to keep the attribute IDs around
    aaptOptions {
        additionalParameters "--no-version-vectors"
    }
}

Kotlin

// For Gradle Plugin 1.5 or below
android {
    defaultConfig {
        // Stops the Gradle plugin’s automatic rasterization of vectors
        generatedDensities()
    }
    // Flag notifies aapt to keep the attribute IDs around
    aaptOptions {
        additionalParameters("--no-version-vectors")
    }
}

Anda dapat menggunakan VectorDrawableCompat dan AnimatedVectorDrawableCompat di semua pada perangkat yang menjalankan Android 4.0 (level API 14) dan yang lebih tinggi. Cara Android memuat drawable, tidak semua tempat yang menerima ID drawable, seperti dalam XML , mendukung pemuatan vektor drawable. Tujuan Paket android.support.v7.appcompat telah menambahkan nomor fitur untuk memudahkan penggunaan vektor drawable. Pertama, saat Anda menggunakan Paket android.support.v7.appcompat dengan ImageView atau dengan subclass seperti ImageButton dan FloatingActionButton, Anda dapat menggunakan atribut app:srcCompat baru untuk mereferensikan vektor drawable serta drawable lainnya yang tersedia untuk android:src: 

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

Untuk mengubah drawable saat runtime, Anda dapat menggunakan atribut setImageResource() seperti sebelumnya. Menggunakan AppCompat dan app:srcCompat adalah metode integrasi yang paling mudah vektor drawable ke dalam aplikasi Anda.

Support Library 25.4.0 dan yang lebih tinggi mendukung fitur berikut:

  • Morphing Jalur (evaluator PathType) Digunakan untuk morph satu jalur ke jalur lain.
  • Interpolasi Jalur Digunakan untuk menentukan jenis interpolator (diwakili sebagai jalur), bukan interpolator yang ditentukan interpolator seperti LinearInterpolator.

Support Library 26.0.0-beta1 dan yang lebih tinggi mendukung fitur berikut:

  • Bergerak di sepanjang jalur Objek geometri dapat bergerak, sepanjang jalur arbitrer, sebagai bagian dari animasi.

Contoh beberapa file XML menggunakan support library

File XML berikut menunjukkan pendekatan penggunaan beberapa file XML menganimasikan grafik vektor.

  • File XML VectorDrawable: vd.xml 
  • <vector xmlns:android="http://schemas.android.com/apk/res/android"
   android:height="64dp"
   android:width="64dp"
   android:viewportHeight="600"
   android:viewportWidth="600" >
   <group
      android:name="rotationGroup"
      android:pivotX="300.0"
      android:pivotY="300.0"
      android:rotation="45.0" >
      <path
         android:name="vectorPath"
         android:fillColor="#000000"
         android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />
   </group>
</vector>
  • File XML AnimationVectorDrawable: avd.xml 
  • <animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
   android:drawable="@drawable/vd" >
     <target
         android:name="rotationGroup"
         android:animation="@anim/rotation" />
</animated-vector>
  • File XML animator yang digunakan dalam XML AnimationVectorDrawable file: rotation.xml 
  • <objectAnimator
   android:duration="6000"
   android:propertyName="rotation"
   android:valueFrom="0"
   android:valueTo="360" />

Satu file XML

File XML berikut menunjukkan pendekatan untuk menggunakan satu file XML menganimasikan grafik vektor. Pada saat membuat aplikasi, Tag aapt membuat resource terpisah dan mereferensikannya dalam animasi vektor. Pendekatan ini memerlukan Build Tools 24 atau yang lebih tinggi, dan memiliki kompatibilitas mundur.

Contoh file XML tunggal yang menggunakan support library 

<animated-vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt">
    <aapt:attr name="android:drawable">
        <vector xmlns:android="http://schemas.android.com/apk/res/android"
            android:width="64dp"
            android:height="64dp"
            android:viewportWidth="600"
            android:viewportHeight="600">
            <group
                android:name="rotationGroup"
                android:pivotX="300"
                android:pivotY="300"
                android:rotation="45.0" >
                <path
                    android:name="vectorPath"
                    android:fillColor="#000000"
                    android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />
            </group>
        </vector>
    </aapt:attr>
    <target android:name="rotationGroup">
        <aapt:attr name="android:animation">
            <objectAnimator
                android:propertyName="rotation"
                android:valueFrom="0"
                android:valueTo="360"
                android:duration="6000"
                android:interpolator="@android:interpolator/fast_out_slow_in" />
        </aapt:attr>
    </target>
</animated-vector>