Vector Drawable Android untuk Pengembangan Aplikasi Android

Vector Drawable Android untuk Pengembangan Aplikasi Android

Siapa yang suka bermain dengan asset gambar ketika mengembangkan aplikasi Android? Adalah hal wajib ketika mengembangkan sebuah aplikasi, kita menambahkan sebuah gambar atau ilustrasi pada halaman aplikasi agar memiliki tampilan yang menarik dan tidak membosankan.

Namun, ketika kita ingin menambahkan gambar atau ilustrasi ke dalam project, kita akan berhadapan dengan beberapa kasus. Salah satunya adalah dukungan resolusi layar smartphone untuk aplikasi, di mana gambar yang akan ditampilkan harus disesuaikan dengan setiap ukuran resolusi agar dapat ditampilkan dengan baik. Sehingga, jumlah gambar juga akan bertambah sesuai dengan jumlah konfigurasi resolusi yang kita inginkan dan berakibat ukuran aplikasi yang dikembangkan menjadi besar karena menyimpan asset gambar yang banyak.

💻 Mulai Belajar Pemrograman

Belajar pemrograman di Dicoding Academy dan mulai perjalanan Anda sebagai developer profesional.

Daftar Sekarang

Solusi dari permasalahan di atas adalah dengan menggunakan Vector Drawable. Yapp, sebuah komponen yang ditawarkan oleh Android yang akan kita bahas kali ini.

Apa itu Vector Drawable

Apa itu Vector Drawable? Vector Drawable merupakan sebuah grafik vektor yang didefinisikan di dalam sebuah berkas XML sebagai titik, garis, kurva serta informasi warnanya. Keunggulan dari menggunakan vector drawable adalah dukungan skalabilitas gambar tanpa mengurangi kualitas gambar tersebut. Sebagai contoh, ketika kita menggunakan gambar seperti pada umumnya akan tampak seperti berikut:

Berbeda ketika menggunakan vector drawable yang akan tampil seperti berikut:

Menariknya lagi, kita bisa menggunakan vector drawable sebagai animasi dengan memanfaatkan beberapa berkas XML daripada menggunakan beberapa gambar untuk setiap resolusi seperti yang sudah disebutkan di awal.

Vector Drawable sendiri diperkenalkan secara resmi pada Android 5.0 (API 21) untuk dukungan gambar vektor dengan kelas VectorDrawable dan AnimatedVectorDrawable. Meski diperkenalkan pada API 21, kita tetap bisa menggunakannya di bawah versi API 21 dengan bantuan Android Support Library.

Bagaimana menggunakan Vector Drawable Android

Lalu bagaimana cara menambahkan asset vector drawable ke dalam project? Saat ini Android Studio menyediakan lebih dari 200 asset vector drawable yang siap digunakan. Asset vector tersebut dapat kita akses dengan cara klik File -> New -> Vector Asset. Maka akan tampil jendela baru dengan judul Asset Studio seperti berikut:

Kemudian, klik icon Android kecil pada bagian Clip Art, maka tampil lagi jendela baru seperti berikut:

Di sinilah kita bisa memilih asset vector yang akan kita gunakan. Selain itu, kita juga bisa mengubah warna dari vector drawable tersebut sesuai dengan yang kita inginkan seperti berikut:

Setelah selesai, klik Next. Kemudian Finish.
Pertanyaannya adalah, bagaimana jika kita mempunyai vector drawable yang kita buat sendiri dan ingin ditambahkan ke dalam project? Mudah, buka kembali jendela Asset Studio dengan mengikuti langkah seperti di atas. Setelah tampil, pada bagian Asset type pilih Local file (SVG, PSD), maka pada jendela Asset Studio akan seperti gambar berikut:

Selanjutnya, sesuaikan kolom Path dengan lokasi file vector drawable yang sudah kita buat. Contohya seperti berikut:

Jika sudah, klik Next, Kemudian Finish. Yang perlu diketahui, jika ingin menggunakan vector drawable sendiri, file-nya harus berekstensi SVG atau PSD. Jika tidak, file tersebut akan rusak dan tidak dapat dilanjutkan untuk ditambahkan ke dalam project.

Sebelum menggunakan vector drawable di dalam file xml, kita harus menambahkan konfigurasi untuk mengaktifkan penggunaan vector drawable pada build.gradle. Tepatnya pada bagian defaultConfig seperti berikut:

android {

...

defaultConfig {

...

vectorDrawables.useSupportLibrary = true

}

Ini bertujuan agar vector drawable dapat ditampilkan dengan baik.

Nah, untuk menggunakan vector drawable di dalam sebuah file xml sendiri sedikit berbeda. Yaitu menggunakan atribut app:srcCompat seperti potongan kode di bawah ini:

<ImageView

android:layout_width="75dp"

android:layout_height="75dp"

android:id="@+id/iv_preview"

app:srcCompat="@drawable/dicoding_vector"/>

Mendapatkan Vector Drawable

Dengan ratusan asset yang sudah disediakan oleh Android Studio, bagaimana jika tidak terdapat satupun vector drawable yang diinginkan? Tidak perlu khawatir, kita bisa mengunduhnya secara gratis dari internet tanpa harus membuat secara manual.

Berikut adalah daftar situs yang menyediakan asset vector drawable yang dapat diunduh secara gratis maupun berbayar:

Jika ingin mendownloadnya, pastikan kembali untuk memilih versi SVG dan selalu perhatikan lisensi penggunaan setiap asset vector meski diunduh secara gratis.

Kesimpulan

Menggunakan vector drawable adalah cara yang disarankan untuk pengembangan aplikasi Android. Kenapa? Karena selain dapat meminimalisir besarnya ukuran aplikasi seperti yang disebutkan di awal, dengan vector drawable, performa aplikasi bisa mengingkat karena tidak memerlukan memori lebih untuk proses render dan ditampilkan ke layar device.

Oke, mungkin sampai di sini pembahasan tentang vector drawable. Jika ada yang ingin ditanyakan, silakan tulis di kolom komentar.

Nantikan pembahasan menariknya lainnya!

Jika ingin melihat kode dari preview yang ditampilkan di awal, bisa dilihat pada laman Github ini.

Salam!

Vector Drawable Android untuk Pengembangan Aplikasi Android-end

========================================

Simak juga tulisan saya lainnya di artikel berikut:

1. https://www.dicoding.com/blog/menerapkan-animasi-pada-project-flutter/
2. https://www.dicoding.com/blog/menerapkan-multitype-view-pada-recyclerview/