Tutorial Membuat Navigation Drawer Melalui Empty Activity

Tutorial kali ini akan membahas pembuatan Navigation Drawer melalui empty activity di Android Studio. Silahkan persiapkan project Anda, disini saya sudah membuat project baru dengan package com.gwnbs.proyek6.

Dalam tutorial ini, di luar activity_main.xml, kita akan menambahkan 2 buah layout yang di perlukan yaitu, saya buat nama nya layout_main.xml dan nav_head.xml, kemudian 1 buah menu saya berikan nama menu_drawer.xml dan untuk file java nya cukup hanya MainActivity.java saja. Baik, hal pertama yang perlu di lakukan adalah menambahkan implementasi berikut ke dalam file build.gradle (Module: app) :

implementation 'com.google.android.material:material:1.1.0'

Setelah itu lakukan 'Sync Gradle'. Jika Anda memerlukan panduan untuk langkah ini, silahkan melihat pada postingan "Cara Install Banner Iklan AdMob" ini. Langkah berikutnya adalah membuat 2 file layout baru seperti yang sudah di sampaikan di atas. Untuk membuat layout baru, perluas folder res kemudian klik kanan pada folder layout > New > Layout Resource File. Silahkan tentukan nama dari file layout nya atau bisa juga mengikuti nama-nama dari tutorial ini. Berikut isi dari 2 layout baru tersebut :


Isi dari layout_main.xml :

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    tools:ignore="ContentDescription,HardcodedText" >

    <ImageView
        android:layout_width="200dp"
        android:layout_height="300dp"
        android:src="@mipmap/ic_launcher"
        android:layout_centerInParent="true"
        android:id="@+id/imageSatu"/>

    <TextView
        android:id="@+id/textSatu"
        android:layout_below="@id/imageSatu"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Contoh Drawer Layout"
        android:textSize="25sp"
        android:textStyle="bold"
        android:textColor="@color/colorAccent"
        android:padding="5dp"/>

</RelativeLayout>

Isi dari layout nav_head.xml :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="bottom"
    android:background="#3872C3"
    android:orientation="vertical"
    android:padding="16dp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark"
    tools:ignore="ContentDescription, HardcodedText">

    <ImageView
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:paddingTop="16dp"
        android:src="@mipmap/ic_launcher" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingTop="16dp"
        android:text="Drawer Layout"
        android:textSize="20sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingTop="16dp"
        android:autoLink="web"
        android:text="https://wwww.gwnbs.com"
        android:textSize="17sp" />

</LinearLayout>

Layout nav_head.xml tersebut berfungsi sebagai layout bagian kepala/atas dari navigasi drawer (panel navigasi samping) nya. Sedangkan layout_main.xml adalah sebagai layout aktivitas utama dari aplikasi yang nantinya akan di include ke activity_main.xml. Baik, langkah berikutnya adalah membuat menu untuk daftar item navigasi drawer nya. Untuk membuat sebuah file menu baru, klik kanan pada folder res > New > Android Resource File, isikan nama dari file menu, pada pilihan Resource type pilih menu lalu klik OK. Panduan selengkapnya mengenai pembuatan menu bisa di lihat pada tutorial Membuat Options Menu ini. Berikut isi lengkap dari menu_drawer.xml pada contoh ini :

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:tools="http://schemas.android.com/tools"
    xmlns:android="http://schemas.android.com/apk/res/android"
    tools:ignore="HardcodedText">

    <group android:checkableBehavior="single">
        <item
            android:id="@+id/item1"
            android:icon="@drawable/ic_view_list"
            android:title="Daftar Makanan" />
        <item
            android:id="@+id/item2"
            android:icon="@drawable/ic_view_list"
            android:title="Daftar Minuman" />
        <item
            android:id="@+id/item3"
            android:icon="@drawable/ic_view_list"
            android:title="Daftar Cemilan" />
        <item
            android:id="@+id/item4"
            android:icon="@drawable/ic_view_list"
            android:title="Daftar Polisi" />
    </group>

    <item android:title="Komunikasi">
        <menu>
            <item
                android:id="@+id/manis1"
                android:icon="@drawable/ic_settings"
                android:title="Pengaturan" />
            <item
                android:id="@+id/manis2"
                android:icon="@drawable/ic_help"
                android:title="Bantuan" />
        </menu>
    </item>

</menu>

Kita beralih ke activity_main.xml. Disini kita akan memasukkan layout-layout dan menu yang sudah di buat di atas. Tidak perlu panjang lebar, langsung saja berikut isi selengkapnya pada activity_main.xml :

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:openDrawer="start">

    <include
        layout="@layout/layout_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <com.google.android.material.navigation.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/nav_head"
        app:menu="@menu/menu_drawer"/>

</androidx.drawerlayout.widget.DrawerLayout>

Sekarang kita berada pada tahapan terakhir yaitu koding di MainActivity.java. Hal pertama yang di lakukan adalah inisialisasi variabel dari objek Drawer Layout, kemudian memanggil kembali ActionBar yang sebelum nya sudah hilang saat penenrapan Drawer Layout. Bisa juga di gantikan dengan Toolbar, namun disini kita tetap mempertahankan menggunakan ActionBar saja.

private DrawerLayout draw;

Penentuan variabel dari Drawer Layout di buat di luar dan di atas dari metode onCreate, karena nantinya variabel ini masih akan di gunakan pada metode lain di luar metode onCreate. Setelah itu, di dalam metode onCreate panggil id dari Drawer Layout nya, kemudian membuat kode untuk menampilkan icon dari Drawer layout.

