Buat project baru di Android Studio File New Project.

Kemudian pilih
Navigation Drawer Activity dan melanjutkannya hingga selesai.

activity_main.xml
Layout tampilan navigation drawer.

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

2 <android.support.v4.widget.DrawerLayout
3 xmlns:android="http://schemas.android.com/apk/res/android"
4 xmlns:app="http://schemas.android.com/apk/res-auto"
5 xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/drawer_layout"
6 android:layout_width="match_parent"
7 android:layout_height="match_parent"
8 android:fitsSystemWindows="true"
9 tools:openDrawer="start">
10
<include
11 layout="@layout/app_bar_main"
12 android:layout_width="match_parent"
13 android:layout_height="match_parent" />
14
15 <android.support.design.widget.NavigationView
16 android:id="@+id/nav_view"
android:layout_width="wrap_content"
17 android:layout_height="match_parent"
18 android:layout_gravity="start"
19 android:fitsSystemWindows="true"
20 app:headerLayout="@layout/nav_header_main"
app:menu="@menu/activity_main_drawer" />
21
22
</android.support.v4.widget.DrawerLayout>
23
24
25

app_bar_main.xml
Sebagai tampilan Tootbar widget dan Coordinator Layout.

1
2
3
4
5
6
7 <?xml version="1.0" encoding="utf-8"?>
8 <android.support.design.widget.CoordinatorLayout
9 xmlns:android="http://schemas.android.com/apk/res/android"
1 xmlns:app="http://schemas.android.com/apk/res-auto"
0 xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
1 android:layout_height="match_parent"
1 android:fitsSystemWindows="true"
1 tools:context="com.dedykuncoro.kuncoronavdrawer.MainActivity
2 ">
1
<android.support.design.widget.AppBarLayout
3 android:layout_width="match_parent"
1 android:layout_height="wrap_content"
4 android:theme="@style/AppTheme.AppBarOverlay">
1
5 <android.support.v7.widget.Toolbar
1 android:id="@+id/toolbar"
android:layout_width="match_parent"
6 android:layout_height="?attr/actionBarSize"
1 android:background="?attr/colorPrimary"
7 app:popupTheme="@style/AppTheme.PopupOverlay" />
1
8 </android.support.design.widget.AppBarLayout>
1
<include layout="@layout/content_main" />
9
2
</android.support.design.widget.CoordinatorLayout>
0
2
1
2
2
2
3
2
4
2
5
2
6

content_main.xml
Semua menu pada navigation drawer akan ditampilkan dalam container frame
layout.

1
2
3
4
5 <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
6 xmlns:android="http://schemas.android.com/apk/res/android"
7 xmlns:app="http://schemas.android.com/apk/res-auto"
8 xmlns:tools="http://schemas.android.com/tools"
9 android:layout_width="match_parent"
1 android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
0 tools:context="com.dedykuncoro.kuncoronavdrawer.MainActivity
1 "
1 tools:showIn="@layout/app_bar_main">
1
2 <FrameLayout
android:id="@+id/frame_container"
1
android:layout_width="match_parent"
3 android:layout_height="match_parent" />
1
4 </RelativeLayout>
1
5
1
6

nav_header_main.xml
Sebagai tampilan header dari navigation drawer.

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

2 <LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
3 android:layout_width="match_parent"
4 android:layout_height="@dimen/nav_header_height"
5 android:background="@drawable/side_nav_bar"
6 android:gravity="bottom"
android:orientation="vertical"
7 android:paddingBottom="@dimen/activity_vertical_margin"
8 android:paddingLeft="@dimen/activity_horizontal_margin"
9 android:paddingRight="@dimen/activity_horizontal_margin"
1 android:paddingTop="@dimen/activity_vertical_margin"
android:theme="@style/ThemeOverlay.AppCompat.Dark">
0
1 <ImageView
1 android:id="@+id/imageView"
1 android:layout_gravity="center"
2 android:layout_width="wrap_content"
1 android:layout_height="wrap_content"
android:paddingTop="@dimen/nav_header_vertical_spacing"
3 android:background="@mipmap/ic_launcher" />
1
4 <TextView
1 android:layout_width="wrap_content"
5 android:layout_height="wrap_content"
android:layout_gravity="center"
1 android:paddingTop="@dimen/nav_header_vertical_spacing"
6 android:text="Dedy Kuncoro"
1 android:textAppearance="@style/TextAppearance.AppCompat.
7 Body1" />
1
8 <TextView
android:id="@+id/textView"
1 android:layout_gravity="center"
9 android:layout_width="wrap_content"
2 android:layout_height="wrap_content"
0 android:text="www.dedykuncoro.com" />
2
1 </LinearLayout>
2
2
2
3
2
4
2
5
2
6
2
7
2
8
2
9
3
0
3
1
3
2
3
3
3
4
3
5
3
6
3
7

