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.
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.
![](https://developer.android.com/static/images/guide/topics/graphics/vectorpath.png?authuser=0000&hl=id)
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:
![](https://developer.android.com/static/images/guide/topics/graphics/ic_battery_charging_80_black_24dp.png?authuser=0000&hl=id)
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:
- File XML
VectorDrawable
. -
File XML
AnimatedVectorDrawable
yang menentukanVectorDrawable
target, jalur target dan grup yang akan dianimasikan, properti, dan animasi yang ditentukan sebagai objekObjectAnimator
atau ObjekAnimatorSet
. - File XML animator.
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
danpath_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>