Friday, August 17, 2018

Cara membuat Menu Navigation Drawer Di Sketchware untuk Aplikasi Webview




Hi all, beberapa waktu lalu saya sudah membuat tutorial tentang membuat aplikasi webvie melalui aplikasi Sketchware, dan kali ini saya akan membahasa tentang cara membuat Menu Slide Drawer yang dapat membuat aplikasi anda lebih bagus, untuk tutorial membuat aplikasi WebView anda bisa membaca artikel saya yang saya buat sebelumnya mengenai Tutorial membuat Aplikasi Webview dari sketchware, jika anda sudah membaca dan bisa membuat aplikasi webview maka anda bisa melanjutkan tutorial membuat Slide Menu Navigation  Drawer.

Tutorial membuat Slide Menu Navigation Drawer:



  1. Klik Configuration atau menu titik 3 yang ada diatas > Klik Library Manager > Aktifkan atau Enable AppCompat And Design Sehingga menjadi On > Save. 
  2. Klik Configuration atau  menu titik 3 yang ada diatas > Klik View > Klik Main Xml > Centang Drawer / klik drawer. 
  3. Klik Main. Xml > Klik Costum View > Klik Drawer_main .

  4. Buatlah Beberapa layout , ImageView, Text View yang anda inginkan, Contoh,  layout 1 Dengan ukuran Widht: match_parent - height match parent, Layout 2 sampai 6 dengan ukuran Widht : sesuaikan dengan selera anda - Widht : Wrap_Content. Jika anda ingin Text viewnya ada di tengah2 anda tinggal edit layout lalu pilih Gravity > Center Vertikal / Center Horizontal. 
  5. Ganti Textview dengan Text yang anda inginkan >  Sesuaikan ukuran Text > Ganti ukuran Widht : Wrap_content Menjadi Match_parent > Ganti ID Text view sesuai nama text view anda  hasilnya akan seperti gambar dibawah ini.  
  6. Tambahkan beberapa gambar / images dengan cara klik menu titik 3 yang ada di atas > klik images . Penjelasan : 1. Untuk menambahkan gambar dari Gallery,  2. Untuk menambahkan icon yang sudah disediakan Aplikasi Sketchware. 

  7. Pasang Gambar ke image view yang sudah anda siapkan tadi. Hasilnya akan seperti ini.  
  8. Kembali ke Main. Xml > klik Event > Klik Drawer > klik Menu Icon  Warna merah yang ada tanda + > Centang Text View yang ingin anda jadikan menu tadi. Nanti akan jadi seperti ini. 
  9. Buatlah beberapa Activity seseuai menu / Jumlah Text view yang anda buat tadi,  sesuaikan namanya dengan nama text view yang anda buat tadi, dan jangan lupa Drawernya di centang.  
  10. Kembalilah kehalaman menu Drawer yang anda buat di awal tadi.
  11. Copy / save hasil layout yang anda buat tadi dengan cara klik layout pertama anda buat tadi,  lalu klik save dan beri nama. 
  12. Pergi ke menu drawer yang anda buat sesuai nama menu tadi dan paste layout yang anda save tadi. Dan geser hasil layout ke template tadi ke halaman layout. 
  13. Tambahkan event drawer seperti cara nomer 8 ,di setiap activity yang anda buat tadi.
  14. Kembali ke main. Xml dan buatlah Webview ,jika anda belum tau cara membuat webview amda bisa melihat caranya di : Tutorial Membuat aplikasi Webview. Lakukan tutor 14 sampai semua activity di pasang webview
  15. Jika anda sudah memasang webview, sekarng klik Event > Drawer > Klik text View On Click ( Terserah anda memilih yang mana ).
  16. Klik View > Tambahkan Close Drawer. 
  17. Klik Component > Add Component > Klik Inten dan beri nama and save > Tambahkan Inten - SetAcreen > Tambahkan Start Acrivity. Tambahkan Set Screen yang sesuai dengan Webview / Onclick yang sesuai dengan namanya. 
  18. Lakukan cara nomer 15 sampai 17 di setiap Activity yang anda buat tadi. Jika sudah semua tinggal Run dan lihat hasilnya. 

Nonton video ini sampai tuntas jika belum paham:






Load comments
security Safelink Converter
Amankan Link anda dari virus, malware, trojan, dll
link