Now Reading:

UI – Material Design Bagian II Navigation Drawer

UI – Material Design Bagian II Navigation Drawer

Pada Tutorial kali ini kita akan menambahkan Navigation Drawer dengan tetap menggunakan material design yang telah kita buat pada project sebelumnya: User Interface (UI) Material Design. Jika kamu belum mengikuti tutorial sebelumnya kamu dapat mendownload sourcenya disini: Download Source. Atau agar memahami material design kamu bisa mengikuti tutorialnya sebelumnya terlebih dahulu.

Membuat Project

Pertama silahkan buka Project Material Design I (karena kita akan melanjutkan tutorial/project sebelumnya.

Setelah projectnya terbuka silahkan set-up Gradle dengan cara membuka file build.gradle pada bagian Gradle Script. Setelah itu pastikan scriptnya seperti di bawah ini (yang terpenting pada bagian dependencies).

 

Setelah itu silahkan buka file String.xml pada bagian res > values > string.xml dan buat kodenya menjadi seperti di bawah ini.

 

 

Selanjutnya kita akan membuat ikon gambar pada bagian drawable. Kita akan membuat lima icon. Caranya:
Klik kanan pada bagian drawable > new > Vector Asset.
Maka akan muncul jendela Configure Vector Asset seperti gambar di bawah ini.

Penting:
Silahkan membuat 5 icon dengan mengikuti cara di atas (Kita akan membuat 5 menu yaitu : home, profile, list, about, setting)

Setelah itu pada bagian menu kita akan membuat file xml dengan nama item_navigasi.xml.
Caranya:
Klik kanan pada bagian menu > New > File.
Sehingga akan muncul jendela baru New File seperti gambar di bawah ini dan silahkan isi bagian pada kolom nama.

Setelah itu silahkan isikan file  item_navigasi.xml dengan kode program berikut ini:

 

 

Selanjutnya buka file activity_main.xml dan edit kode programnya seperti di bawah ini atau tambahkan yang belum ada.

 

Setelah itu kita buat file xml baru pada bagian res > layout dengan nama layout_header.xml. Setelah itu klik kanan pada bagian layout > New > XML > Layout XML File lalu isi kode programnya seperti di bawah ini.

 

Selanjutnya ubah MainActivity.xml dengan kode program berikut.




Silahkan klik Next Step di bawah ini untuk melanjutkan belajar.

Konten developer untuk Mobile Development yang sangat mencintai mobile programming

Share This Articles
  • walter atapukan

    Error… di mainActivity.xml. Itu file xml atau java ? materinya tidak lengkap atau bagaimana ?

    • Muhammad Yusuf

      Oh iya salah tulis, itu harusnya mainActivity.java

  • Setiawan Dewa

    NavigationView itu diambil darimana gan ko diandroid studio 3 ga ada?