Buat layout baru dengan nama root.xml dalam res=>layout dan masukkan
coding seperti dibawah ini.
root.xml

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

2 <RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
3 android:layout_width="match_parent"
4 android:layout_height="match_parent">
5
6 <LinearLayout
7 android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
8
android:layout_width="wrap_content"
9 android:layout_height="wrap_content"
10 android:orientation="vertical">
11
12 <ImageView
13 android:layout_gravity="center"
android:layout_width="wrap_content"
14 android:layout_height="wrap_content"
15 android:background="@mipmap/ic_launcher"/>
16
17 <TextView
18 android:layout_gravity="center"
19 android:layout_width="wrap_content"
android:layout_height="wrap_content"
20 android:textSize="16dp"
21 android:textStyle="bold"
22 android:text="Dedy Kuncoro"/>
23
24 <TextView
25 android:layout_gravity="center"
android:layout_width="wrap_content"
26 android:layout_height="wrap_content"
27 android:text="www.dedykuncoro.com"/>
28
29 </LinearLayout>
30
31</RelativeLayout>
32
33
34
35
36

Buat layout baru dengan nama import_main.xml dalam res=>layout dan

masukkan coding seperti dibawah ini.
import_main.xml

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

2 <RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
3 android:layout_width="match_parent"
4 android:layout_height="match_parent">
5
6 <LinearLayout
7 android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
8 android:layout_width="wrap_content"
9 android:layout_height="wrap_content"
10 android:orientation="vertical">
11
12 <ImageView
android:layout_gravity="center"
13 android:layout_width="wrap_content"
14 android:layout_height="wrap_content"
15 android:background="@drawable/ic_menu_camera"/>
16
17 <TextView
18 android:layout_gravity="center"
android:layout_width="wrap_content"
19 android:layout_height="wrap_content"
20 android:textSize="16dp"
21 android:textStyle="bold"
22 android:text="Import Menu"/>
23
<TextView
24
android:layout_gravity="center"
25 android:layout_width="wrap_content"
26 android:layout_height="wrap_content"
27 android:text="www.dedykuncoro.com"/>
28
29 </LinearLayout>
30
</RelativeLayout>
31
32
33
34
35
36

Buat layout baru dengan nama gallery.xml dalam res=>layout dan masukkan
coding seperti dibawah ini.
gallery.xml

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

2 <RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
3 android:layout_width="match_parent"
4 android:layout_height="match_parent">
5
6 <LinearLayout
7 android:layout_centerHorizontal="true"
8 android:layout_centerVertical="true"
android:layout_width="wrap_content"
9 android:layout_height="wrap_content"
10 android:orientation="vertical">
11
12 <ImageView
13 android:layout_gravity="center"
android:layout_width="wrap_content"
14 android:layout_height="wrap_content"
15 android:background="@drawable/ic_menu_gallery"/>
16
17 <TextView
18 android:layout_gravity="center"
19 android:layout_width="wrap_content"
android:layout_height="wrap_content"
20 android:textSize="16dp"
21 android:textStyle="bold"
22 android:text="Gallery Menu"/>
23
24 <TextView
android:layout_gravity="center"
25
android:layout_width="wrap_content"
26 android:layout_height="wrap_content"
27 android:text="www.dedykuncoro.com"/>
28
29 </LinearLayout>
30
31</RelativeLayout>
32
33
34
35
36