Berikutnya masih di dalam metode onCreate, buat variabel dari object NavigationView, panggil id nya lalu buat event listener untuk NavigationView tersebut. Terakhir di dalam metode onCreate, membuat metode klik untuk setiap item yang ada pada NavigationView tersebut. Sehingga kode keseluruhan yang di tambahkan ke dalam metode onCreate adalah seperti di bawah ini : 

if (getSupportActionBar() != null) {
    getSupportActionBar().setDisplayHomeAsUpEnabled(true);
}

draw = findViewById(R.id.drawer_layout);
final ActionBarDrawerToggle t = new ActionBarDrawerToggle(this, draw,
        R.string.open,
        R.string.close);

draw.addDrawerListener(t);
t.syncState();

NavigationView navigationview = findViewById(R.id.nav_view);
navigationview.setItemIconTintList(null);

navigationview.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
        int id = item.getItemId();
        switch(id) {
            case R.id.item1:
                Toast.makeText(MainActivity.this,
                        "Item1 di klik", Toast.LENGTH_SHORT).show();
                break;
            case R.id.item2:
                Toast.makeText(MainActivity.this,
                        "Item2 di klik", Toast.LENGTH_SHORT).show();
                break;
            case R.id.item3:
                Toast.makeText(MainActivity.this,
                        "Item3 di klik", Toast.LENGTH_SHORT).show();
                break;
            case R.id.item4:
                Toast.makeText(MainActivity.this,
                        "Item4 di klik", Toast.LENGTH_SHORT).show();
                break;
            case R.id.manis1:
                Toast.makeText(MainActivity.this,
                        "Manis1 di klik", Toast.LENGTH_SHORT).show();
                break;
            case R.id.manis2:
                Toast.makeText(MainActivity.this,
                        "Manis2 di klik", Toast.LENGTH_SHORT).show();
                break;
        }
        return true;
    }
});

Saat icon menu untuk membuka Drawer Layout di klik, icon tersebut akan berubah menjadi icon arrow (panah) yang jika di klik tidak akan bereaksi apa-apa. Disini kita akan menambahkan beberapa kode/metode supaya saat icon arrow tersebut di klik, maka akan menutup kembali menu Drawer layout nya. Kode nya seperti di bawah ini, di letakkan di bawah dan di luar dari metode onCreate :

public boolean onOptionsItemSelected(MenuItem item) {
    if (item.getItemId() == android.R.id.home) {
        openDrawer();
        if (item.getItemId() == android.R.id.home) {
            if ((draw) != null && (draw.isDrawerOpen(GravityCompat.START)))
                closeDrawer();
        }
    }
    return true;
}

@SuppressWarnings("deprecation")
private void closeDrawer() {
    draw.setDrawerListener(null);
    draw.closeDrawers();
}
@SuppressWarnings("deprecation")
private void openDrawer() {
    draw.setDrawerListener(null);
    draw.openDrawer(GravityCompat.START);
}

Setelah kode-kode dan metode-metode di atas, seharusnya isi lengkap dari MainActivity.java adalah seperti di bawah ini :

package com.gwnbs.proyek6;

import androidx.annotation.NonNull;
import androidx.appcompat.app.ActionBarDrawerToggle;
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.view.GravityCompat;
import androidx.drawerlayout.widget.DrawerLayout;

import android.os.Bundle;
import android.view.MenuItem;
import android.widget.Toast;

import com.google.android.material.navigation.NavigationView;

public class MainActivity extends AppCompatActivity {

    private DrawerLayout draw;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        if (getSupportActionBar() != null) {
            getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        }

        draw = findViewById(R.id.drawer_layout);
        final ActionBarDrawerToggle t = new ActionBarDrawerToggle(this, draw,
                R.string.open,
                R.string.close);

        draw.addDrawerListener(t);
        t.syncState();

        NavigationView navigationview = findViewById(R.id.nav_view);
        navigationview.setItemIconTintList(null);

        navigationview.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                int id = item.getItemId();
                switch(id) {
                    case R.id.item1:
                        Toast.makeText(MainActivity.this,
                                "Item1 di klik", Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.item2:
                        Toast.makeText(MainActivity.this,
                                "Item2 di klik", Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.item3:
                        Toast.makeText(MainActivity.this,
                                "Item3 di klik", Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.item4:
                        Toast.makeText(MainActivity.this,
                                "Item4 di klik", Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.manis1:
                        Toast.makeText(MainActivity.this,
                                "Manis1 di klik", Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.manis2:
                        Toast.makeText(MainActivity.this,
                                "Manis2 di klik", Toast.LENGTH_SHORT).show();
                        break;
                }
                return true;
            }
        });
    }

    public boolean onOptionsItemSelected(MenuItem item) {
        if (item.getItemId() == android.R.id.home) {
            openDrawer();
            if (item.getItemId() == android.R.id.home) {
                if ((draw) != null && (draw.isDrawerOpen(GravityCompat.START)))
                    closeDrawer();
            }
        }
        return true;
    }

    @SuppressWarnings("deprecation")
    private void closeDrawer() {
        draw.setDrawerListener(null);
        draw.closeDrawers();
    }
    @SuppressWarnings("deprecation")
    private void openDrawer() {
        draw.setDrawerListener(null);
        draw.openDrawer(GravityCompat.START);
    }
}

Akhirnya sampai disini tutorial ini di nyatakan selesai. Berikut di sertakan beberapa gambar dari contoh project tutorial ini. Terima kasih! Apabila ada pertanyaan, jangan sungkan untuk membagikannya di kolom komentar, atau melalui contact form yang ada pada menu drawer samping kiri.

Gambar 1 : Penampakan Navigation Drawer

Gambar 2 : Sebelum penampakan Navigation Drawer