[Android] Membuat Navigation Drawer (Material Design) dengan Support Library

navigation drawer

**Update : NavigationView dengan Support Design Library : NavigationView

Ditemani bercangkir-cangkir kopi n “that’s so you”nya rocket summer haha, this time we’ll talk about material design. Sejak pertama kali dilaunching di Android 5.0 (Lollipop) n diupgrade di Android 6.0 (Marshmallow), material design sekarang bisa dibilang jadi standar baru untuk aplikasi Android. Tapi bukan berarti device yang pake API di bawah Lollipop ngga bisa ngerasain aplikasi yg menggunakan material design, soalnya Google ngerilis support library untuk backward compatibility sampe API 7 (Eclair). Support library ini dinamain “support library v7 appcompat”. Nah kali ini ceritanya kita akan coba bikin Navigation Drawer yang kaya di aplikasi Gmail, dengan bantuan support library untuk material design’nya. So let’s start 🙂

*Untuk download aplikasi dan icon-icon yg digunakan bisa klik disini

1. Download Android Support Libray v23 dan SDK Platform 6.0
Disini gw pake Eclipse, untuk Android Studio mungkin ada langkah yang sedikit berbeda, tapi intinya sama. Pertama, buka window SDK Manager kemudian install support library v23 dan Android SDK-Platform 6.0 (API 23), soalnya untuk menggunakan material design dengan support library, versi support library dan target SDK project harus sama.

sdk manager 1

sdk manager 2

2. Import support library v7 appcompat menjadi library project.
Langkah berikutnya adalah meng’import support library yang baru aja didownload (v23) ke dalam bentuk library project. **~Ngga kaya biasanya dimana kita tinggal copy file “.jar” ke dalam direktori “lib”~**. Langkah-langkahnya :

  • Klik menu “File” -> “Import…” -> “Android” -> “Existing Android Code Into Workspace“.
  • import 1
  • Next klik “Browse…” dan pilih direktori “appcompat” yang mempunyai path : “adt-bundle…/sdk/extras/android/support/v7“. Setelah itu klik “OK“.
  • Pada window berikutnya centang opsi “Copy projects into workspace“, kemudian klik “Finish“.
  • import 2
  • Setelah itu akan terlihat library project baru bernama “android-support-v7-appcompat” di workspace.
  • Expand library project “android-support-v7-appcompat” dan expand direktori “libs“, kemudian klik kanan file “android-support-v4.jar” -> “Build Path” -> “Add to build path“. Lakukan hal yang sama untuk file “android-support-v7-appcompat.jar“.
  • Klik kanan library project “android-support-v7-appcompat“, kemudian pilih “Properties” lalu centang checkbox “Android 6.0“. Setelah itu pilih menu “Java Build Path” dan pilih tab “Order and Export“. Kemudian centang checkbox library “android-support-v4.jar” dan “android-support-v7-appcompat.jar“. Jangan centang checkbox “Android Dependencies“. Klik “OK“.
  • import 3
  • Clean library project “android-support-v7-appcompat“.

Nah sampe sini langkah import support library v7 appcompat udah beres hehe, untuk langkah detailnya bisa dilihat di website developer android.

