Percantik Tampilan Dengan Navigation Drawer Menu dan Option Menu Android

Membuat Navigation Drawer dan Option Menu di Android studio - Navigation adalah hal yang sangat penting untuk memberikan kesan nyaman kepada pemakai, orang sering menyebutnya ialah  (User Friendly). Nah tampilan menu berbagai macam dan memiliki fungi dan tujuan masing-masing dalam sebuah project, aplikasi, dan lain sebagainya.

Didalam aplikasi android masa kini sangatlah penting dalam memperhatikan tampilan dari program aplikasi yang dibuat, terdapat Navigation-navigation pendukung yang mudah digunakan, termasuk yang kita akan bahas kali ini ialah menu drawer dan option menu.

Navigation drawer adalah menu yang paling sering dijumpai dalam setiap aplikasi android, biasanya menu drawer ini berada pada pojok kiri atas (optional, karena tergantung pengembang), dan bersimbol garis tiga. dan dialam menu drawer terdapat menu-menu yang isinya sesuai dengan kebutuhan yang sudah di rancang oleh devolopernya.

Option Menu adalah menu yang biasa digunakan dan di isi untuk menempatkan menu-menu pendukung, baik setting, help, dan lain sebagainya. Letaknya juga optional (tergantung pengembang) namun biasanya berada pada pojok kanan atas. Dan berbentuk titik tiga buah secara vertikal.

Bagaimana Membuat Menu Navigation Drawer dan Option Menu?

Aplikasi editor yang digunakan dalam artikel ini ialah android studio, mengapa android studio? Ya karena kebetulan ya memang itu dipakai oleh sang penulis..

Biaklah. Kita mulai membuat project di android studio sebelum kita membuat menu Navigation drawer dan option menu pada project aplikasi di android studio.

Pada saat membuat new project, jangan pilih Empty Activity, namun pilih “Navigation Drawer Activity” agar tidak perlu lagi mendesign secara manual untuk membuat navbar, menu drawer, menu option. Dalam hal ini pihak pengembang android studio sudah menyediakannya untuk mempermudah kita. Perhatikan gambar berikut ini

 

Dan untuk yang lainnya, seperti nama project, API target, activity name, layout name itu terserah anda.

Sesudah selesai sampai dengan Sync sukses, kita mulai memasukkan codingan agar menu navigation drawer dan option menu tadi bisa berfungsi dengan baik. Kita mulai dari MainActivity.java terlebih dahulu.

Cari “public boolean onNavigationItemSelected(MenuItemitem)” dan sesuikan isinya dengan coding/script berikut ini

