Kata Hati: Belajar Membuat Material Design Navigation View di Android

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

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.