Tutorial Menciptakan Navigation Drawer Sebagai Navigasi

Bismillaahirrahmaanirrahmiin,,

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

Dalam teladan kali ini kita akan menciptakan navigation drawer dengan fragment sebagai container halamannya.

Tambah Dependencies

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

Menambahkan Drawer Ke Layout

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

Ubahlah isyarat dalam file activity_main.xml menjadi menyerupai berikut :

Membuat Toolbar sebagai AppBar

Kita buat toolbar untuk memperlihatkan icon drawer untuk kita sanggup membuka navigation drawer nya. Pertama ubah dahulu styles.xml menjadi NoActionBar.

Kemudian tambahkan isyarat toolbar berikut ke dalam FrameLayout di activity_main.xml :

Menambahkan Menu Untuk Navigation Drawer

Buatlah file sajian 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 sajian yang gres dibentuk :

Membuat Header Untuk Navigation Drawer

Kita sanggup tambahkan header layout untuk navigation drawer, biasanya ini dipakai untuk info profil akun atau sebagainya. Buat file layout gres dengan nama nav_header.xml

Kemudian tambahkan attribut app:headerLayout :

Membuat Fragment Sebagai Container

Disini kita buat fragment sebagai container/halaman nya. Karena kita menciptakan 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 dibentuk tadi.

Setting Toolbar dan DrawerLayout

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

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

Setting ActionBarDrawerToggle

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

Tambahkan isyarat berikut :
Untuk stringnya sanggup 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 memperlihatkan listener pada navigasi dan aplikasi akan memperlihatkan halaman (fragment) sesuai dengan item sajian yang akan dipilih user.

Setelah itu kita override method onOptionsItemSelected() biar button ic_menu sanggup membuka navigation drawer,

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

Berikut ini file seluruh MainActivity.j4va :

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

Happy Coding.!
Sumber http://easyandroidindonesia.blogspot.com