Buat layout baru dengan nama slide_show.xml dalam res=>layout dan masukkan
coding seperti dibawah ini.
slide_show.xml

1
<?xml version="1.0" encoding="utf-8"?>
2 <RelativeLayout
3 xmlns:android="http://schemas.android.com/apk/res/android"
4 android:layout_width="match_parent"
5 android:layout_height="match_parent">
6
<LinearLayout
7
android:layout_centerHorizontal="true"
8 android:layout_centerVertical="true"
9 android:layout_width="wrap_content"
10 android:layout_height="wrap_content"
11 android:orientation="vertical">
12
<ImageView
13 android:layout_gravity="center"
14 android:layout_width="wrap_content"
15 android:layout_height="wrap_content"
16 android:background="@drawable/ic_menu_slideshow"/>
17
18 <TextView
android:layout_gravity="center"
19 android:layout_width="wrap_content"
20 android:layout_height="wrap_content"
21 android:textSize="16dp"
22 android:textStyle="bold"
android:text="Slideshow Menu"/>
23
24 <TextView
25 android:layout_gravity="center"
26 android:layout_width="wrap_content"
27 android:layout_height="wrap_content"
28 android:text="www.dedykuncoro.com"/>
29
</LinearLayout>
30
31</RelativeLayout>
32
33
34
35
36

Buat layout baru dengan nama tools.xml dalam res=>layout dan masukkan
coding seperti dibawah ini.
tools.xml

1
2
3 <?xml version="1.0" encoding="utf-8"?>
4 <RelativeLayout
5 xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
6 android:layout_height="match_parent">
7
8 <LinearLayout
9 android:layout_centerHorizontal="true"
10 android:layout_centerVertical="true"
android:layout_width="wrap_content"
11 android:layout_height="wrap_content"
12 android:orientation="vertical">
13
14 <ImageView
15 android:layout_gravity="center"
16 android:layout_width="wrap_content"
android:layout_height="wrap_content"
17 android:background="@drawable/ic_menu_manage"/>
18
19 <TextView
20 android:layout_gravity="center"
21 android:layout_width="wrap_content"
android:layout_height="wrap_content"
22 android:textSize="16dp"
23 android:textStyle="bold"
24 android:text="Tools Menu"/>
25
26 <TextView
27 android:layout_gravity="center"
android:layout_width="wrap_content"
28 android:layout_height="wrap_content"
29 android:text="www.dedykuncoro.com"/>
30
31 </LinearLayout>
32
33</RelativeLayout>
34
35
36

Buat layout baru dengan nama share.xml dalam res=>layout dan masukkan
coding seperti dibawah ini.
share.xml

1
2
3
<?xml version="1.0" encoding="utf-8"?>
4 <RelativeLayout
5 xmlns:android="http://schemas.android.com/apk/res/android"
6 android:layout_width="match_parent"
7 android:layout_height="match_parent">
8
<LinearLayout
9
android:layout_centerHorizontal="true"
10 android:layout_centerVertical="true"
11 android:layout_width="wrap_content"
12 android:layout_height="wrap_content"
13 android:orientation="vertical">
14
<ImageView
15 android:layout_gravity="center"
16 android:layout_width="wrap_content"
17 android:layout_height="wrap_content"
18 android:background="@drawable/ic_menu_share"/>
19
20 <TextView
android:layout_gravity="center"
21 android:layout_width="wrap_content"
22 android:layout_height="wrap_content"
23 android:textSize="16dp"
24 android:textStyle="bold"
android:text="Share Menu"/>
25
26 <TextView
27 android:layout_gravity="center"
28 android:layout_width="wrap_content"
29 android:layout_height="wrap_content"
30 android:text="www.dedykuncoro.com"/>
31
</LinearLayout>
32
33</RelativeLayout>
34
35
36
Buat layout baru dengan nama send.xml dalam res=>layout dan masukkan
coding seperti dibawah ini.
send.xml

