Belajar Vector Drawable di Android

Memahami fundamental Vector Drawable di Android

Photo by picjumbo.com from Pexels

Pengenalan

Berdasarkan situsnya disebutkan bahwa

A VectorDrawable is a vector graphic defined in an XML file as a set of points, lines, and curves along with its associated color information. The major advantage of using vector drawable is image scalability.

Jadi VectorDrawable adalah salah satu media/aset gambar di Android yang dibuat dalam bentuk file XML dan salah satu keuntungannya adalah gambar VectorDrawable bisa di-scale tanpa perlu khawatir akan kehilangan kualitas gambarnya.

http://blog.froont.com/9-basic-principles-of-responsive-web-design/

Basic Command

Sebelum masuk ke perintah dasar untuk menggambar di VectorDrawable coba kita import satu VectorDrawable dari aset Android Studio.

Import vector aset

Lalu, coba kita buka file tersebut. Maka, isinya kurang lebih seperti berikut.

Contoh kode vector drawable

Pada kode diatas berikut penjelasannya.

1. android:width dan android:height sebagai attribute yang berfungsi untuk menentukan width dan height dari ukuran VectorDrawable.
2. android:tint sebagai attribute yang berfungsi untuk menentukan warna dari VectorDrawable.
3. android:viewportWidth dan android:viewportHeight sebagai attribute yang berfungsi untuk menentukan width dan height dari ukuran canvas VectorDrawable. Canvas maksudnya adalah tempat kita melakukan proses penggambarannya.
4. <path> berfungsi sebagai tag untuk melakukan penggambaran pada canvas.
5. android:fillColor berfungsi sebagai attribute untuk memberikan isi warna dari path.
6. android:pathData berfungsi sebagai attribute untuk melakukan gambar melalui command-command di canvas.

Fokus kita disini adalah command-command pada attribute android:pathData dimana, disitu kita perhatikan ada kode-kode seperti berikut.

android:pathData="M3,18h18v-2L3,16v2zM3,13h18v-2L3,11v2zM3,6v2h18L21,6L3,6z"

Kalau kita yang nggak peduli sama kode-kode tersebut biasanya kita acuh saja sama kode tersebut. Namun, bagi kita yang peduli sama kode-kode tersebut biasanya ada rasa penasaran didalam diri kita untuk mau coba-coba ubah kode tersebut. Yap, bagi kita yang penasaran arti dan maksud dari kode-kode tersebut maka beruntunglah karena pada artikel ini kita akan bahas secara singkat apa arti dan maksud dari kode-kode tersebut.

Sebenarnya kode-kode tersebut adalah command-command dari kode paths. Dan berikut adalah command-command dasarnya.

1. M atau m (Move to)
2. L atau l (Line to)
3. H atau h (Horizontal to)
4. V atau v (Vertical to)
5. Z atau z (Close path)

Catatan: uppercase digunakan untuk memberikan command secara absolute sedangkan lowercase digunakan untuk memberikan command secara relative. Contohnya sebagai berikut. Misal, saat ini posisi pada koordinat 8,8 pada sumbu x dan y kemudian, kita beri command M10,10 maka, koordinatnya akan pindah ke koordinat 10,10 (x,y) namun, jika kita berikan command m10,10 maka, koordinat akan bergeser sebanyak 10 titik ke sumbu x dan 10 titik ke sumbu y sehingga posisinya sekarang adalah 18,18 (x,y).

Sumbu x dan y dimulai dari sudut kiri atas.

Sumbu X dan Y

M atau m (Move to)

Command ini berfungsi untuk memindahkan titik koordinat dari satu titik ke titik lainnya.

L atau l (Line to)

Command ini berfungsi untuk menggambarkan garis lurus dari satu titik ke titik lainnya.

H atau h (Horizontal to)

Command ini berfungsi untuk menggambarkan garis horizontal dari satu titik ke titik lainnya.

V atau v (Vertical to)

Command ini berfungsi untuk menggambarkan garis vertical dari satu titik ke titik lainnya.

Z atau z (Close path)

Command ini berfungsi untuk menutup path.

It’s time to Drawing

Ada 5 gambar yang akan kita gambar pada contoh kali ini yaitu gambar persegi, segitiga, icon +, icon x, dan icon menu hamburger.

Gambar Persegi

Sebelum kita memulia menggambarnya mari kita imajinasikan kira-kira titik koordinatnya seperti berikut.

Koordinat gambar persegi

Sebenarnya untuk menggambar gambar tersebut ada banyak cara sesuai dengan kombinasi command-command yang tersedia. Namun, kali ini saya coba beri satu cara saja agar kamunya bisa coba explore sendiri command-nya agar bisa menghasilkan gambar yang sama namun, kombinasi command-nya berbeda.

Cara gambar persegi

Jadi, pertama-tama kita pindahkan koordinat kita ke titik (8,8) lalu, kita gambar garis lurus ke titik (16,8). Selanjutnya kita gambar lagi garis lurus ke titik (16,16). Berikutnya kita gambar garis lurus ke titik (8,16) and finally kita tutup gambar kita dengan cara command Z.

Proses cara gambar persegi

Kode gambar persegi

Sekarang coba kita pakai icon vector tersebut pada ImageView maka, hasilnya akan menjadi seperti berikut.

Test gambar persegi

Perhatikan baik-baik bahwa gambar yang kita gambar di canvas haruslah berada ditengah-tengah atau setidaknya posisinya pas sehingga ketika dipakai posisinya jadi cocok. Bandingkan dengan gambar berikut yang tidak pas posisinya.

Gambar persegi tidak pas ditengah (salah posisi ketika penggambaran di canvas-nya)

Jadi, intinya proses penggambaran di canvas-nya harus pas ya. 😉

Gambar Segitiga

Berikut imajinasinya.

Koordinat gambar segitiga

Lalu, untuk proses penggambarannya pertama-tama kita pindahkan koordinat kita ke (4,16) lalu, kita gambar garis horizontal ke titik (16,16) lalu gambar garis lurus ke titik (10,2) dan kemudian tutup gambarnya.

Cara gambar segitiga

Kode gambar segitiga

Sekarang kita test gambarnya.

Oops gambar segitiganya tidak pas ditengah

Sekarang coba kita perbaiki gambarnya ya. Silakan kita ubah kode gambarnya menjadi seperti berikut.

Perbaikan gambar segitiga agar pas ditengah

Sekarang coba kita test lagi.

Gambar segitiga pas ditengah

Icon +

Imajinasi gambarnya.

Koordinat gambar icon plus

Untuk proses penggambarannya seperti berikut.

Cara gambar icon plus

Kode gambar icon plus

Sekarang coba kita test.

Gambar icon plus sudah ditengah

Icon x

Imajinasi gambarnya.

Koordinat gambar icon x

Dan berikut cara gambarnya.

Cara gambar icon x

Kode gambar icon x

Sekarang coba kita test.

Gambar x sudah pas ditengah

Icon Menu Hamburger

Imajinasi gambarnya.

Koordinat gambar icon menu hamburger

Dan berikut cara gambarnya.

Cara gambar icon menu hamburger

Kode gambar icon menu hamburger

Sekarang coba kita test gambarnya.

Gambar icon menu hamburger sudah pas ditengah

Kesimpulan

Jadi dengan cara kita memahami command-command dasar di VectorDrawable kita bisa lebih leluasa untuk menggambar icon. Untuk info lebih lanjut mengenai command-command lainnya di pathdata bisa kita pelajari di https://www.w3.org/TR/SVG/paths.html#Introduction