Belajar Membuat Material Design Navigation View di Android

Last Updated on 9 years by Mas Herdi

Banyak aplikasi-aplikasi Android jaman sekarang yang menggunakan Navigation View, atau biasa disebut juga navigation drawer, sebagai salah satu cara navigasi yang populer. Navigation drawer biasanya berupa sebuah sliding menu yang akan muncul ketika kita lakukan gerakan geser(swipe) pada aplikasi. Ada banyak cara untuk membuat navigation drawer, salah satunya menggunakan Navigation View, yang menurut saya adalah cara paling mudah, dan baru dikenalkan oleh Google beberapa bulan yang lalu lewat Android Design Support Library.

Membuat navigation drawer menggunakan Navigation View

Semua aplikasi yang menggunakan Material Design style biasanya mempunyai sebuah navigation drawer sebagai elemen wajib dalam aplikasinya. Sebelum belajar cara membuat navigation drawer menggunakan Navigation View dan Android Design Support library, ada baiknya kalian membaca beberapa pre-requisites di bawah ini terlebih dahulu :

Pre-requisites

• Mengenal Android Material Design
• Membuat Project Hello World dengan Android Studio
• Membuat Color Resources untuk Material Design Theme

Setelah membuat project baru di Android Studio, pertama-tama kalian harus mengimpor beberapa dependencies berikut :

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:22.2.0'
    compile 'com.android.support:design:22.2.0'
    compile 'com.android.support:support-v4:22.2.0'
}

Untuk membuat Navigation View, ada beberapa elemen layout yang kita butuhkan. Yaitu layout untuk view activity tersebut, layout untuk header dari navigation view, dan layout untuk menu yang ada di dalam navigation view. Pertama-tama, kita akan membuat layout untuk header di Navigation View-nya terlebih dahulu. Buatlah sebuah layout xml bernama view_nav_header.xml dan copy-pastekan kode berikut :

view_nav_header.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="192dp"
    android:background="?attr/colorPrimaryDark"
    android:padding="16dp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark"
    android:orientation="vertical"
    android:gravity="bottom">


    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="TWOH's Engineering"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1"/>

</LinearLayout>

Kemudian dilanjutkan dengan membuat layout untuk menu item pada Navigation View. Buatlah xml bernama menu_nav_items.xml di folder /res/menu :

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context="id.web.twoh.coolandroiddesign.NavigationViewActivity" >

    <group android:checkableBehavior="all">
        <item
            android:id="@+id/nav_home"
            android:icon="@drawable/ic_add_white"
            android:title="Home"/>
        <item
            android:id="@+id/nav_my_profile"
            android:icon="@drawable/ic_add_white"
            android:title="My Profile"/>

        <item
            android:id="@+id/nav_settings"
            android:icon="@drawable/ic_add_white"
            android:title="Settings"/>
    </group>

</menu>

Jika sudah, kita akan buat layout untuk main activity-nya bernama activity_nav_view.xml, copy pastekan kode berikut ke dalam file xml tersebut

activity_nav_view.xml

<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="@drawable/ic_bg_navview"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">


    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        >
        <!-- rest of layout... -->
    </RelativeLayout>

    <android.support.design.widget.NavigationView
        android:id="@+id/navigation"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/view_nav_header"
        app:itemTextColor="#333"
        app:itemIconTint="#333"
        app:menu="@menu/menu_nav_items" />
</android.support.v4.widget.DrawerLayout>

Bisa dilihat, pada xml tersebut ada beberapa hal yang perlu diperhatikan :

• Navigation View dibuat di dalam elemen parent layout yang berupa DrawerLayout
• Kita bisa men-spesifikasikan layout untuk header di Navigation View pada bagian app:headerLayout
• Sedangkan kita bisa menspesifikasikan layout untuk menu item di Navigation View pada bagian app:menu
• Pada parent layout kita menspesifikasikan android:fitsSystemWindows sebagai “true” supaya Navigation View saat sliding berada di bawah status bar Android.

Perbedaan yang signifikan dalam membuat navigation drawer menggunakan Navigation View yaitu kita bisa membuat navigation items dalam bentuk menu resource (berada dalam folder /res/menu) tidak menggunakan ListView ataupun RecyclerView. Hal ini tentu sangat memudahkan kita dalam proses development.

Selanjutnya, kita akan lanjut ke kode di bagian activity untuk melakukan setup pada NavigationView tersebut dan sekaligus meng-handle klik yang dilakukan pada navigation items. Berikut adalah isi kode Java dari file main activity :

import android.os.Bundle;
import android.support.design.widget.NavigationView;
import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.MenuItem;
import android.widget.Toast;

/**
 * Created by Hafizh Herdi on 7/23/2015.
 */
public class NavigationViewActivity extends AppCompatActivity {

    private Toolbar toolbar;
    private DrawerLayout drawerLayout;
    private NavigationView navView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_nav_view);
        drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        setupToolbar();
        navView = (NavigationView) findViewById(R.id.navigation);
        navView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(MenuItem menuItem) {
                // cek apakah menuItem sudah diklik (checked) atau tidak
                if(menuItem.isChecked())
                    menuItem.setChecked(false);
                else
                    menuItem.setChecked(true);

                // menutup drawer ketika menuItem diklik
                drawerLayout.closeDrawers();

                switch (menuItem.getItemId()){
                //kode handle untuk tiap-tiap menu item
                    case R.id.nav_home:
                        Toast.makeText(NavigationViewActivity.this, "Home clicked", Toast.LENGTH_SHORT).show();
                        return true;
                    case R.id.nav_my_profile:
                        Toast.makeText(NavigationViewActivity.this, "My profile clicked", Toast.LENGTH_SHORT).show();
                        return true;
                    case R.id.nav_settings:
                        Toast.makeText(NavigationViewActivity.this, "Settings clicked", Toast.LENGTH_SHORT).show();
                        return true;

                }
                return true;
            }
        });
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            // menghandle ketika tombol home diklik, Navigation View akan terbuka
            case android.R.id.home:
                drawerLayout.openDrawer(GravityCompat.START);
                return true;
        }
        return super.onOptionsItemSelected(item);
    }

    private void setupToolbar()
    {
        // kode untuk setupToolbar di sini
    }
}

Saya rasa hanya itu saja yang perlu ditambahkan, untuk icon ataupun material style yang hilang/missing, kalian bisa langsung ngoprek source code nya di GitHub saya.

Demo

Demo-nya ketika aplikasi dijalankan adalah seperti berikut :

Ketika tombol icon home pada Toolbar di klik atau kita melakukan swipe pada aplikasi, akan muncul Navigation View seperti berikut :

Tampilan Navigation View

Muncul toast saat item My Profile diklik

Ketika item My Profile diklik

Ketika Navigation View terbuka lagi, akan muncul tanda checked di item My Profile (karena item itu yang kita klik tadi)

Tanda checked pada item My Profile

That’s all. Source code ada di GitHub saya, jangan lupa untuk follow dan star projectnya ya 😀 Bagi yang kurang jelas silahkan tanya di bagian komentar.