Cara Membuat Navigation Drawer Seperti BBM Android

Posted on

farizdotid code – Apa itu Navigation Drawer ? Secara singkatnya Navigation Drawer ini biasa disebut oleh para Android Developer adalah Navbar. Navbar ini biasanya ditandai dengan icon berbentuk 3 garis berbentuk seperti hamburger, Jika icon hamburger itu di klik maka Navbar itu akan muncul dari sebelah kiri layar dan menampilan berbagai menu navigasi seperti Help, Contact Us, Profil dan sebagainya. Nah untuk contoh kasus kali ini ane mau meng-share Cara Membuat Navigation Drawer / Navbar Seperti di Aplikasi BBM.

Cara Membuat Navigation Drawer Seperti BBM Android

Oke kita mulai langsung saja ya Cara Membuat Navigation Drawer Seperti BBM ini.

Pertama,

Pada saat pemilihan wizard Activity, pastikan pilih yang Navigation Drawer Activity dan jangan lupa kasih nama activity tersebut . Jika sudah terlanjur membuat Empty Activity silahkan buat kembali Activity hanya saja pilih yang Navigation Drawer Activity.

 

Kedua,

Tambahkan dependencies library tersebut di build.gradle ( Module : app ). Kegunaan library tersebut untuk membuat foto kita berbentuk bulat.

 

Ketiga,

Tambahkan beberapa icon untuk dijadikan icon menu navigasi kita nanti seperti BBM. Nah disini kita bisa menggunakan plugin Android Drawable Importer, Jika belum tau bisa ke post ini dulu ( Install dan Cara Penggunaan Plugin Android Drawable Importer ) . Jika agan sudah meng-installnya silahkan menuju ke res → drawable → New → Icon Pack Drawable dibagian bawah. Lalu tambahkan icon-icon berikut ini :

ic_action_achievement (24dp) (black)

ic_action_barcode_2 (24dp) (black)

ic_device_hub (24dp) (black)

ic_info (24 dp) (black)

ic_person_add (24dp) (black)

ic_settings (24dp) (black)

dan 1 icon/gambar bebas untuk dijadikan foto profil di navbar.

 

Keempat,

Jika sudah membuat Navigation Drawer Activity silahkan agan ke res → menu → activity_main_drawer.xml . Lalu ganti dengan kode berikut ini :

 

Kelima,

Kita sekarang edit xml bagian header navbarnya. Caranya res → layout → nav_header_main.xml . Lalu samakan dengan kode berikut ini :

nav_header_main

 

Keenam,

Sekarang kita edit bagian warna background header navbar tersebut. Caranya res → drawable → side_nav_bar.xml . Lalu samakan dengan kode berikut :

 

Ketujuh,

Nah setelah kita selesai membuat xmlnya sekarang kita koding bagian MainActivitynya.

Dibagian method onNavigationItemSelected itu samakan dengan kode berikut :

Jika ada error dibagian showToastnya biarkan saja terlbih dahulu karena kita belum membuat method tersebut. Sekaran kita buat method tersebut dengan kode berikut ini :

 

Kedelapan,

Sampai langkah ketujuh tersebut agan sudah berhasil membuat Menu Navigation Drawer seperti BBM, nah dilangkah ini kita akan membuat Navigation Drawer Header itu bisa di klik seperti aplikasi BBM. Jika mengklik barcode maka akan menuju ke activity barcode, dan sebagainya.

Pertama agan harus men-deklarasikan dahulu ImageView dan CircleImageView yang tadi sudah dibuat di xml. Caranya tambahkan diatas method onCreate kode berikut ini :

Jika sudah di deklarasikan sekarang kita harus meng-init komponen tersebut di onCreate. Untuk mempermudah ( versi ane ) kita membuat method khusus untuk menampilkan komponen Navigation Drawer Header tersebut. Buat method bernama initComponentsNavHeader, kodenya berikut ini :

Jika sudah membuat method tersebut silahkan panggil method initComponentsNavHeader tersebut di onCreate. Kurang lebih kode di onCreate jadi seperti ini :

 

Kesembilan,

Selesai. Silahkan run aplikasi tersebut di emulator ataupun device android agan dan lihat hasilnya 🙂 Kurang lebih kode di MainActivity adalah sebagai berikut :

 

Cara Membuat Navigation Drawer Seperti BBM Android

Kesepuluh,

Agan bisa mendownload / mengclone project yang tadi sudah dibuat di akun github ane ( https://github.com/farizdotid/Navigation-Drawer-Looks-Like-BBM-App-Android )

 

Sekian tutorial mengenai Cara Membuat Navigation Drawer Seperti BBM Android. Semoga bermanfaat dan seperti biasa jika ada pertanyaan bisa langsung berkomentar di artikel ini atau bisa kontak media sosial ane 🙂

Gravatar Image
Seorang manusia biasa yang mempunyai fokus ke bidang pemrograman android dan ngeblog mengenai teknologi.

19 thoughts on “Cara Membuat Navigation Drawer Seperti BBM Android

  1. gan kalo misal action menu di navigation drawernya ketika diklik akan menampilkan fragment activity gmm caranya ya gan? soalnya ane mau buat action nya seperti

  2. mas mau nanya koding untuk “action di klik menu navbarnya dengan kodingan manggil fragment” itu gimna ya soalnya saya bingung terus penempatan nya dimana mohon pencerahan??

    1. if (id == R.id.nav_undangan) {
      showToast(“undangan”);
      } else if (id == R.id.nav_saluran) {
      showToast(“saluran”);
      } else if (id == R.id.nav_setelan) {
      showToast(“setelan”);
      } else if (id == R.id.nav_laporkan) {
      showToast(“laporkan masalah”);
      } else if (id == R.id.nav_bantuan) {
      showToast(“bantuan”);
      }

      dibagian itu mas, tinggal ganti code yang showtoast itu sama sesuai dengan kebutuhan mas.

  3. mas mau tanya nih misalnya kan aku milih menu saluran, trus di layout saluran ada menu lagi misalnya saluran a, b, c, dsb
    nah gmna caranya supaya ketika menu saluran a di klik masuk ke layout saluran a?
    trus di atasnya isi tombol back?
    terimakasih

  4. mas kalo di gabung dengan activity login terus di parse pake Intent, gimana cara merubah TextView dan photo di NavHeader mas..?

    terima kasih

    1. Di intent harus bawa data. Bisa pakai put extra get extra, Nah untuk kodingannya mungkin bisa referensi dari sini :
      imgview_fotoprofil = (CircleImageView) headerView.findViewById(R.id.imgview_fotoprofil);
      imgview_fotoprofil.setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View v) {
      showToast(“Foto Profil”);
      }
      });

      imgview_fotoprofil.setImageResource(hasil intent extra).

      Untuk textviewnya pun sama kurang lebih metodenya mas 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.