public boolean onNavigationItemSelected(MenuItem item) {
// Handle navigation view item clicks here.
        int id = item.getItemId();

        if (id == R.id.nav_camera) {
// Handle the camera action
            pesan("hasil akses menu import camera");
        } else if (id == R.id.nav_gallery) {
            pesant("("hasil akses menu gellery");

        } else if (id == R.id.nav_slideshow) {
            pesan("("hasil akses  menu slideshow");

        } else if (id == R.id.nav_manage) {
            pesan("("hasil akses menu manage");

        } else if (id == R.id.nav_share) {
            pesan("("hasil akses menu share");

        } else if (id == R.id.nav_send) {
            pesan("("hasil akses menu share");

        }

        DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
        drawer.closeDrawer(GravityCompat.START);
        return true;
    }

Jika anda kesulitan untuk menyesuaikan, bisa langsung copy dan replace ke yang ada di mainactivity. Setelah anda sesuiakan dengan yang diatas, tentu akan ada banyak error warna merah, terutama “pesan”, maka copy dan pastekan script pada bagian paling bawah di MainActivity, tepat diatas kurung kurawal paling terakhir.

  public void pesan ( final String pesan){ Toast.makeText(getApplicationContext(), pesan, Toast.LENGTH_LONG).show();
    }

Jika muncul seperti gambar berikut ini, tekan saja Alt+Enter pada keyboard

Karena pada deklarasi import belum ada “import android.widget.Toast;”

Fungsi toast ini untuk memberikan pesan ketika kita melakukan sesuatu atau ketika kita menekan sebuah menu, maka akan ada pesan  contoh: “anda mengakses menu setting” dan lain sebagainya. Toast ini dipanggil melalui public void pesan. Sebagai contoh-contohnya sebagai berikut

Kemudian cari public boolean onOptionsItemSelected(MenuItem item), kemudian sesuaikan atau ganti dengan script berikut ini (masih di MainActicity).

  public boolean onOptionsItemSelected(MenuItem item) {
       int id = item.getItemId();
        if (id == R.id.action_settings) {
//return true;
            pesan("Anda Mengaskses Option Setting");
        }else if (id == R.id.action_aplikasi){
            pesan("Anda Mengaskses Option Aplikasi");
        }else if (id == R.id.action_bantuan){
            pesan("Anda Mengaskses Option Bantuan");
        }else if (id == R.id.action_keluar){
            pesan("Anda Mengaskses Option Keluar");
keluar();
        }

        return super.onOptionsItemSelected(item);
    }

Action_aplikasi, action_bantuan, action_keluar akan terlihatt error untuk sementara, karena kita masih fokus di MainActivity terlebih dahulu.

Kemudian pastekan coding berikut ini pada bagian bawah, biasa dibawah public void pesan, atau diatasnya.

  public void keluar () {
        DialogInterface.OnClickListener dialogClickListener =new
                DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which){
                        switch (which){
                            case DialogInterface.BUTTON_POSITIVE:
                                finish();
                                break;
                            case DialogInterface.BUTTON_NEGATIVE:
                                break;
                        }
                    }
                };

        AlertDialog.Builder builder = new AlertDialog.Builder(this);
        builder.setMessage("Apakah anda akan keluar aplikasi ?").setPositiveButton("Ya",dialogClickListener)
                .setNegativeButton("Tidak",dialogClickListener).show();
    }

Ini fungsi untuk keluar dari aplikasi nantinya. Dan jika DialogInterface dan AlertDialog berwarna merah (error) arahkan kursonya ke situ dan tekan Alt+Enter.

Untuk yang AlertDialog, kita harus memilih seperti gambar berikut ini (yang nomor 1)

Sehingga ketika fungsi keluar di tekan pada option menu akan seperti berikut ini

Ada pesan toast, plus dialog (alertdialog), jika kita pilih ya, maka akan keluar dari aplikasi, jika tidak kembali ke tampilan home dari aplikasi.

Baca Juga : Membuat Menu Drawer Untuk Menjalankan Activity Lain

Kita selesai pada MainActiviy.java. kita beralih lagi ke main.xml yang berada pada res, menu, menu.xml. seperti gambar berikut ini

Sesuaikan isinya atau copy script berikut ini sebagai penggantinya

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto">
    <item android:id="@+id/action_settings"
     android:title="@string/action_settings"
        android:orderInCategory="100"
        app:showAsAction="never" />
    <item android:id="@+id/action_aplikasi"
        android:title="@string/action_aplikasi"
        android:orderInCategory="100" app:showAsAction="never" />
    <item android:id="@+id/action_bantuan"
        android:title="@string/action_bantuan"
        android:orderInCategory="100" app:showAsAction="never" />
    <item android:id="@+id/action_keluar"
        android:title="@string/action_keluar"
        android:orderInCategory="100" app:showAsAction="never" />
</menu>

Biarkan yang "@string/action_aplikasi", dan dua lainnya merah (error) karena pada stringnya belum kita setting.

Selanjutnya kita perbaiki pada string.xml yang berada pada folder “values” seperti gambar berikut ini

Buka dan sesuaikan isinya dengan script berikut ini

<resources>
    <string name="app_name">Menu Drawer dan Option Menu AnakIT</string>
    <string name="nav_header_desc">Menu option dan Option Menu</string>
    <string name="nav_header_title">anakit</string>
    <string name="nav_header_subtitle">android studio</string>
    <string name="navigation_drawer_open">Open navigation drawer</string>
    <string name="navigation_drawer_close">Close navigation drawer</string>
    <string name="action_settings">Settings</string>
    <string name="action_aplikasi">Aplikasi</string>
    <string name="action_bantuan">Bantuan</string>
    <string name="action_keluar">Keluar</string>

</resources>


Sampai disini sebenarnya kita sudah selesai, namun ada tambahan yaitu menambahkan icon pada nav-header dari drawer menu.

Buka nav_header_menu.xml yang berada pada folder layout seperti gambar berikut ini

Perhatikan disebelah kanan ada @mipmap/ic_launcher_round, nah ini adalah adalah image atau icon yang berada pada navigation drawer header nantinya.

Anda biasa membuat icon bari melalui image asset untuk merubah iconnya, jika bingung caranya, silahkan baca Cara Membuat Image Asset di android studio

Setelah selesai, silahkan adan run aplikasinya bisa build melalui emulator, atau langsung ke media seperti smartphone anda.

 Gambar hasil dari navigation drawer dan option menu

Demikianlah pembahasan mengenai cara membuat navigation drawer dan option menu di android studio, semoga artikel ini berguna dan bermanfaat.

Selanjutnya : Menambah dan Merubah Menu-Menu yang ada dengan menu sesuai keinginan anda, bisa dengan megurangi atau menambah menu di drawer tersebut sekaligus mengganti icon dari setiap menu baik yang ada mau pun yang baru ditambah.

Baca : Modifikasi Navigation Drawer Sesuai Keinginan Anda