1
2
3
<?xml version="1.0" encoding="utf-8"?>
4 <RelativeLayout
5 xmlns:android="http://schemas.android.com/apk/res/android"
6 android:layout_width="match_parent"
7 android:layout_height="match_parent">
8
<LinearLayout
9
android:layout_centerHorizontal="true"
10 android:layout_centerVertical="true"
11 android:layout_width="wrap_content"
12 android:layout_height="wrap_content"
13 android:orientation="vertical">
14
<ImageView
15 android:layout_gravity="center"
16 android:layout_width="wrap_content"
17 android:layout_height="wrap_content"
18 android:background="@drawable/ic_menu_send"/>
19
20 <TextView
android:layout_gravity="center"
21 android:layout_width="wrap_content"
22 android:layout_height="wrap_content"
23 android:textSize="16dp"
24 android:textStyle="bold"
android:text="Send Menu"/>
25
26 <TextView
27 android:layout_gravity="center"
28 android:layout_width="wrap_content"
29 android:layout_height="wrap_content"
30 android:text="www.dedykuncoro.com"/>
31
</LinearLayout>
32
33</RelativeLayout>
34
35
36

Buka MainActivity.java kemudian edit coding-nya seperti dibawah ini. Class ini
berfungsi untuk memanggil menu-menu yang ada dalam navigation drawer
kemudian di tampilkan pada frame layout.
MainActivity.java

1 package com.dedykuncoro.kuncoronavdrawer;
2
import android.app.Fragment;
3 import android.app.FragmentManager;
4 import android.app.FragmentTransaction;
5 import android.os.Bundle;
6 import android.support.design.widget.NavigationView;
import android.support.v4.view.GravityCompat;
7 import android.support.v4.widget.DrawerLayout;
8 import android.support.v7.app.ActionBarDrawerToggle;
9 import android.support.v7.app.AppCompatActivity;
10 import android.support.v7.widget.Toolbar;
11 import android.view.Menu;
import android.view.MenuItem;
12
13 public class MainActivity extends AppCompatActivity
14 implements
15 NavigationView.OnNavigationItemSelectedListener {
16
17 Toolbar toolbar;
DrawerLayout drawer;
18
NavigationView navigationView;
19 FragmentManager fragmentManager;
20 FragmentTransaction fragmentTransaction;
21 Fragment fragment = null;
22
23 @Override
protected void onCreate(Bundle savedInstanceState) {
24 super.onCreate(savedInstanceState);
25 setContentView(R.layout.activity_main);
26 toolbar = (Toolbar) findViewById(R.id.toolbar);
27 setSupportActionBar(toolbar);
28
29 drawer = (DrawerLayout)
findViewById(R.id.drawer_layout);
30 ActionBarDrawerToggle toggle = new
31 ActionBarDrawerToggle(
32 this, drawer, toolbar,
33 R.string.navigation_drawer_open,
R.string.navigation_drawer_close);
34 drawer.setDrawerListener(toggle);
35 toggle.syncState();
36
37 navigationView = (NavigationView)
38 findViewById(R.id.nav_view);
39 navigationView.setNavigationItemSelectedListener(this);
40
fragmentManager = getFragmentManager();
41
42 // tampilan default awal ketika aplikasii dijalankan
43 if (savedInstanceState == null) {
44 fragment = new Root();
45 callFragment(fragment);
}
46
47 }
48
49 @Override
50 public void onBackPressed() {
51 drawer = (DrawerLayout)
findViewById(R.id.drawer_layout);
52 if (drawer.isDrawerOpen(GravityCompat.START)) {
53 drawer.closeDrawer(GravityCompat.START);
54 } else {
55 super.onBackPressed();
56 }
}
57
58 @Override
59 public boolean onCreateOptionsMenu(Menu menu) {
60 // Inflate the menu; this adds items to the action bar
61 if it is present.
getMenuInflater().inflate(R.menu.main, menu);
62 return true;
63 }
64
65 @Override
66 public boolean onOptionsItemSelected(MenuItem item) {
67 // Handle action bar item clicks here. The action bar
will
68 // automatically handle clicks on the Home/Up button,
69 so long
70 // as you specify a parent activity in
71 AndroidManifest.xml.
72 int id = item.getItemId();
73
//noinspection SimplifiableIfStatement
74 if (id == R.id.action_settings) {
75 return true;
76 }
77
78 return super.onOptionsItemSelected(item);
}
79
80 @SuppressWarnings("StatementWithEmptyBody")
81 @Override
82 public boolean onNavigationItemSelected(MenuItem item) {
83 // Handle navigation view item clicks here.
84 int id = item.getItemId();
85
86
// Untuk memanggil layout dari menu yang dipilih
87 if (id == R.id.nav_camera) {
88 fragment = new Import();
89 callFragment(fragment);
90 } else if (id == R.id.nav_gallery) {
91 fragment = new Gallery();
callFragment(fragment);
92 } else if (id == R.id.nav_slideshow) {
93 fragment = new SlideShow();
94 callFragment(fragment);
95 } else if (id == R.id.nav_manage) {
fragment = new Tools();
96 callFragment(fragment);
97 } else if (id == R.id.nav_share) {
98 fragment = new Share();
99 callFragment(fragment);
100 } else if (id == R.id.nav_send) {
fragment = new Send();
101 callFragment(fragment);
102 }
103
104 drawer = (DrawerLayout)
105findViewById(R.id.drawer_layout);
drawer.closeDrawer(GravityCompat.START);
106 return true;
107 }
108
109 // untuk mengganti isi kontainer menu yang dipiih
110 private void callFragment(Fragment fragment) {
111 fragmentTransaction =
fragmentManager.beginTransaction();
112
113 fragmentTransaction.remove(fragment);
114 fragmentTransaction.replace(R.id.frame_container,
115fragment);
116 fragmentTransaction.commit();
117 }
118
}
119
120
121
122
123
124
125
126

