[Android] Material Design – Navigation Drawer dengan Navigation View

NavigationView

SSH GitLab : git@gitlab.com:bnctvns/navigationviewdemo.git
ZIP : https://gitlab.com/bnctvns/navigationviewdemo/repository/archive.zip?ref=master

Hello World 🙂 i’m back ! hehe.. belakangan asik ngoprek jabber & XMPP berefek samping baru bisa nulis sekarang ~disamping kadar konsumsi kopi yg meningkat *now i really believe caffeine can turn into software hahaha

Post kali ini mau cerita ttg membuat Navigation Drawer dgn menggunakan salah satu Widget dari support design library v23 : Navigation View. Hmm what’s that ?? Navigation View adalah Widget yg digunakan untuk membuat Navigation Drawer secara ‘out of the box‘, artinya ngga seribet ketika kita bikin Navigation Drawer dgn RecyclerView + Fragment.. and the best part’nya adalah NavigationView bisa dikonfigurasi via XML ! Yeeaahh 😀

So let’s roll !

Disini gw udah migrasi ke Android Studio ‘coz Google udah ngerecommend bgt untuk pake IDE ini, disamping itu Eclipse with Android SDK udah ngga disupport lagi oleh Google. So untuk yg masih pake Eclipse, ada baiknya untuk migrasi ke Android Studio.

1. Start New Android Studio Project

Google memperkenalkan konsep material design di Android Lollipop (Android 5.0). Disini kita akan menggunakan konsep tsb.

  • Buat New Android Studio Project

New Android Studio Project

  • Configure New Project

Configure Project

  • Pilih Platform

Select Platform

  • Pilih Blank Activity

Blank Activity

  • Nama Activity, Layout dan Menu

Activity Name

2. Add dependency library (build.gradle)
Disini kita akan menggunakan support design library dan recyclerview v23. Untuk menggunakannya kita harus mendeklarasikannya terlebih dahulu di file build.gradle(Module:app). Di project Android Studio terdapat dua file build.gradle, yang akan kita gunakan untuk deklarasi dependency adalah build.gradle(Module:app). Lakukan syncing project dengan klik “Sync Now” setelah melakukan modifikasi file build.gradle(Module:app) seperti di bawah ini :

apply plugin: 'com.android.application'

