Pada saat kita membuat Navigation Bar pasti kita membutuhkan sebuah icon yang unik sesuai dengan content yang dimuat. Nah terkadang kita harus meneyesuaikan sesuai kebutuhan kita. Misalkan kita membuat sebuah aplikasi blog-it. Nah pada Navigation Bar terdapat menu-menu yaitu ada Home, Berita, Tips & Trik, Android, Komputer, Review dll. Nah kita harus mengedit sesuai dengan kebutuhan kita.
- Home dengan icon home
- Tips & Trick dengan icon obeng
- Android dengan icon Smartphone
- Komputer dengan icon Komputer/PC.
Nah bagaimana kita mengedit itu agar sesuai keinginan kita. Oke ini dia langkah-langkah edit vector asseet Studio:
- Pertama kita harus mempunyai sebuah aplikasi yang didalamnya terdapat navigation bar. Jika belum dan hanya sekedar untuk latihan buatlah project baru pada Android Studio. Lalu pilihlah activity.
- Selanjutnya pilihlah secara default hingga finish
- Berikut Tampilan default apabila baru membuat. Setelah itu pilih buka file activity main drawer. Activity main drawer digunakan untuk menedit apapun tampilan yang terdapay pada navigation bar.
- Oke setelah membukanya maka akan muncul tampilan seperti gambar diatas. Terlihat Android Studio telah mempersiapkan NavBar secara default. Nah inti dari artikel ini ialah mengedit gambar dari icon di NavBar.
- Coba perhatikan betul betul pada setiap item yang ditampilkan. Ya terlihat setiap item memiliki komponen id, icon dan title. Kita akan fokus keicon. Ternyata icon memiliki file sendiri. Coba buka file tersebut yang tersimpan di direktori drawable. Buka salah satu misal ic_menu_camera.
- Terlihat bahwa yang digunakan ternyata bukan sebuah foto melainkan sebuah file xml. Ya itu ialah file dari sebuah Vector Asset Studio. Oke jangan risaukan apabila belum paham maksudnya karena kita akan coba membuat Vector Asset dan "menancapkannya" di NavBar. Oke pada direktori drawable klik kanan kemudian pilih new=>vector asset. Nah pasti akan muncul Vector Asset Studio yang terlihat seperti pada gambar diatas.
- Oke saya jelaskan sedikit apa yang ada didalam Vector Asset Studio.Kemudain ada 2 pilihan yaitu material_icon (icon dari Android Studio) atau local file (icon yang anda import dari komputer anda).
- Apabila Anda memilih Material Icon,
- Ubah lah nama sesuai yang dibutuhkan, lalu pilih icon sesuai kebutuhan yang diinginkan.
- Pada gambar icon klik maka akan muncul tampilan seperti gambar diatas. Oke disana banyak sekali icon yang dapat dipilih. Pilih salah satu kemudian klik Ok. Lalu
- Apabila anda memilih Local File
- Oke berbeda dengan Material Icon. Pada Local File anda harus menunjukkan lokasi file PSD/SVG yang memuat sebuah icon.
- Setelah memilih sebuah icon kemudian akan muncul Vector Drawable Preview.
- Jika error biasanya terdapat pesan error dibawah disertai dengan tanda seru merah.
- Oke setelah salah satu dari kedua tipe diatas dipilih dan berhasil klik next maka akan mucul window yang menekankan bahwa file akan benar-benar disimpan didrawable. Coba perhatikan untuk memastikan lokasi penyimpanan Vector nya. Jika sudah klik Finish
- Kita telah berhasil membuat sebuah file vector asset untuk merubah sebuah icon. Oke selanjutnya buka lah file activity_main_drawer.xml
- Pilih lah icon yang mana yang ingin diganti. Semisal disini saya akan mengganti tombol camera menjadi tombol dokumen.
- Saya edit item seperti foto diatas menjadi item seperti gambar disampingnya.
- Oke sekarang coba dicek dipreview activity_main.xml. Maka dari semula ada icon kamera berjudul import menjadi icon dokumen berjudul document.
Itu saja untuk tutorial singkat ini semoga bermanfaat. Terima Kasih.
This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.
ConversionConversion EmoticonEmoticon