Cara Membuat Toggle dan Event pada Navigation Drawer
Assalamualaikum Wr.Wb. Postingan kali ini merupakan Lanjutan dari Cara Menambahkan Icon dan Header pada Navigation Drawer, pada tutorial kali ini saya akan menjelaskan cara membuat sebuah Aksi/Event pada item NavigationView, agar item yang user klik akan terjadi sesuatu, misalnya berpindah activity/fragment.
Agar NavigationView mudah di akses oleh user, kita bisa menggukan Toggle button, Toggle button merupakan tombol yang terdapat pada ActionBar, jadi user tidak perlu menggeserkan jari agar menu navigasi muncul, kita hanya tinggal mengklik Toggle button pada ActionBar lalu menu navigasi akan muncul.
ActionBar Toggle Button
Pertama jangan lupa untuk memasang sebuah id pada layout.xml yang akan diberi Toggle Button. Pada Codingan kali ini kita perlu membuat 2 buah Variable yaitu : ActionBarDrawerToggle dan DrawerLayout. Agar NavigtionView muncul saat mengklik Toggle Button, kita perlu menambahkan metode onOptionsItemSelected.
Untuk lebih jalasnya coba perhatikan Script/Code berikut ini :
package net.developer.wildantechnoart.tutorialnavigation;
import android.os.Bundle;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.view.MenuItem;
public class MenuUtama extends AppCompatActivity {
ActionBarDrawerToggle toggle;
DrawerLayout drawerLayout;
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_menu_utama);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
drawerLayout = (DrawerLayout)findViewById(R.id.menu_utama);
toggle = new ActionBarDrawerToggle(this, drawerLayout, R.string.open, R.string.close);
toggle.syncState();
drawerLayout.addDrawerListener(toggle);
}
public boolean onOptionsItemSelected(MenuItem item) {
if(toggle.onOptionsItemSelected(item)){
return true;
}
return super.onOptionsItemSelected(item);
}
}
Baca Juga :
- Tutorial Navigation Drawer part 1 : Implementasi & item
- Tutorial Navigation Drawer part 2 : Icon & Header
Penjelasan
Disini saya akan menjelaskan beberapa Script/Code, sepengetahuan saya sendiri :
- ActionBarDrawerToggle : Digunakan untuk menginisialisasi sebuah Layout yang akan diberi Toggle Button.
- DrawerLayout : Untuk mengidentifikasi id layout.xml yang akan diberi Toggle Button pada ActionBar lalu veriable tersebut akan dipanggil oleh ActionBarDrawerToggler.
- onOptionsItemSelected : Merupakan sebuah metode yang berfungsi untuk memberi aksi/event pada item yang ada pada Menu ActionBar. pada metode ini sudah saya pasang Script/Kode agar saat mengklik toggle button, Menu Navigasi tersebut akan muncul.
- setDisplayHomeAsUpEnabled(true) digunakan agar Menu Toggle muncul pada ActionBar.
- Pasang R.string.open dan R.string.close pada ActionBarDrawerToggel, jika error, klik atl + enter pada R.string.open dan R.string.close lalu pilih create string value resource, terakhir berinama open dan close, pada valuenya.
Action/Event
Untuk memberikan Event pada item, terlebih dahulu kita perlu mengimplementasikan NavigationView pada class java kita contohnya seperti berikut :
public class tutorial extends AppCompatActivity
implements NavigationView.onNavigationItemSelectedListener{
}
Terlebih dahulu kita pasang atribut android:id="@+id/navigasi" pada tag <android.support.design.widget.NavigationView> layout kalian.
Buat variable NavigationView lalu panggil id NavigationView pada variable tersebut, kedua pasang setNavigationItemSelectedListener(this); pada metode onCreate(); perhatikan Coding berikut ini :
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_menu_utama);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
drawerLayout = (DrawerLayout)findViewById(R.id.menu_utama);
toggle = new ActionBarDrawerToggle(this, drawerLayout, R.string.open, R.string.close);
toggle.syncState();
drawerLayout.addDrawerListener(toggle);
//Coding yang harus ditambahkan
navigationView = (NavigationView)findViewById(R.id.navigasi);
navigationView.setNavigationItemSelectedListener(this);
}
Saat mengimplementasikan NavigationView pada classJava kita, akan terdapat error, itu artinya class kita belum mewarisi metode yang terdapat pada NavigationView, untuk mewarisi metode tersebut caranya klik Alt + Enter lalu pilih Implement methods terakhir pilih onNavigationItemSelected.
@Override
public boolean onNavigationItemSelected(MenuItem item) {
return false;
}
Agar item yang terdapat pada Menu Navigasi bisa berfungsi, gunakan Statement switch pada metode onNavigationItemSelected, dan panggil id item satu persatu yang sudah kalian buat pada folder menu.
public boolean onNavigationItemSelected(MenuItem item) {
switch (item.getItemId()){
case R.id.tulis :
Toast.makeText(this, "Tulis dapat diakses", Toast.LENGTH_SHORT);
break;
case R.id.hapus :
Toast.makeText(this, "Hapus dapat diakses", Toast.LENGTH_SHORT);
break;
case R.id.share :
Toast.makeText(this, "Share dapat diakses", Toast.LENGTH_SHORT);
break;
case R.id.setting :
Toast.makeText(this, "Setting dapat diakses", Toast.LENGTH_SHORT);
break;
}
return false;
}
Coba kalian perhatikan, untuk menguji item tersebut, saya menggukana Toast.makeText(); pada semua item yang terpasang, agar saat kita mengklik salah satu item tersebut maka akan muncul pesan yang terdapat pada Toast.
Catatan : Kalian bisa mengganti Toast dengan Statement yang lain, misalnya berpindah Activity/Fragment, dll.
Terakhir agar pada saat kita mengklik item Menu Navigasi tersebut akan langsung tertutup, tambahkan Kode berikut ini, sebelum return false pada metode onNavigationItemSelected.
DrawerLayout drawer = (DrawerLayout)findViewById(R.id.menu_utama);
if(drawer.isDrawerOpen(GravityCompat.START)){
drawer.closeDrawer(GravityCompat.START);
}
Sekian tutorial dari Saya, mengeni menu navigasi pada android, mohon maaf bila ada kesalahan pada tutorial ini dikarenakan ilmu saya masih kurang tapi saya akan terus belajar hingga impian saya tercapai, terakhir dari saya, Wassalamualaikum Wr.Wb.
