Vector Drawable: apa itu, format XML dan cara kerjanya

Apa itu Vector Drawable?

Vector Drawable adalah sumber daya Android yang merepresentasikan gambar vektor dalam format XML, berdasarkan spesifikasi SVG (Scalable Vector Graphics). Google memperkenalkan format ini di Android 5.0 (API 21) sebagai alternatif gambar raster untuk ikon, ilustrasi, dan elemen grafis antarmuka lainnya.

Tidak seperti PNG, di mana gambar disimpan sebagai kumpulan piksel berukuran tetap, Vector Drawable mendeskripsikan bentuk secara matematis — melalui koordinat titik, kurva Bezier, isian, dan kontur. Ini berarti satu gambar vektor dapat menggantikan hingga enam file PNG untuk kerapatan layar yang berbeda (mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi, nodpi), yang secara radikal menyederhanakan pemeliharaan sumber daya grafis.

Format ini tidak hanya mendukung gambar statis, tetapi juga animasi melalui AnimatedVectorDrawable, serta adaptasi tema gelap dan warna kustom melalui atribut tema. Mulai Android 7.0 (API 24), Vector Drawable juga mendukung isian gradien dan operasi pemotongan kompleks (clipPath), yang memperluas kemungkinan desain.

Komponen Utama Vector Drawable

Setiap Vector Drawable berisi elemen root vector dengan parameter lebar, tinggi, dan viewport — sistem koordinat virtual tempat bentuk digambar. Di dalamnya terdapat grup (group) dan jalur (path), di mana path mendefinisikan geometri melalui urutan perintah: M (moveTo), L (lineTo), C (cubicTo), Z (close), dan lainnya. Setiap path dapat memiliki isian (fillColor) dan kontur (strokeColor) sendiri, yang dapat merujuk ke sumber daya tema.

Elemen tambahan termasuk clip-path untuk pemotongan, gradient untuk transisi gradien, dan atribut adaptasi tema gelap melalui atribut android:theme. Semua warna di Vector Drawable dapat ditentukan sebagai referensi ke atribut tema (misalnya, ?attr/colorPrimary), yang mengubah tampilan ikon saat mengganti tema tanpa menduplikasi sumber daya.

Format Vector Drawable: struktur XML

File XML Vector Drawable ditempatkan di direktori res/drawable/ dan memiliki elemen root <vector>. Di dalamnya bisa ada <group> bersarang untuk organisasi hierarki dan <path> untuk mendeskripsikan kontur. Setiap path berisi atribut pathData — string perintah menggambar dalam format jalur SVG.

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24">

    <path
        android:fillColor="@color/ic_launcher_background"
        android:pathData="M12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2z"
        android:strokeWidth="1"
        android:strokeColor="#333333"/>

</vector>

Dalam contoh, digambarkan lingkaran dengan radius 10 unit dalam viewport 24×24. Parameter fillColor merujuk ke sumber daya warna, sedangkan strokeWidth dan strokeColor menentukan kontur. Ukuran width dan height ditentukan dalam dp — ini memastikan penskalaan yang benar pada layar dengan kerapatan piksel berbeda tanpa transformasi tambahan.

Pengelompokan dan Transformasi

Elemen group memungkinkan pengelompokan beberapa path dan penerapan transformasi bersama: rotasi (rotation), pergeseran (translateX, translateY), dan penskalaan (scaleX, scaleY). Grup dapat bersarang, memungkinkan pembuatan hierarki kompleks dari ratusan elemen tanpa kehilangan kinerja.

<vector ...>
    <group android:name="arrow_group"
        android:pivotX="12"
        android:pivotY="12"
        android:rotation="90">
        <path .../>
    </group>
</vector>

Pengelompokan dengan atribut pivotX/pivotY digunakan untuk animasi: bagian gambar dapat diputar atau diskalakan secara independen dari elemen lain, yang sangat berguna untuk membuat ikon status animasi (misalnya, memuat → berhasil).

Vector Drawable vs grafik raster

Pilihan antara grafik vektor dan raster tergantung pada skenario penggunaan. Vector Drawable ideal untuk ikon, ilustrasi, dan elemen antarmuka dengan sedikit detail, sementara foto dan gambar kompleks dengan ribuan warna tetap dalam format raster.

Menurut Android Performance Patterns (Google I/O 2016), mengganti ikon PNG dengan Vector Drawable mengurangi ukuran APK sebesar 40–60% untuk aplikasi dengan banyak sumber daya grafis. Namun, saat merender vektor kompleks dengan ratusan path, beban CPU meningkat, sehingga untuk animasi dan penggambaran ulang yang sering, disarankan menggunakan raster yang di-cache.

