Anda mungkin telah memperhatikan bahwa beberapa android aplication di awali dengan sliding panel menu untuk memandu atau mengarahkan ke fungsi utama sebuah aplikasi. Sebelumnya UI semacam ini telah ada mengunakan beberapa third party libraries dimana list view dan beberapa swiping gesture di gunakan untuk menyelesaikan ini. Tetapi untuk saat official android sendiri telah memperkenalkan sliding panel menu dg memperkenalakan konsep baru yg di namakan Navigation Drawer.

Kebanyakan dari Sliding Menu (Navigation Drawer) di sembunyikan dan dapat di lihat dengan swiping screen dari kiri ke kanan atau tapping icon pada action bar.

Pada Tutorial in kita akan belajar bagaimana mengunakan navigation drawer untuk menambahkan sliding menu pada aplikasi anda.

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 :

1 2 3 4 5 6

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

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18

<?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 :

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22

<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

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

<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 :

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71

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 :

sumber : http://www.twoh.co/