Buat class baru dengan nama Root.java dan masukkan coding seperti dibawah
ini. Class ini berfungsi untuk tampilan awal ketika aplikasi dijalankan.
Root.java

1 package com.dedykuncoro.kuncoronavdrawer;
2
3 import android.app.Fragment;
4 import android.os.Bundle;
import android.view.LayoutInflater;
5 import android.view.View;
6 import android.view.ViewGroup;
7
8 /**
9 * Created by Kuncoro on 22/03/2016.
*/
10public class Root extends Fragment {
11
12 public Root(){}
13 View rootView;
14
15 @Override
16 public View onCreateView(LayoutInflater inflater, ViewGroup
container,
17 Bundle savedInstanceState) {
18
19 rootView = inflater.inflate(R.layout.root, container,
20false);
21
22 getActivity().setTitle("Kuncoro Nav Drawer");
23
return rootView;
24 }
25}
26
27

Buat class baru dengan nama Import.java dan masukkan coding seperti dibawah
ini. Class ini berfungsi untuk tampilan menu Import.
Import.java

1 package com.dedykuncoro.kuncoronavdrawer;
2
3 import android.app.Fragment;
4 import android.os.Bundle;
import android.view.LayoutInflater;
5 import android.view.View;
6 import android.view.ViewGroup;
7 import android.widget.RelativeLayout;
8
9 /**
10 **/Created by Kuncoro on 22/03/2016.
11public class Import extends Fragment {
12
13 public Import(){}
14 RelativeLayout view;
15
16 @Override
17 public View onCreateView(LayoutInflater inflater, ViewGroup
container,
18 Bundle savedInstanceState) {
19
20 view = (RelativeLayout)
21inflater.inflate(R.layout.import_main, container, false);
22
23 getActivity().setTitle("Import");
24
return view;
25 }
26}
27
28

Buat class baru dengan nama Gallery.java dan masukkan coding seperti dibawah
ini. Class ini berfungsi untuk tampilan menu Gallery.
Gallery.java

1 package com.dedykuncoro.kuncoronavdrawer;
2
3 import android.app.Fragment;
import android.os.Bundle;
4 import android.view.LayoutInflater;
5 import android.view.View;
6 import android.view.ViewGroup;
7 import android.widget.RelativeLayout;
8
/**
9 * Created by Kuncoro on 22/03/2016.
10 */
11public class Gallery extends Fragment {
12
13 public Gallery(){}
14 RelativeLayout view;
15
@Override
16 public View onCreateView(LayoutInflater inflater, ViewGroup
17container,
18 Bundle savedInstanceState) {
19
20 view = (RelativeLayout)
inflater.inflate(R.layout.gallery, container, false);
21
22 getActivity().setTitle("Gallery");
23
24 return view;
25 }
26}
27
28