android {
    compileSdkVersion 23
    buildToolsVersion "23.0.2"

    defaultConfig {
        applicationId "com.bonioctavianus.navigationviewdemo"
        minSdkVersion 16
        targetSdkVersion 23
        versionCode 1
        versionName "1.0"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

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

3. File “colors.xml”
Modifikasi atau buat (jika belum ada) file colors.xml di path “../res/values/colors.xml”. Klik kanan direktori “values” -> New -> Values resource file. Beri nama “colors.xml”.

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <color name="colorPrimaryDark">#FFA000</color>
    <color name="colorPrimary">#FFC107</color>
    <color name="windowBackground">#FAFAFA</color>
    <color name="cardBackground">#FFFFFF</color>
    <color name="navigationBarColor">#000000</color>
    <color name="colorAccent">#0091EA</color>

    <color name="textColorBlackPrimary">#E6000000</color>
    <color name="textColorBlackSecondary">#8C000000</color>
    <color name="textColorBlackHint">#59000000</color>

</resources>

4. File “strings.xml”
Modifikasi file strings.xml di path “../res/values/strings.xml”.

<resources>
    <string name="app_name">NavigationViewDemo</string>

    <string name="hello_world">Hello world!</string>
    <string name="action_settings">Settings</string>
    <string name="username">boni octavianus</string>
    <string name="email">bnctvns@gmail.com</string>

    <!-- Navigation Drawer Menu -->
    <string name="drawer_open">Drawer Open</string>
    <string name="drawer_close">Drawer Close</string>
    <string name="nav_menu_home">Home</string>
    <string name="nav_menu_content_1">Menu 1</string>
    <string name="nav_menu_content_2">Menu 2</string>
    <string name="nav_menu_content_3">Menu 3</string>
    <string name="nav_menu_content_4">Menu 4</string>
    <string name="nav_menu_content_5">Menu 5</string>
    <string name="nav_menu_contact">Contact</string>
    <string name="nav_menu_about">About</string>
</resources>

5. File “styles.xml”
Modifikasi file styles.xml di path “../res/values/styles.xml”.

<resources>

<style name="MyTheme" parent="MyTheme.Base"></style>



<style name="MyTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>


</resources>

6. File “AndroidManifest.xml”
Modifikasi nama theme yang digunakan di file AndroidManifest.xml (“app/src/main/AndroidManifest.xml”). Disini kita menggunakan tema yang baru saja dibuat di file styles.xml sebelumnya (MyTheme). Jika setelah langkah ini kita masuk ke “design view” untuk layout activity_main.xml, maka tampilan layar akan blank dikarenakan kita belum mengaktifkan tema yang kita definisikan di AndroidManifest.xml. Untuk mengaktifkannya, klik tombol “AppTheme” -> Manifest Themes -> MyTheme.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.bonioctavianus.navigationviewdemo" >

    <application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:theme="@style/MyTheme" >
        <activity android:name=".MainActivity" android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

App Theme

7. File “toolbar.xml”
Buat layout untuk Toolbar dengan cara klik kanan direktori layout (“app/src/main/res/layout”), kemudian pilih “New” -> “Layout resource file“.

new resource

<merge xmlns:android="http://schemas.android.com/apk/res/android">

    <android.support.v7.widget.Toolbar android:id="@+id/toolbar" xmlns:android="http://schemas.android.com/apk/res/android" xmlns:local="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" local:popupTheme="@style/ThemeOverlay.AppCompat.Light" local:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
</merge>

8. File “navigation_view.xml”
Buat layout untuk NavigationView dengan cara klik kanan direktori layout (“app/src/main/res/layout”), kemudian pilih “New” -> “Layout resource file“. Disini NavigationView memerlukan resource menu dan layout header yang akan kita buat di langkah berikutnya.

<merge xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto">

    <android.support.design.widget.NavigationView android:id="@+id/navigation_drawer" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="start" android:background="@android:color/white" app:headerLayout="@layout/header_nav_drawer" app:menu="@menu/menu_drawer"/>

</merge>

9. File “header_nav_drawer.xml”
Buat layout untuk NavigationView dengan cara klik kanan direktori layout (“app/src/main/res/layout”), kemudian pilih “New” -> “Layout resource file“. File layout ini akan menjadi header untuk NavigationView, selain dengan XML kita juga bisa men’inflate layout header secara programmatically / runtime untuk NavigationView.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout android:id="@+id/header" xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="120dp" android:background="@mipmap/wallpaper" android:padding="10dp" android:theme="@style/ThemeOverlay.AppCompat.Dark">

    <TextView android:id="@+id/tv_email" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" android:text="@string/email" android:textColor="@android:color/white" android:textSize="12sp"/>

    <TextView android:id="@+id/tv_name" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_above="@id/tv_email" android:text="@string/username" android:textColor="@android:color/white" android:textSize="14sp" android:textStyle="bold"/>

    <ImageView android:id="@+id/img_avatar" android:layout_width="50dp" android:layout_height="50dp" android:layout_above="@id/tv_name" android:layout_marginBottom="10dp" android:scaleType="centerCrop" android:src="@mipmap/ic_account"/>

</RelativeLayout>

10. File “menu_drawer.xml”
Buat file untuk menjadi resource menu drawer untuk NavigationView dengan cara klik kanan direktori menu (“app/src/main/res/layout”), kemudian pilih “New” -> “Menu resource file“.

<?xml version="1.0" encoding="utf-8"?>


<menu xmlns:android="http://schemas.android.com/apk/res/android" >

    <group android:id="@+id/group_menu_1" android:checkableBehavior="single" >
        <item android:id="@+id/navigation_item_1" android:checked="true" android:icon="@mipmap/ic_home" android:title="@string/nav_menu_home"/>
        <item android:id="@+id/navigation_item_2" android:icon="@mipmap/ic_tag" android:title="@string/nav_menu_content_1"/>
        <item android:id="@+id/navigation_item_3" android:icon="@mipmap/ic_tag" android:title="@string/nav_menu_content_2"/>
        <item android:id="@+id/navigation_item_4" android:icon="@mipmap/ic_tag" android:title="@string/nav_menu_content_3"/>
        <item android:id="@+id/navigation_item_5" android:icon="@mipmap/ic_tag" android:title="@string/nav_menu_content_4"/>
        <item android:id="@+id/navigation_item_6" android:icon="@mipmap/ic_tag" android:title="@string/nav_menu_content_5"/>

    </group>

    <group android:checkableBehavior="single" >
        <item android:id="@+id/navigation_item_7" android:icon="@mipmap/ic_contact" android:title="@string/nav_menu_contact"/>
        <item android:id="@+id/navigation_item_8" android:icon="@mipmap/ic_about" android:title="@string/nav_menu_about"/>
    </group>

</menu>

11. File “activity_main.xml”
Modifikasi file “activity_main.xml“, disini kita menggunakan widget NavigationView di dalam DrawerLayout.

<android.support.v4.widget.DrawerLayout android:id="@+id/drawer_layout" xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent">

    <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent">

        <include layout="@layout/toolbar"/>

        <TextView android:id="@+id/tv_title" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_centerInParent="true" android:gravity="center" android:text="Home" android:textColor="@color/textColorBlackHint" android:textSize="26sp" android:textStyle="bold"/>

    </RelativeLayout>

    <include layout="@layout/navigation_view"/>

</android.support.v4.widget.DrawerLayout>

12. File “MainActivity.java”

package com.bonioctavianus.navigationviewdemo;

import android.os.Handler;
import android.support.design.widget.NavigationView;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    private Toolbar mToolbar;
    private DrawerLayout mDrawerLayout;
    private NavigationView mNavigationView;
    private ActionBarDrawerToggle mDrawerToggle;
    private TextView tvTitle;

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

        initView();
        initToolbar();
        initDrawer();
        initNavigationViewListener();
    }

    private void initView() {
        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        mNavigationView = (NavigationView) findViewById(R.id.navigation_drawer);
        mToolbar = (Toolbar) findViewById(R.id.toolbar);
        tvTitle = (TextView) findViewById(R.id.tv_title);
    }

    private void initToolbar() {
        setSupportActionBar(mToolbar);
        getSupportActionBar().setDisplayShowHomeEnabled(true);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        getSupportActionBar().setHomeButtonEnabled(true);
    }

    private void initDrawer() {
        mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout,
                mToolbar, R.string.drawer_open, R.string.drawer_close);
        mDrawerLayout.setDrawerListener(mDrawerToggle);
        mDrawerToggle.syncState();
    }

    private void initNavigationViewListener() {
        mNavigationView
                .setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {

                    @Override
                    public boolean onNavigationItemSelected(final MenuItem menuItem) {
                        menuItem.setChecked(true);
                        mDrawerLayout.closeDrawers();

                        new Handler().postDelayed(new Runnable() {
                            @Override
                            public void run() {
                                tvTitle.setText(menuItem.getTitle());
                            }
                        }, 325);

                        return true;
                    }
                });
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}