Kapan memilih Vector Drawable

Vector Drawable optimal untuk ikon antarmuka (toolbar, navigasi, status), logo, ilustrasi sederhana, dan elemen animasi. Format ini sangat menguntungkan saat mendukung banyak layar: alih-alih menghasilkan PNG untuk enam kerapatan, satu file XML sudah cukup. Ini menyederhanakan pemeliharaan desain dan menghilangkan kesalahan ketidakcocokan ukuran. Untuk foto dan gambar dengan gradien fotorealistik, format raster dengan kompresi WebP masih digunakan.

Animasi Vector Drawable

Android mendukung animasi Vector Drawable melalui dua mekanisme: AnimatedVectorDrawable (tersedia sejak API 21) dan AnimatedStateListDrawable. Yang pertama memungkinkan animasi atribut path — rotasi, pergeseran, perubahan warna dan bentuk. Yang kedua beralih antara status yang berbeda (tekan, pilih) dengan transisi yang halus.

AnimatedVectorDrawable menggunakan tiga file XML: Vector Drawable itu sendiri, ObjectAnimator dengan deskripsi animasi, dan AnimatedVectorDrawable penghubung yang menghubungkan target (nama grup atau jalur) dengan animator. Animasi dapat mengubah fillColor, strokeColor, rotation, translateX/Y, scaleX/Y, dan bahkan pathData — yaitu mengubah satu bentuk menjadi bentuk lain secara halus (morphing).

Contoh animasi morphing

Mari kita lihat animasi di mana ikon “tambah” berubah menjadi “silang”. Batasan utama: jumlah perintah pathData harus sama di status awal dan akhir, jika tidak animasi tidak akan berfungsi.

<!-- res/drawable/anim_plus_to_close.xml -->
<animated-vector xmlns:android="...">
    <target
        android:name="plus_path"
        android:animation="@anim/plus_to_close"/>
</animated-vector>

Animasi ObjectAnimator plus_to_close mengubah properti pathData dari bentuk awal “tambah” ke bentuk “silang” dalam 300 milidetik. Sistem secara otomatis menginterpolasi koordinat antara dua set perintah jalur SVG. Animasi semacam ini banyak digunakan di Material Design untuk transisi status tombol dan ikon yang halus.

Contoh kode Vector Drawable

Mari kita lihat contoh lengkap vektor XML untuk ikon panah kembali dengan dukungan tema gelap. Warna ditentukan melalui referensi ke atribut tema, yang secara otomatis mengubah warna ikon saat beralih antara tema terang dan gelap tanpa menduplikasi sumber daya.

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24"
    android:tint="?attr/colorControlNormal">

    <group android:name="arrow">
        <path
            android:fillColor="@android:color/white"
            android:pathData="M20,11H7.83l5.59,-5.59L12,4l-8,8 8,8 1.41,-1.41L7.83,13H20v-2z"/>
    </group>

</vector>

Parameter android:tint dengan nilai ?attr/colorControlNormal secara otomatis menerapkan warna sistem elemen kontrol — pada tema terang ini abu-abu gelap, pada tema gelap putih. Grup bernama arrow memungkinkan animasi ikon ini melalui AnimatedVectorDrawable.

Memuat Vector Drawable dari kode

Untuk memuat Vector Drawable secara terprogram di Android, gunakan kelas AppCompatResources.getDrawable() atau metode ContextCompat.getDrawable(). Dalam proyek modern di Jetpack Compose, Drawable raster dan vektor dimuat melalui painterResource, yang secara otomatis mendeteksi format sumber daya.

import androidx.appcompat.content.res.AppCompatResources

val vectorDrawable = AppCompatResources.getDrawable(
    context,
    R.drawable.ic_arrow_back
)

// Jetpack Compose
Icon(
    painter = painterResource(R.drawable.ic_arrow_back),
    contentDescription = "Back",
    tint = MaterialTheme.colorScheme.onSurface
)

Saat menggunakan AppCompatResources.getDrawable(), pustaka AppCompat secara otomatis memilih versi drawable yang tepat berdasarkan level API: pada perangkat yang lebih lama dari Android 5.0 (API 21) dapat menggunakan fallback raster, pada yang lebih baru — Vector Drawable. Di Jetpack Compose, painterResource menangani kompatibilitas ini secara otomatis.