3. Import support library recyclerview menjadi library project.
Next disini kita akan import support library recyclerview. Recyclerview adalah pengganti untuk listview yang akan digunakan di navigation drawer. Langkah-langkahnya adalah :

  • Klik menu “File” -> “New Android Application Project“.
  • Pada window berikutnya, isi nama aplikasi dengan “RecyclerViewLib“, dan nama package “android.support.v7.recyvlerview“. Untuk min SDK -> API 15, target SDK -> API 23, compile with -> API 23. Untuk themenya bebas. Kemudian klik “Next“.
  • recyclerview 1
  • Pada window berikutnya, centang checkbox “Mark this project as a library” dan “Create Project in Workspace“. Jangan centang checkbox “Create custom launcher icon” dan “Create activity“. Kemudian klik “Finish“.
  • recyclerview 2
  • Langkah berikutnya adalah masuk ke direktori “adt-bundle…/sdk/extras/android/m2repository/com/android/support/recyclerview-v7/22.0.0“. Setelah itu, rename file “recyclerview-v7-22.0.0.aar” menjadi “recyclerview-v7-22.0.0.zip“. Langkah ini dilakukan karena kita akan meng’ekstrak isi dari file ini.
  • recyclerview 3
  • Setelah itu ekstrak file yang telah direname tadi, dan copy file “AndroidManifest.xml” yang terdapat di direktori hasil ekstrak ke direktori workspace project (direktori bernama “RecyclerViewLib” di direktori workspace Eclipse). ~Disini kita mengganti file “AndroidManifest.xml” yang digenerate oleh Eclipse dengan file “AndroidManifest.xml” dari support library.~
  • Next kembali ke direktori hasil ekstrak support library di “adt-bundle…/sdk/extras/android/m2repository/com/android/support/recyclerview-v7/22.0.0/recyclerview-v7-22.0.0“. Rename file “classes.jar” menjadi “recyclerview.jar“. Setelah itu, copy file “recyclerview.jar” ke direktori “libs” untuk library project “RecyclerViewLib” yang kita buat di awal.
  • recyclerview 4
  • Selanjutnya masuk ke Eclipse, dan expand direktori “libs“, jika “recyclerview.jar” tidak ada, coba refresh direktori tersebut. ~klik kanan -> refresh~.
  • Langkah selanjutnya dari sini sama dengan saat import support library appcompat-v7. Pertama klik kanan file “android-support-v4.jar” -> “Build Path” -> “Add to Build Path“. Lakukan hal yang sama untuk file “recyclerview.jar“.
  • Next klik kanan library project “RecyclerViewLib” -> “Properties” -> “Android“, dan centang checkbox “Android 6.0” jika belum dicentang.
  • Setelah itu pilih menu “Java Build Path” -> Tab “Order and Export“, dan centang checkbox file “android-support-v4.jar” dan “recyclerview.jar“. Jangan centang checkbox “Android Dependencies“. Klik “OK“.
  • recyclerview 6
  • Clean library project “RecyclerViewLib“.

4. Mulai membuat aplikasi dengan navigation drawer.
Nah akhirnya setelah selesai import support library yang diperlukan, sekarang saatnya kita buat aplikasi yang menggunakan navigation drawer. So klik “File” -> “New Android Application Project“, dan isikan nama aplikasi dan package yang diinginkan. Jangan lupa untuk set target SDK ke API 23, dan compile with ke API 23 juga. Untuk min SDK pilih API 15. Next lengkapi langkah-langkah berikutnya hingga selesai dan project mempunyai “MainActivity.java” dan “activity_main.xml“. Disini nama aplikasi yg gw buat : “NavDrawerDemo“, nama package : “com.bonioctavianus.navdrawerdemo“.

