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.
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,
1 | compile 'de.hdodenhof:circleimageview:2.1.0' |
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 :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android"> <group android:checkableBehavior="single"> <item android:id="@+id/nav_undangan" android:icon="@drawable/ic_person_add" android:title="Undangan" /> <item android:id="@+id/nav_saluran" android:icon="@drawable/ic_device_hub" android:title="Saluran" /> <item android:id="@+id/nav_setelan" android:icon="@drawable/ic_settings" android:title="Setelan" /> <item android:id="@+id/nav_laporkan" android:icon="@drawable/ic_info" android:title="Laporkan Masalah" /> <item android:id="@+id/nav_bantuan" android:icon="@drawable/ic_info" android:title="Bantuan" /> </group> </menu> |
Kelima,
Kita sekarang edit xml bagian header navbarnya. Caranya res → layout → nav_header_main.xml . Lalu samakan dengan kode berikut ini :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/side_nav_bar" android:gravity="bottom" android:orientation="vertical" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/nav_header_vertical_spacing" android:theme="@style/ThemeOverlay.AppCompat.Dark"> <ImageView android:paddingTop="16dp" android:id="@+id/imgview_barcode" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_action_barcode_2" android:layout_gravity="right"/> <de.hdodenhof.circleimageview.CircleImageView xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/imgview_fotoprofil" android:layout_width="60dp" android:layout_height="60dp" android:src="@drawable/logofariz" /> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:paddingTop="8dp" android:text="Farizdotid Code" android:textAppearance="@style/TextAppearance.AppCompat.Body1" /> <TextView android:id="@+id/textView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Ada - www.farizdotid.com" /> </LinearLayout> |
Keenam,
Sekarang kita edit bagian warna background header navbar tersebut. Caranya res → drawable → side_nav_bar.xml . Lalu samakan dengan kode berikut :
1 2 3 4 5 6 | <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <solid android:color="#1976D2"/> </shape> |
Ketujuh,
Nah setelah kita selesai membuat xmlnya sekarang kita koding bagian MainActivitynya.
Dibagian method onNavigationItemSelected itu samakan dengan kode berikut :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | @SuppressWarnings("StatementWithEmptyBody") @Override public boolean onNavigationItemSelected(MenuItem item) { // Handle navigation view item clicks here. int id = item.getItemId(); 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"); } DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout); drawer.closeDrawer(GravityCompat.START); return true; } |
Jika ada error dibagian showToastnya biarkan saja terlbih dahulu karena kita belum membuat method tersebut. Sekaran kita buat method tersebut dengan kode berikut ini :
1 2 3 | private void showToast(String message){ Toast.makeText(this, message, Toast.LENGTH_SHORT).show(); } |
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 :
1 2 | private ImageView imgview_barcode; private CircleImageView imgview_fotoprofil; |
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 :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | private void initComponentsNavHeader(){ NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view); navigationView.setNavigationItemSelectedListener(this); View headerView = navigationView.getHeaderView(0); imgview_barcode = (ImageView) headerView.findViewById(R.id.imgview_barcode); imgview_barcode.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { showToast("barcode"); } }); imgview_fotoprofil = (CircleImageView) headerView.findViewById(R.id.imgview_fotoprofil); imgview_fotoprofil.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { showToast("Foto Profil"); } }); } |
Jika sudah membuat method tersebut silahkan panggil method initComponentsNavHeader tersebut di onCreate. Kurang lebih kode di onCreate jadi seperti ini :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar); DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout); ActionBarDrawerToggle toggle = new ActionBarDrawerToggle( this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close); drawer.setDrawerListener(toggle); toggle.syncState(); initComponentsNavHeader(); } |
Kesembilan,
Selesai. Silahkan run aplikasi tersebut di emulator ataupun device android agan dan lihat hasilnya 🙂 Kurang lebih kode di MainActivity adalah sebagai berikut :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 | package com.farizdotid.navigationdrawerbbm; import android.os.Bundle; import android.support.design.widget.FloatingActionButton; import android.support.design.widget.Snackbar; import android.view.View; import android.support.design.widget.NavigationView; import android.support.v4.view.GravityCompat; import android.support.v4.widget.DrawerLayout; import android.support.v7.app.ActionBarDrawerToggle; import android.support.v7.app.AppCompatActivity; import android.support.v7.widget.Toolbar; import android.view.Menu; import android.view.MenuItem; import android.widget.ImageView; import android.widget.Toast; import de.hdodenhof.circleimageview.CircleImageView; public class MainActivity extends AppCompatActivity implements NavigationView.OnNavigationItemSelectedListener { private ImageView imgview_barcode; private CircleImageView imgview_fotoprofil; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar); DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout); ActionBarDrawerToggle toggle = new ActionBarDrawerToggle( this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close); drawer.setDrawerListener(toggle); toggle.syncState(); initComponentsNavHeader(); } private void initComponentsNavHeader(){ NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view); navigationView.setNavigationItemSelectedListener(this); View headerView = navigationView.getHeaderView(0); imgview_barcode = (ImageView) headerView.findViewById(R.id.imgview_barcode); imgview_barcode.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { showToast("barcode"); } }); imgview_fotoprofil = (CircleImageView) headerView.findViewById(R.id.imgview_fotoprofil); imgview_fotoprofil.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { showToast("Foto Profil"); } }); } @Override public void onBackPressed() { DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout); if (drawer.isDrawerOpen(GravityCompat.START)) { drawer.closeDrawer(GravityCompat.START); } else { super.onBackPressed(); } } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.main, menu); return true; } @Override public boolean onOptionsItemSelected(MenuItem item) { // Handle action bar item clicks here. The action bar will // automatically handle clicks on the Home/Up button, so long // as you specify a parent activity in AndroidManifest.xml. int id = item.getItemId(); //noinspection SimplifiableIfStatement if (id == R.id.action_settings) { return true; } return super.onOptionsItemSelected(item); } @SuppressWarnings("StatementWithEmptyBody") @Override public boolean onNavigationItemSelected(MenuItem item) { // Handle navigation view item clicks here. int id = item.getItemId(); 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"); } DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout); drawer.closeDrawer(GravityCompat.START); return true; } private void showToast(String message){ Toast.makeText(this, message, Toast.LENGTH_SHORT).show(); } } |
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 🙂
Good idea, boleh dicoba 🙂
silahkan om hihi 🙂
Wah keren nih tutorialnya. Hasil nya benar-benar mirip sama bbm.. kalau dikembangkan bisa jadi saingan bbm nih. Hehe.
Terima kasih gan tutorialnya.
agan aja yang buat app saingan bbm hihi 🙂 terimakasih kembali gan 🙂
screensho kodenya ada yang kepotong gan, jadinya gak kelihatan, tolong diperbaiki. nice article !
kepotong gimana maksudnya gan? kalau pun ada code yang terpotong masih bisa liat langsung ke Github ane kok gan 🙂
maaf, baru tahu ternyata tempat kodenya bisa di geser :p
butuh aqua ga gan ? 😀
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
bisa gan, kasih action di klik menu navbarnya dengan kodingan manggil fragment.
oke gan makasih
thank you mas
sama-sama mas, semoga bermanfaat 🙂
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??
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.
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
bukannya tinggal start activity layout saluran a aja ya mas? terus untuk tombol backnya bisa lihat disini mas : https://stackoverflow.com/questions/26651602/display-back-arrow-on-toolbar-android
mas kalo di gabung dengan activity login terus di parse pake Intent, gimana cara merubah TextView dan photo di NavHeader mas..?
terima kasih
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 🙂