Tutorial Navigation Drawer : Implementasi & Item

Assalamualaikum Wr. Wb, Pada tutorial kali ini WildanTechnoArt akan membahas tentang Navigation Drawer pada Android Studio.

Tutorial Design Navigation Part 1 : Implementasi & Item

Apa itu Navigation Drawer? Navigation Drawer adalah salah satu komponen navigasi menu ,atau biasa disebut sliding menu yang berfungsi untuk membungkus dan menavigasikan sebuah konten di dalam Activity atau Fragment, dari Aplikasi.

Itu dia pengertian singkat tentang Navigation Drawer, jika sudah paham silakan simak tutorial berikut ini.

1) Sebelum kita membuat sebuah Navigation Drawer pada Activity, pertama-tama kita setup dulu gradle pada project kalian,  contohnya seperti gambar dibawah ini :

Klik 2x build.gradle (Module: app) yang terdapat pada Gradle Scripts

Setelah itu masukan Library design pada dependencies {}, lihat gambar berikut ini.


Disana saya menggunakan com.android.support:design:25.1.1, Library design yang saya gunakan adalah versi 25.1.1, versi design harus sama dengan versi appcompat-v7, contohnya jika appcompat-v7 kalian versi 23.0.0, maka versi design kalian juga harus 23.0.0.' setelah itu klik Sync Now

2) Kedua, buatlah folder menu, caranya klik kanan pada direktori res lalu pilih New > Android resource directory.


Ubah Resource type : menjadi menu, lalu klik OK.


Folder menu akan muncul pada direktori res, sekarang kalian harus membuat file.xml pada folder menu dangan cara klik kanan pada folder menu lalu pilih New > Menu resource file dan beri nama file tersebut.


Buka file.xml yang kalian buat tadi pada dir menu, lalu masukan/edit kodenya seperti ini :

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
 
    <item android:id="@+id/tulis"
         android:title="Tulis"/>
   
    <item android:id="@+id/hapus"
         android:title="Hapus"/>
 
    <item android:id="@+id/share"
         android:title="Share"/>
 
    <item android:id="@+id/setting"
         android:title="Setting"/>
 
</menu>

Penjelasan

Pada tutorial ini kita akan membuat 4 item yang nantinya ditampilkan pada NavigationView, nama item tersebut adalah : Tulis, Hapus, Share dan Setting. pada tag <item />  terdapat dua atribut yang saya gunakan yaitu:
  • android:id=""  <!-- untuk mengidentifikasi yang nanti akan dipanggil pada file.java -->
  • android:title="" <!-- berfungsi untuk mencantumkan nama dari sebuah item tersebut -->

3) Ketiga, Buatlah sebuah Activity baru lalu edit file.xml nya, ganti tag <LinearLayout/> atau <RelativeLayout/> kalian dengan tag <android.support.v4.widget.DrawerLayout> lalu buat sebuah komponen NavigationView pada Activity kalian, contoh Script/Kodenya seperti berikut :

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout <!-- Tag yang harus diganti -->
   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" <!-- Tag yang harus ditambahkan -->
   android:id="@+id/menu_utama" <!-- Tag yang harus ditambahkan -->
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context="net.developer.wildantechnoart.prakasa.MenuUtama"
   android:background="#FFE3E3E3">
 
    <android.support.design.widget.NavigationView <!-- Tag yang harus ditambahkan -->
       android:layout_width="wrap_content"
       android:layout_height="match_parent"
       android:layout_gravity="start"
       app:menu="@menu/nav_menu">
    </android.support.design.widget.NavigationView>
 
</android.support.v4.widget.DrawerLayout>

Jangan lupa kalian harus memasang xmlns:app="http://schemas.android.com/apk/res-auto" dan android:id="@+id/menu_utama" (id dapat diubah), pada layout Drawer.

Jika sudah, coba Rebuild Project kalian pada Android Studio.

Penjelasan

1) Tag <android.support.v4.widget.DrawerLayout> merupakan layout yang berfungsi sebagai penampung komponen NavigationView pada Activity,

2) Tag <android.support.design.widget.NavigationView> adalah sebuah View yang berfungsi untuk menampung/memasang atribut yang akan kita gunakan pada NavigationDrawer, dan berikut adalah penjelasan mengenai atribut yang akan kita gunakan :
  • android:layout_width="wrap_content" // berfungsi untuk mengatur lebar View
  • android:layout_height="match_parent" // berfungsi untuk mengatur panjang View
  • android:layout_gravity="start" // maksudnya agar NavigationView yang kita buat tidak muncul pada layar (di sembunyikan).
  • app:menu="@menu/xxx" // berfungsi untuk memanggil file.xml pada dir menu yang tadi sudah kalian buat dan mengimplementasikannya kedalam NavgationView.

Terakhir masukan Source Codenya pada file.java yang tadi sudah kalian buat bersama dengan Activitynya, perhatikan source code berikut ini :

package net.developer.wildantechnoart.tutorialnavigation;
 
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
 
public class MenuUtama extends AppCompatActivity {
 
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_menu_utama);
        getSupportActionBar(); //Kode yang harus ditambahkan
    }
}

Kalian hanya perlu menambahkan getSupportActionBar(); pada method onCreate(), fungsinya agar Activity kita bisa mengakses ActionBar. Setelah itu jalankan aplikasinya.

Geser tepi kiri layar agar Navigation muncul

Jika ingin mengkategorikan sebuah item/menu pada NavigationView, contohnya saya akan membuat sebuah kategori More dan subitemnya adalah Share dan Setting, perhatikan source code berikut ini :

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
 
    <item android:id="@+id/tulis"
         android:title="Tulis" />
 
    <item android:id="@+id/hapus"
         android:title="Hapus" />
 
    <item android:id="@+id/more"
        android:title="More...">
 
       <menu>
           <item android:id="@+id/share"
              android:title="Share" />
 
           <item android:id="@+id/setting"
              android:title="Setting" />
       </menu>
 
   </item>
 
</menu>

Jika kalian perhatikan ada sedikit perbedaan pada kode xml yang saya buat, Setelah dijalankan maka hasilnya akan seperti ini :

Geser tepi kiri layar agar Navigation muncul

Demikian tutorial kali ini saya akhiri, dilanjutkan dengan tutorial berikutnya yaitu Tutorial Navigation Drawer : Icon & Header  Jika kalian masih belum paham, kalian bisa mengisi komentar dibawah atau kontak saya lewat email atau sosmed, sekian dari saya, Wassalamualaikum Wr. Wb.


Berlangganan Untuk Menerima Update Terbaru:

Posting Komentar