Modifikasi file “MainActivity.java“, disini kita menggunakan “support.v7.widget.Toolbar“, “support.v7.app.ActionBarDrawerToggle” dan “android.support.design.widget.NavigationView“.

NavigationView mempunyai method “SetNavigationItemSelectedListener” yang menerima objek “OnNavigationItemSelectedListener“. Objek ini mempunyai method “onNavigationItemSelected” dimana parameter yang diterima adalah objek menu yang telah dideklarasikan sebelumnya di file “menu_drawer.xml”. Objek menu ini mempunyai method “setChecked(boolean status)” yang berfungsi memberikan warna background tint untuk item menu yang dipilih / aktif.
Disini digunakan handler sehingga ketika terjadi event click pada menu Navigation Drawer, NavigationView akan menutup terlebih dahulu sebelum melakukan aksi yang ditentukan. Hal ini bertujuan untuk “memperhalus kinerja UI”.

And that’s all hehe, but aplikasi demo ini hanya contoh sederhana dari penggunaan NavigationView. NavigationView ini bisa digunakan lebih dinamis lagi seperti inflate header layout dan layout item menu baik secara statis maupun secara runtime. Mungkin di kesempatan berikutnya akan coba sharing ttg penggunaan NavigationView ini hehe.

Thanx for read 🙂

8 respons untuk ‘[Android] Material Design – Navigation Drawer dengan Navigation View

    1. Terima kasih atas kunjungannya 🙂

      Hmm maksudnya untuk buat intent setiap kali tap di menu drawer ya ?

      kita bisa buat method untuk intent di dalam method “onNavigationItemSelected()” dengan men’switch ID dari menuItem, contoh :


      new Handler().postDelayed(new Runnable() {
      @Override
      public void run() {
      switch(menuItem.getItemId()) {
      case R.id.navigation_item_1:
      Intent intent = new Intent(MainActivity.this, MainActivity.class);
      startActivity(intent);
      break;
      }
      }
      }, 325);

      Suka

      1. Gan dmnya taruh tuh sintak kalau pake contoh program agan di atas? Di MainActivity menggantikan sintak private void initNavigationViewListener??

        Thank gan reply nya

        Suka

  1. Gan nny lg untuk activity selanjutnya gmn caranya biar tampilan sama seperti activity di awal yg isi navigation drawer..
    Sintak sama seperti di MainActivity?? Soalnya kalau pke fragmeny dy pake manager fragment.. kalau disini gmn gan??
    Saya newbie gan lg pngin bljr 🙂

    Suka

    1. terimakasih sudah berkunjung 🙂

      untuk id ‘action_setting’ itu otomatis di’generate dari file ‘res/menu.xml’ yang berfungsi sebagai resources untuk menu action (menu di action bar).. biasanya file ‘menu.xml’ ini dibuat otomatis ketika kita membuat project baru di Android Studio. Tapi jika tidak ada kita bisa membuatnya secara manual, dan membuat menu-menu di dalamnya, contoh :

      <item
              android:id="@+id/action_settings"
              android:orderInCategory="100"
              android:title="Settings"
              app:showAsAction="never" />
      

      Suka

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout /  Ubah )

Foto Google

You are commenting using your Google account. Logout /  Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout /  Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout /  Ubah )

Connecting to %s