Tutorial Membuat Navigation Drawer Sebagai Navigasi

Bismillaahirrahmaanirrahmiin,,

Dalam android, ada beberapa library yang berfungsi sebagai navigasi antar halaman, salah satunya ialah Navigation Drawer. Navigation Drawer merupakan UI panel yang berfungsi sebagai menu utama dalam aplikasi kita. Navigation Drawer biasanya berukuran 3/4 lebar layar ( tergantung si pembuat untuk menentukan lebarnya). Disaat tidak digunakan dia akan menghilang, namun dia akan muncul saat kita swipe layar dari arah kiri atau dengan menyentuh icon drawer di app bar.

Dalam contoh kali ini kita akan membuat navigation drawer dengan fragment sebagai container halamannya.

Tambah Dependencies

---

Disini kita perlu API dari Android Support Library, maka itu tambahkan baris kode berikut ke dalam file build.gradle

 

Menambahkan Drawer Ke Layout 

---

Untuk menambahkan navigation drawer ke layout, kita perlu membuat DrawerLayout sebagai root view. Didalam DrawerLayout kita perlu definisikan layout container/halaman nya, dalam contoh ini kita pakai FrameLayout.

Ubahlah kode dalam file activity_main.xml menjadi seperti berikut :

Membuat Toolbar sebagai AppBar 

---

Kita buat toolbar untuk memberikan icon drawer untuk kita bisa membuka navigation drawer nya. Pertama ubah dahulu styles.xml menjadi NoActionBar.
Kemudian tambahkan kode toolbar berikut ke dalam FrameLayout di activity_main.xml :

 Menambahkan Menu Untuk Navigation Drawer

---

Buatlah file menu dengan klik kanan res>New>Android resource file. Beri nama file nav_drawer_menu.xml. Ubah resource type nya menjadi Menu.

Kemudian kita tambahkan atribut app:menu ke navigation view nya untuk menambahkan menu yang baru dibuat :

Membuat Header Untuk Navigation Drawer

---

Kita bisa tambahkan header layout untuk navigation drawer, biasanya ini digunakan untuk informasi profil akun atau sebagainya. Buat file layout baru dengan nama nav_header.xml 

Kemudian tambahkan attribut app:headerLayout :

Membuat Fragment Sebagai Container

---

Disini kita buat fragment sebagai container/halaman nya. Karena kita membuat 4 menu, maka buat 4 fragment.
Pertama kita buat layoutnya. Buat 4 file dengan nama fragment_home, fragment_gallery, fragment_share, fragment_help :
Ubahlah setiap atribut text yang sesuai.

Kemudian buat class dengan nama masing-masing: HomeFragment, GalleryFragment, ShareFragment, HelpFragment :
Ubah setiap reference R.layout.namafragment dengan layout nya yang telah dibuat tadi.

Setting Toolbar dan DrawerLayout

---

Untuk merespon saat user klik menu pada navigation drawer, maka kita perlu mengimplementasikan OnNavigationItemSelectedListener dan mem-passing nya ke dalam method setNavigationitemSelectedListener(). Pertama, inisialisasi Toolbar dan DrawerLayoutnya :

Pada kode diatas kita setting toolbar sebagai appbar dan kita ganti icon default Up Navigation dengan menu 3 garis. Icon ini bisa didapat dengan klik kanan folder drawable>New>Vector Assets kemudian pilih menu.

Setting ActionBarDrawerToggle

---

Kita buat ActionBarDrawerToggle, ini berfungsi untuk menambahkan open/close listener untuk membuka atau menutup navigation drawer nya :

Tambahkan kode berikut :
Untuk stringnya bisa ditambahkan ke dalam file strings.xml :

Setting Navigation View dan Handle Event Click

---

Kita inisialisasi NavigationView serta kita beri event click nya :
Pada method setupNavDrawer() itu berfungsi untuk memberikan listener pada navigasi dan aplikasi akan memberikan halaman (fragment) sesuai dengan item menu yang akan dipilih user.

Setelah itu kita override method onOptionsItemSelected() agar button ic_menu bisa membuka navigation drawer,

Juga kita tambahkan method berikut untuk menyimpan state saat configuration layar berubah :

Berikut ini file seluruh MainActivity.java :

Itu dia cara membuat Navigation Drawer. Jika ada kesalahan, kekurangan dalam tutorial, kritik atau tambahan, silahkan berkomentar. Semoga bermanfaat.

Happy Coding.!