navdrawer 1

    • Langkah pertama adalah menggunakan library project yang sudah kita import sebelumnya (“android-support-v7-appcompat” dan “RecyclerViewLib“). Klik kanan project yang baru dibuat, kemudian pilih “Properties” -> “Android“, kemudian klik “Add” dan pilih library “android-support-v7-appcompat” -> klik “OK“. Lakukan hal yang sama untuk library project “RecyclerViewLib“. Setelah itu klik “Apply” -> “OK” -> Clean Project.
    • navdrawer 2
    • Modifikasi file “strings.xml” :
      <?xml version="1.0" encoding="utf-8"?>
      <resources>
      
          <string name="app_name">Nav Drawer Demo</string>
          <string name="hello_world">Hello world!</string>
          <string name="action_settings">Settings</string>
          <string name="action_search">Search</string>
          <string name="drawer_open">Open</string>
          <string name="drawer_close">Close</string>
          <string name="ic_profile">Icon Profile</string>
          <string name="navmenuicon">Icon Menu</string>
       
          <string name="nav_item_home">Home</string>
          <string name="nav_item_home_sub">View fresh contents</string>
          <string name="nav_item_profile">Account</string>
          <string name="nav_item_profile_sub">Manage your account</string>
          <string name="nav_item_setting">Settings</string>
          <string name="nav_item_setting_sub">Configure settings</string>
          <string name="nav_item_about">About</string>
          <string name="nav_item_about_sub">Get to know about us</string>
      
      </resources>
      
    • Modifikasi file “color.xml” ~jika tidak ada file “color.xml“, buat file android xml baru dengan nama “color.xml” di “/res/values“.
      <?xml version="1.0" encoding="utf-8"?>
      <resources>
          <color name="black">#000000</color>
          <color name="gray">#808080</color>
          <color name="colorPrimary">#FF5722</color>
          <color name="colorPrimaryDark">#FF6F00</color>
          <color name="textColorPrimary">#FFFFFF</color>
          <color name="windowBackground">#FFFFFF</color>
          <color name="navigationBarColor">#000000</color>
          <color name="colorAccent">#FF80AB</color>
      </resources>
      
    • Modifikasi file “dimens.xml” ~jika tidak ada file “dimens.xml“, buat file android xml baru dengan nama “dimens.xml” di “/res/values“.
      <resources>
          <!-- Default screen margins, per the Android Design guidelines. -->
          <dimen name="activity_horizontal_margin">16dp</dimen>
          <dimen name="activity_vertical_margin">16dp</dimen>
          <dimen name="nav_drawer_width">260dp</dimen>
      </resources>
      
    • Modifikasi file “styles.xml” :
      <resources>
       
          <style name="MyTheme" parent="MyTheme.Base"></style>
       
          <style name="MyTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
              <item name="windowNoTitle">true</item>
              <item name="windowActionBar">false</item>
              <item name="colorPrimary">@color/colorPrimary</item>
              <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
              <item name="colorAccent">@color/colorAccent</item>
          </style>
           
      </resources>
      
    • Setelah itu, buka file “AndroidManifest.xml“, dan ganti attribute “theme” menjadi “MyTheme” :
      <?xml version="1.0" encoding="utf-8"?>
      <manifest xmlns:android="http://schemas.android.com/apk/res/android"
          package="com.bonioctavianus.navdrawerdemo"
          android:versionCode="1"
          android:versionName="1.0" >
      
          <uses-sdk
              android:minSdkVersion="15"
              android:targetSdkVersion="23" />
      
          <application
              android:allowBackup="true"
              android:icon="@drawable/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>
      
    • Modifikasi file “main.xml” di “/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=".MainActivity">
       
          <item
              android:id="@+id/action_search"
              android:title="@string/action_search"
              android:orderInCategory="100"
              android:icon="@drawable/ic_action_search"
              app:showAsAction="ifRoom" />
       
          <item
              android:id="@+id/action_settings"
              android:title="@string/action_settings"
              android:orderInCategory="100"
              app:showAsAction="never" />
      </menu>
      
    • Buat file “toolbar.xml” di “/res/layout“, file ini akan menjadi toolbar aplikasi.
      <?xml version="1.0" encoding="utf-8"?>
      <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
          xmlns:local="http://schemas.android.com/apk/res-auto"
          android:id="@+id/toolbar"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:minHeight="?attr/actionBarSize"
          android:background="?attr/colorPrimary"
          local:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
          local:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
      
    • Buat file “nav_drawer_row.xml” di “/res/layout“, file ini akan menjadi layout untuk setiap row dari recyclerview. (untuk setiap item menu).
      <?xml version="1.0" encoding="utf-8"?>
      <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:clickable="true">
          
          <ImageView
              android:id="@+id/img"
              android:layout_width="40dp"
              android:layout_height="40dp"
              android:layout_alignParentLeft="true"
              android:layout_alignParentStart="true"
              android:layout_marginTop="10dp"
              android:layout_marginLeft="10dp"
              android:layout_marginStart="10dp"
              android:layout_marginRight="5dp"
              android:layout_marginEnd="5dp"
              android:scaleType="fitXY"
              android:contentDescription="@string/navmenuicon" />
       
          <TextView
              android:id="@+id/title"
              android:layout_toRightOf="@id/img"
              android:layout_toEndOf="@id/img"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:layout_marginTop="10dp"
              android:layout_marginLeft="5dp"
              android:layout_marginStart="5dp"
              android:layout_marginRight="5dp"
              android:layout_marginEnd="5dp"
              android:textSize="16sp"
              android:textStyle="bold"
              android:textColor="@color/black" />
          
          <TextView
              android:id="@+id/subtitle"
              android:layout_below="@id/title"
              android:layout_toRightOf="@id/img"
              android:layout_toEndOf="@id/img"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:layout_marginTop="3dp"
              android:layout_marginBottom="10dp"
              android:layout_marginLeft="5dp"
              android:layout_marginStart="5dp"
              android:layout_marginRight="5dp"
              android:layout_marginEnd="5dp"
              android:textSize="14sp"
              android:textColor="@color/gray" />
       
      </RelativeLayout>
      
    • Buat file “fragment_navigation_drawer.xml” di “/res/layout“, file ini akan menjadi layout navigation drawer.
      <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:background="@android:color/white" >
      
          <RelativeLayout
              android:id="@+id/nav_header_container"
              android:layout_width="match_parent"
              android:layout_height="140dp"
              android:layout_alignParentTop="true"
              android:background="@drawable/banner" >
      
              <ImageView
                  android:layout_width="100dp"
                  android:layout_height="100dp"
                  android:layout_centerInParent="true"
                  android:scaleType="fitCenter"
                  android:src="@drawable/me"
                  android:contentDescription="@string/ic_profile" />
          </RelativeLayout>
      
          <android.support.v7.widget.RecyclerView
              android:id="@+id/drawerList"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:layout_below="@id/nav_header_container"
              android:layout_marginTop="15dp" />
      
      </RelativeLayout>
      
    • Buat file “fragment_home.xml“, “fragment_account.xml“, “fragment_setting.xml“, dan “fragment_about.xml“. Setiap file ini akan menjadi layout untuk setiap fragment yang akan ditampilkan.
      Fragment Home :

      <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
          xmlns:tools="http://schemas.android.com/tools"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:orientation="vertical" >
      
          <TextView
              android:id="@+id/label"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:layout_alignParentTop="true"
              android:layout_marginTop="100dp"
              android:gravity="center_horizontal"
              android:text="@string/nav_item_home"
              android:textSize="45sp"
              android:textStyle="bold" />
      
          <TextView
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:layout_below="@id/label"
              android:layout_centerInParent="true"
              android:layout_marginTop="10dp"
              android:gravity="center_horizontal"
              android:text="@string/nav_item_home_sub"
              android:textSize="14sp" />
      
      </RelativeLayout>
      

      Fragment Account :

      <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
          xmlns:tools="http://schemas.android.com/tools"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:orientation="vertical" >
      
          <TextView
              android:id="@+id/label"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:layout_alignParentTop="true"
              android:layout_marginTop="100dp"
              android:gravity="center_horizontal"
              android:text="@string/nav_item_profile"
              android:textSize="45sp"
              android:textStyle="bold" />
      
          <TextView
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:layout_below="@id/label"
              android:layout_centerInParent="true"
              android:layout_marginTop="10dp"
              android:gravity="center_horizontal"
              android:text="@string/nav_item_profile_sub"
              android:textSize="14sp" />
      
      </RelativeLayout>
      

      Fragment Setting :

      <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
          xmlns:tools="http://schemas.android.com/tools"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:orientation="vertical" >
      
          <TextView
              android:id="@+id/label"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:layout_alignParentTop="true"
              android:layout_marginTop="100dp"
              android:gravity="center_horizontal"
              android:text="@string/nav_item_setting"
              android:textSize="45sp"
              android:textStyle="bold" />
      
          <TextView
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:layout_below="@id/label"
              android:layout_centerInParent="true"
              android:layout_marginTop="10dp"
              android:gravity="center_horizontal"
              android:text="@string/nav_item_setting_sub"
              android:textSize="14sp" />
      
      </RelativeLayout>
      

      Fragment About :

      <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
          xmlns:tools="http://schemas.android.com/tools"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:orientation="vertical" >
      
          <TextView
              android:id="@+id/label"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:layout_alignParentTop="true"
              android:layout_marginTop="100dp"
              android:gravity="center_horizontal"
              android:text="@string/nav_item_about"
              android:textSize="45sp"
              android:textStyle="bold" />
      
          <TextView
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:layout_below="@id/label"
              android:layout_centerInParent="true"
              android:layout_marginTop="10dp"
              android:gravity="center_horizontal"
              android:text="@string/nav_item_about_sub"
              android:textSize="14sp" />
      
      </RelativeLayout>
      
    • Modifikasi file “activity_main.xml” di “/res/layout“, disini kita membuat layout untuk bagian content utama, navigation drawer, dan meng’include layout “toolbar.xml“. Jangan lupa untuk mengganti attribute “android:name” dengan nama package yang dibuat, diakhiri dengan “.FragmentDrawer“, untuk view “fragment“. FragmentDrawer adalah class yang akan kita buat nanti, yang bertugas untuk mengatur fungsi navigation drawer.
      <android.support.v4.widget.DrawerLayout 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"
          android:id="@+id/drawer_layout"
          android:layout_width="match_parent"
          android:layout_height="match_parent" >
      
          <LinearLayout
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical" >
      
              <LinearLayout
                  android:id="@+id/container_toolbar"
                  android:layout_width="match_parent"
                  android:layout_height="wrap_content"
                  android:orientation="vertical" >
      
                  <include
                      android:id="@+id/toolbar"
                      layout="@layout/toolbar" />
              </LinearLayout>
      
              <FrameLayout
                  android:id="@+id/container_body"
                  android:layout_width="fill_parent"
                  android:layout_height="0dp"
                  android:layout_weight="1" />
          </LinearLayout>
      
          <fragment
              android:id="@+id/fragment_navigation_drawer"
              android:name="com.bonioctavianus.navdrawerdemo.FragmentDrawer"
              android:layout_width="@dimen/nav_drawer_width"
              android:layout_height="match_parent"
              android:layout_gravity="start"
              app:layout="@layout/fragment_navigation_drawer"
              tools:layout="@layout/fragment_navigation_drawer" />
      
      </android.support.v4.widget.DrawerLayout>
      
    • Buat package baru di direktori “src” dan beri nama “model“. Selanjutnya buat class “NavigationModel.java” di package “model“. Class ini akan menjadi model class untuk setiap menu navigation drawer.
    • navdrawer 3
    • package com.bonioctavianus.navdrawerdemo.model;
      
      public class NavigationModel {
          private int icon;
          private String title;
          private String subtitle;
       
          public NavigationModel() {
       
          }
       
          public NavigationModel(int icon, String title, String subtitle) {
              this.icon = icon;
              this.title = title;
              this.subtitle = subtitle;
          }
       
          public int getIcon() {
          	return icon;
          }
          
          public void setIcon(int icon) {
          	this.icon = icon;
          }
          
          public String getTitle() {
              return title;
          }
       
          public void setTitle(String title) {
              this.title = title;
          }
          
          public String getSubtitle() {
              return subtitle;
          }
       
          public void setSubtitle(String subtitle) {
              this.subtitle = subtitle;
          }
      }
      
    • Buat package baru di direktori “src” dan beri nama “adapter“. Selanjutnya buat class “NavigationAdapter.java” di package “adapter“.
    • Class ini akan menjadi adapter untuk navigation drawer.
      package com.bonioctavianus.navdrawerdemo.adapter;
      
      import java.util.Collections;
      import java.util.List;
      
      import android.content.Context;
      import android.support.v7.widget.RecyclerView;
      import android.view.LayoutInflater;
      import android.view.View;
      import android.view.ViewGroup;
      import android.widget.ImageView;
      import android.widget.TextView;
      
      import com.bonioctavianus.navdrawerdemo.R;
      import com.bonioctavianus.navdrawerdemo.model.NavigationModel;
      
      public class NavigationAdapter extends RecyclerView.Adapter<NavigationAdapter.MyViewHolder> {
          List<NavigationModel> data = Collections.emptyList();
          private LayoutInflater inflater;
       
          // constructor
          public NavigationAdapter(Context context, List<NavigationModel> data) {
              inflater = LayoutInflater.from(context);
              this.data = data;
          }
       
          public void delete(int position) {
              data.remove(position);
              notifyItemRemoved(position);
          }
       
          @Override
          public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
              View view = inflater.inflate(R.layout.nav_drawer_row, parent, false);
              MyViewHolder holder = new MyViewHolder(view);
              return holder;
          }
       
          @Override
          public void onBindViewHolder(MyViewHolder holder, int position) {
              NavigationModel current = data.get(position);
              holder.icon.setImageResource(current.getIcon());
              holder.title.setText(current.getTitle());
              holder.subtitle.setText(current.getSubtitle());
          }
       
          @Override
          public int getItemCount() {
              return data.size();
          }
       
          class MyViewHolder extends RecyclerView.ViewHolder {
              ImageView icon;
              TextView title;
              TextView subtitle;
       
              public MyViewHolder(View itemView) {
                  super(itemView);
                  icon = (ImageView) itemView.findViewById(R.id.img);
                  title = (TextView) itemView.findViewById(R.id.title);
                  subtitle = (TextView) itemView.findViewById(R.id.subtitle);
              }
          }
      }
      
    • Buat class “FragmentDrawer.java” di package “navdrawerdemo“, class ini bertugas untuk membuat setiap item menu yang akan ditampilkan, mengatur fungsi show/hide dan touch navigation drawer, dan menginitialize recyclerview.
      package com.bonioctavianus.navdrawerdemo;
      
      import java.util.ArrayList;
      import java.util.List;
      
      import android.content.Context;
      import android.os.Bundle;
      import android.support.v4.app.Fragment;
      import android.support.v4.widget.DrawerLayout;
      import android.support.v7.app.ActionBarDrawerToggle;
      import android.support.v7.widget.LinearLayoutManager;
      import android.support.v7.widget.RecyclerView;
      import android.support.v7.widget.Toolbar;
      import android.util.Log;
      import android.view.GestureDetector;
      import android.view.LayoutInflater;
      import android.view.MotionEvent;
      import android.view.View;
      import android.view.ViewGroup;
      
      import com.bonioctavianus.navdrawerdemo.adapter.NavigationAdapter;
      import com.bonioctavianus.navdrawerdemo.model.NavigationModel;
      
      public class FragmentDrawer extends Fragment {
          private static String TAG = FragmentDrawer.class.getSimpleName();
      
          private RecyclerView recyclerView;
          private ActionBarDrawerToggle mDrawerToggle;
          private DrawerLayout mDrawerLayout;
          private NavigationAdapter adapter;
          private View containerView;
          private FragmentDrawerListener drawerListener;
      
          public FragmentDrawer() {
      
          }
          
          @Override
          public void onCreate(Bundle savedInstanceState) {
              super.onCreate(savedInstanceState);
              Log.d(TAG, "onCreate() starting...");
          }
      
          public void setDrawerListener(FragmentDrawerListener listener) {
              this.drawerListener = listener;
          }
      
          public List<NavigationModel> getData() {
              List<NavigationModel> listNavItem = new ArrayList<NavigationModel>();
              // membuat objek NavigationModel yang akan menjadi judul menu untuk
              // ditampilkan di navigation drawer
              NavigationModel navItem = new NavigationModel(R.drawable.ic_home,
                      getActivity().getResources().getString(R.string.nav_item_home),
                      getActivity().getResources().getString(R.string.nav_item_home_sub));
              NavigationModel navItem2 = new NavigationModel(R.drawable.ic_profile,
                      getActivity().getResources().getString(R.string.nav_item_profile),
                      getActivity().getResources().getString(R.string.nav_item_profile_sub));
              NavigationModel navItem3 = new NavigationModel(R.drawable.ic_setting,
                      getActivity().getResources().getString(R.string.nav_item_setting),
                      getActivity().getResources().getString(R.string.nav_item_setting_sub));
              NavigationModel navItem4 = new NavigationModel(R.drawable.ic_about,
                      getActivity().getResources().getString(R.string.nav_item_about),
                      getActivity().getResources().getString(R.string.nav_item_about_sub));
      
              listNavItem.add(navItem);
              listNavItem.add(navItem2);
              listNavItem.add(navItem3);
              listNavItem.add(navItem4);
              return listNavItem;
          }
      
          @Override
          public View onCreateView(LayoutInflater inflater, ViewGroup container,
                  Bundle savedInstanceState) {
              // inflating view layout
              View layout = inflater.inflate(R.layout.fragment_navigation_drawer,
                      container, false);
              
              // setting recyclerview dan adapternya
              recyclerView = (RecyclerView) layout.findViewById(R.id.drawerList);
              adapter = new NavigationAdapter(getActivity(), getData());
              recyclerView.setAdapter(adapter);
              recyclerView.setLayoutManager(new LinearLayoutManager(getActivity()));
              recyclerView.addOnItemTouchListener(new RecyclerTouchListener(
                      getActivity(), recyclerView, new ClickListener() {
                          @Override
                          public void onClick(View view, int position) {
                              drawerListener.onDrawerItemSelected(view, position);
                              mDrawerLayout.closeDrawer(containerView);
                          }
      
                          @Override
                          public void onLongClick(View view, int position) {
      
                          }
                      }));
      
              return layout;
          }
      
          public void setUp(int fragmentId, DrawerLayout drawerLayout,
                  final Toolbar toolbar) {
              containerView = getActivity().findViewById(fragmentId);
              mDrawerLayout = drawerLayout;
              mDrawerToggle = new ActionBarDrawerToggle(getActivity(), drawerLayout,
                      toolbar, R.string.drawer_open, R.string.drawer_close) {
                  @Override
                  public void onDrawerOpened(View drawerView) {
                      super.onDrawerOpened(drawerView);
                      getActivity().invalidateOptionsMenu();
                  }
      
                  @Override
                  public void onDrawerClosed(View drawerView) {
                      super.onDrawerClosed(drawerView);
                      getActivity().invalidateOptionsMenu();
                  }
      
                  @Override
                  public void onDrawerSlide(View drawerView, float slideOffset) {
                      super.onDrawerSlide(drawerView, slideOffset);
                      toolbar.setAlpha(1 - slideOffset / 2);
                  }
              };
      
              mDrawerLayout.setDrawerListener(mDrawerToggle);
              mDrawerLayout.post(new Runnable() {
                  @Override
                  public void run() {
                      mDrawerToggle.syncState();
                  }
              });
      
          }
      
          public static interface ClickListener {
              public void onClick(View view, int position);
              public void onLongClick(View view, int position);
          }
      
          static class RecyclerTouchListener implements
                  RecyclerView.OnItemTouchListener {
      
              private GestureDetector gestureDetector;
              private ClickListener clickListener;
      
              public RecyclerTouchListener(Context context,
                      final RecyclerView recyclerView,
                      final ClickListener clickListener) {
                  this.clickListener = clickListener;
                  gestureDetector = new GestureDetector(context,
                          new GestureDetector.SimpleOnGestureListener() {
                              @Override
                              public boolean onSingleTapUp(MotionEvent e) {
                                  return true;
                              }
      
                              @Override
                              public void onLongPress(MotionEvent e) {
                                  View child = recyclerView.findChildViewUnder(
                                          e.getX(), e.getY());
                                  if (child != null && clickListener != null) {
                                      clickListener.onLongClick(child,
                                              recyclerView.getChildPosition(child));
                                  }
                              }
                          });
              }
      
              @Override
              public boolean onInterceptTouchEvent(RecyclerView rv, MotionEvent e) {
      
                  View child = rv.findChildViewUnder(e.getX(), e.getY());
                  if (child != null && clickListener != null
                          && gestureDetector.onTouchEvent(e)) {
                      clickListener.onClick(child, rv.getChildPosition(child));
                  }
                  return false;
              }
      
              @Override
              public void onTouchEvent(RecyclerView rv, MotionEvent e) {
              }
      
              public void onRequestDisallowInterceptTouchEvent(
                      boolean disallowIntercept) {
      
              }
          }
      
          public interface FragmentDrawerListener {
              public void onDrawerItemSelected(View view, int position);
          }
      }
      
    • Buat setiap fragment yang akan ditampilkan, disini kita membuat empat fragment, masing-masing untuk fragment home, fragment account, fragment setting, dan fragment about.
      Fragment Home :

      package com.bonioctavianus.navdrawerdemo;
      
      import android.os.Bundle;
      import android.support.v4.app.Fragment;
      import android.view.LayoutInflater;
      import android.view.View;
      import android.view.ViewGroup;
      
      public class FragmentHome extends Fragment {
      	 
      	// constructor
          public FragmentHome() {
          }
       
          @Override
          public void onCreate(Bundle savedInstanceState) {
              super.onCreate(savedInstanceState);
          }
       
          @Override
          public View onCreateView(LayoutInflater inflater, ViewGroup container,
                                   Bundle savedInstanceState) {
              View rootView = inflater.inflate(R.layout.fragment_home, container, false);
       
       
              // inflate layout untuk fragment ini
              return rootView;
          }
      }
      

      Fragment Account :

      package com.bonioctavianus.navdrawerdemo;
      
      import android.os.Bundle;
      import android.support.v4.app.Fragment;
      import android.view.LayoutInflater;
      import android.view.View;
      import android.view.ViewGroup;
      
      public class FragmentAccount extends Fragment {
      	 
      	// constructor
          public FragmentAccount() {
          }
       
          @Override
          public void onCreate(Bundle savedInstanceState) {
              super.onCreate(savedInstanceState);
          }
       
          @Override
          public View onCreateView(LayoutInflater inflater, ViewGroup container,
                                   Bundle savedInstanceState) {
              View rootView = inflater.inflate(R.layout.fragment_account, container, false);
       
       
              // inflate layout untuk fragment ini
              return rootView;
          }
      }
      

      Fragment Setting :

      package com.bonioctavianus.navdrawerdemo;
      
      import android.os.Bundle;
      import android.support.v4.app.Fragment;
      import android.view.LayoutInflater;
      import android.view.View;
      import android.view.ViewGroup;
      
      public class FragmentSetting extends Fragment {
      	 
      	// constructor
          public FragmentSetting() {
          }
       
          @Override
          public void onCreate(Bundle savedInstanceState) {
              super.onCreate(savedInstanceState);
          }
       
          @Override
          public View onCreateView(LayoutInflater inflater, ViewGroup container,
                                   Bundle savedInstanceState) {
              View rootView = inflater.inflate(R.layout.fragment_setting, container, false);
       
       
              // inflate layout untuk fragment ini
              return rootView;
          }
      }
      

      Fragment About :

      package com.bonioctavianus.navdrawerdemo;
      
      import android.os.Bundle;
      import android.support.v4.app.Fragment;
      import android.view.LayoutInflater;
      import android.view.View;
      import android.view.ViewGroup;
      
      public class FragmentAbout extends Fragment {
      	 
      	// constructor
          public FragmentAbout() {
          }
       
          @Override
          public void onCreate(Bundle savedInstanceState) {
              super.onCreate(savedInstanceState);
          }
       
          @Override
          public View onCreateView(LayoutInflater inflater, ViewGroup container,
                                   Bundle savedInstanceState) {
              View rootView = inflater.inflate(R.layout.fragment_about, container, false);
       
       
              // inflate layout untuk fragment ini
              return rootView;
          }
      }
      
    • Modifikasi file “MainActivity.java” :
      package com.bonioctavianus.navdrawerdemo;
      
      import android.os.Bundle;
      import android.support.v4.app.Fragment;
      import android.support.v4.app.FragmentManager;
      import android.support.v4.app.FragmentTransaction;
      import android.support.v4.widget.DrawerLayout;
      import android.support.v7.app.AppCompatActivity;
      import android.support.v7.widget.Toolbar;
      import android.util.Log;
      import android.view.Menu;
      import android.view.MenuItem;
      import android.view.View;
      import android.widget.Toast;
      
      public class MainActivity extends AppCompatActivity implements FragmentDrawer.FragmentDrawerListener {
          private static String TAG = MainActivity.class.getSimpleName();
       
          private Toolbar mToolbar;
          private FragmentDrawer drawerFragment;
       
          @Override
          protected void onCreate(Bundle savedInstanceState) {
          	Log.d(TAG, "onCreate() starting...");
              super.onCreate(savedInstanceState);
              setContentView(R.layout.activity_main);
              
              // initialize toolbar yang akan digunakan
              mToolbar = (Toolbar) findViewById(R.id.toolbar);
       
              // set toolbar untuk supportActionBar
              setSupportActionBar(mToolbar);
              getSupportActionBar().setDisplayShowHomeEnabled(true);
       
              // initialize fragment yang akan menjadi menu navigation drawer
              drawerFragment = (FragmentDrawer)
                      getSupportFragmentManager().findFragmentById(R.id.fragment_navigation_drawer);
              drawerFragment.setUp(R.id.fragment_navigation_drawer, (DrawerLayout) findViewById(R.id.drawer_layout), mToolbar);
              drawerFragment.setDrawerListener(this);
       
              // tampilkan fragment pertama saat aplikasi dimulai
              displayView(0);
          }
       
       
          @Override
          public boolean onCreateOptionsMenu(Menu menu) {
              getMenuInflater().inflate(R.menu.main, menu);
              return true;
          }
       
          @Override
          public boolean onOptionsItemSelected(MenuItem item) {
              int id = item.getItemId();
       
              if (id == R.id.action_settings) {
                  return true;
              }
       
              if(id == R.id.action_search){
                  Toast.makeText(getApplicationContext(), "Search action !", Toast.LENGTH_SHORT).show();
                  return true;
              }
       
              return super.onOptionsItemSelected(item);
          }
       
          @Override
          public void onDrawerItemSelected(View view, int position) {
                  displayView(position);
          }
       
          // switch untuk menampilkan fragment untuk setiap menu yang dipilih
          private void displayView(int position) {
              Fragment fragment = null;
              String title = getString(R.string.app_name);
              switch (position) {
                  case 0:
                      fragment = new FragmentHome();
                      title = getString(R.string.nav_item_home);
                      break;
                  case 1:
                      fragment = new FragmentAccount();
                      title = getString(R.string.nav_item_profile);
                      break;
                  case 2:
                      fragment = new FragmentSetting();
                      title = getString(R.string.nav_item_setting);
                      break;
                  case 3:
                      fragment = new FragmentAbout();
                      title = getString(R.string.nav_item_about);
                      break;
                  default:
                      break;
              }
       
              if (fragment != null) {
                  FragmentManager fragmentManager = getSupportFragmentManager();
                  FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
                  fragmentTransaction.replace(R.id.container_body, fragment);
                  fragmentTransaction.commit();
       
                  // set judul toolbar
                  getSupportActionBar().setTitle(title);
              }
          }
      }
      