Buat class baru dengan nama ShideShow.java dan masukkan coding seperti
dibawah ini. Class ini berfungsi untuk tampilan menu SlideShow.
SlideShow.java

1
2 package com.dedykuncoro.kuncoronavdrawer;
3
4 import android.app.Fragment;
import android.os.Bundle;
5 import android.view.LayoutInflater;
6 import android.view.View;
7 import android.view.ViewGroup;
8 import android.widget.RelativeLayout;
9
10/**
* Created by Kuncoro on 22/03/2016.
11 */
12public class SlideShow extends Fragment {
13
14 public SlideShow(){}
15 RelativeLayout view;
16
@Override
17 public View onCreateView(LayoutInflater inflater, ViewGroup
18container,
19 Bundle savedInstanceState) {
20
21 view = (RelativeLayout)
22 inflater.inflate(R.layout.slide_show, container, false);
23
getActivity().setTitle("Slideshow");
24
25 return view;
26 }
27}
28

Buat class baru dengan nama Tools.java dan masukkan coding seperti dibawah
ini. Class ini berfungsi untuk tampilan menu Tools.
Tools.java

1 package com.dedykuncoro.kuncoronavdrawer;
2
3 import android.app.Fragment;
4 import android.os.Bundle;
import android.view.LayoutInflater;
5 import android.view.View;
6 import android.view.ViewGroup;
7 import android.widget.RelativeLayout;
8
9 /**
10 **/Created by Kuncoro on 22/03/2016.
11public class Tools extends Fragment {
12
13 public Tools(){}
14 RelativeLayout view;
15
16 @Override
public View onCreateView(LayoutInflater inflater, ViewGroup
17container,
18 Bundle savedInstanceState) {
19
20 view = (RelativeLayout) inflater.inflate(R.layout.tools,
21container, false);
22
getActivity().setTitle("Tools");
23
24 return view;
25 }
26}
27
28

Buat class baru dengan nama Share.java dan masukkan coding seperti dibawah
ini. Class ini berfungsi untuk tampilan menu Share.
Share.java

1 package com.dedykuncoro.kuncoronavdrawer;
2
3 import android.app.Fragment;
import android.os.Bundle;
4 import android.view.LayoutInflater;
5 import android.view.View;
6 import android.view.ViewGroup;
7 import android.widget.RelativeLayout;
8
9 /**
* Created by Kuncoro on 22/03/2016.
10 */
11public class Share extends Fragment {
12
13 public Share(){}
14 RelativeLayout view;
15
@Override
16 public View onCreateView(LayoutInflater inflater, ViewGroup
17container,
18 Bundle savedInstanceState) {
19
20 view = (RelativeLayout) inflater.inflate(R.layout.share,
container, false);
21
22 getActivity().setTitle("Share");
23
24 return view;
25 }
26}
27
28

Buat class baru dengan nama Send.java dan masukkan coding seperti dibawah
ini. Class ini berfungsi untuk tampilan menu Send.
Send.java

1 package com.dedykuncoro.kuncoronavdrawer;
2
import android.app.Fragment;
3 import android.os.Bundle;
4 import android.view.LayoutInflater;
5 import android.view.View;
6 import android.view.ViewGroup;
import android.widget.RelativeLayout;
7
8 /**
9 * Created by Kuncoro on 22/03/2016.
10 */
11public class Send extends Fragment {
12
13 public Send(){}
RelativeLayout view;
14
15 @Override
16 public View onCreateView(LayoutInflater inflater, ViewGroup
17container,
18 Bundle savedInstanceState) {
19
view = (RelativeLayout) inflater.inflate(R.layout.send,
20container, false);
21
22 getActivity().setTitle("Send");
23
24 return view;
25 }
26
27
28