Run program and that’s it !! hehe, thx for reading and enjoy material design 🙂

References : Android HiveDeveloper Android, chiragdev

3 respons untuk ‘[Android] Membuat Navigation Drawer (Material Design) dengan Support Library

  1. ngebantu banget artikelnya gan, tapi maaf sebelumnya, saya bbrp hari ini bingung sama langkah yg ini

    Langkah berikutnya adalah masuk ke direktori “adt-bundle…/sdk/extras/android/m2repository/com/android/support/recyclerview-v7/22.0.0“. Setelah itu, rename file “recyclerview-v7-22.0.0.aar” menjadi “recyclerview-v7-22.0.0.zip“. Langkah ini dilakukan karena kita akan meng’ekstrak isi dari file ini.

    soalnya saya ga bisa nemu si file recyclerview-v7-22.0.0.aar itu di dalam direktori/foldernya. sudah saya cari, blm ketemu jg.

    mohon di bantu 🙂

    Suka

    1. Thanx gan commentnya 🙂

      hmm tapi kalau direktori “…/recyclerview-v7/22.0.0” nya ada gan ? seharusnya file “recyclerview-v7-22.0.0.aar” nya ada, tapi package Android Support Library yang ada di SDK Manager harus diinstall terlebih dahulu, mungkin bisa dicek hehe

      Tapi berhubung sekarang ada NavigationView di support design library, Navigation Drawer bisa dibikin lebih simple 🙂

      https://coolnetkid.wordpress.com/2016/02/11/navigation-view/

      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