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 <[Link]
3 xmlns:android="[Link]
4 xmlns:app="[Link]
5 xmlns:tools="[Link]
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 <[Link]
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
</[Link]>
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 <[Link]
9 xmlns:android="[Link]
1 xmlns:app="[Link]
0 xmlns:tools="[Link]
android:layout_width="match_parent"
1 android:layout_height="match_parent"
1 android:fitsSystemWindows="true"
1 tools:context="[Link]
2 ">
1
<[Link]
3 android:layout_width="match_parent"
1 android:layout_height="wrap_content"
4 android:theme="@style/[Link]">
1
5 <[Link]
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/[Link]" />
1
8 </[Link]>
1
<include layout="@layout/content_main" />
9
2
</[Link]>
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="[Link]
7 xmlns:app="[Link]
8 xmlns:tools="[Link]
9 android:layout_width="match_parent"
1 android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
0 tools:context="[Link]
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="[Link]
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/[Link]">
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/[Link].
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="[Link]" />
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 [Link] dalam res=>layout dan masukkan
coding seperti dibawah ini.
[Link]
1 <?xml version="1.0" encoding="utf-8"?>
2 <RelativeLayout
xmlns:android="[Link]
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="[Link]"/>
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="[Link]
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="[Link]"/>
28
29 </LinearLayout>
30
</RelativeLayout>
31
32
33
34
35
36
Buat layout baru dengan nama [Link] dalam res=>layout dan masukkan
coding seperti dibawah ini.
[Link]
1 <?xml version="1.0" encoding="utf-8"?>
2 <RelativeLayout
xmlns:android="[Link]
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="[Link]"/>
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="[Link]
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="[Link]"/>
29
</LinearLayout>
30
31</RelativeLayout>
32
33
34
35
36
Buat layout baru dengan nama [Link] dalam res=>layout dan masukkan
coding seperti dibawah ini.
[Link]
1
2
3 <?xml version="1.0" encoding="utf-8"?>
4 <RelativeLayout
5 xmlns:android="[Link]
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="[Link]"/>
30
31 </LinearLayout>
32
33</RelativeLayout>
34
35
36
Buat layout baru dengan nama [Link] dalam res=>layout dan masukkan
coding seperti dibawah ini.
[Link]
1
2
3
<?xml version="1.0" encoding="utf-8"?>
4 <RelativeLayout
5 xmlns:android="[Link]
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="[Link]"/>
31
</LinearLayout>
32
33</RelativeLayout>
34
35
36
Buat layout baru dengan nama [Link] dalam res=>layout dan masukkan
coding seperti dibawah ini.
[Link]
1
2
3
<?xml version="1.0" encoding="utf-8"?>
4 <RelativeLayout
5 xmlns:android="[Link]
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="[Link]"/>
31
</LinearLayout>
32
33</RelativeLayout>
34
35
36
Buka [Link] 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.
[Link]
1 package [Link];
2
import [Link];
3 import [Link];
4 import [Link];
5 import [Link];
6 import [Link];
import [Link];
7 import [Link];
8 import [Link];
9 import [Link];
10 import [Link];
11 import [Link];
import [Link];
12
13 public class MainActivity extends AppCompatActivity
14 implements
15 [Link] {
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 [Link](savedInstanceState);
25 setContentView([Link].activity_main);
26 toolbar = (Toolbar) findViewById([Link]);
27 setSupportActionBar(toolbar);
28
29 drawer = (DrawerLayout)
findViewById([Link].drawer_layout);
30 ActionBarDrawerToggle toggle = new
31 ActionBarDrawerToggle(
32 this, drawer, toolbar,
33 [Link].navigation_drawer_open,
[Link].navigation_drawer_close);
34 [Link](toggle);
35 [Link]();
36
37 navigationView = (NavigationView)
38 findViewById([Link].nav_view);
39 [Link](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([Link].drawer_layout);
52 if ([Link]([Link])) {
53 [Link]([Link]);
54 } else {
55 [Link]();
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([Link], 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 [Link].
72 int id = [Link]();
73
//noinspection SimplifiableIfStatement
74 if (id == [Link].action_settings) {
75 return true;
76 }
77
78 return [Link](item);
}
79
80 @SuppressWarnings("StatementWithEmptyBody")
81 @Override
82 public boolean onNavigationItemSelected(MenuItem item) {
83 // Handle navigation view item clicks here.
84 int id = [Link]();
85
86
// Untuk memanggil layout dari menu yang dipilih
87 if (id == [Link].nav_camera) {
88 fragment = new Import();
89 callFragment(fragment);
90 } else if (id == [Link].nav_gallery) {
91 fragment = new Gallery();
callFragment(fragment);
92 } else if (id == [Link].nav_slideshow) {
93 fragment = new SlideShow();
94 callFragment(fragment);
95 } else if (id == [Link].nav_manage) {
fragment = new Tools();
96 callFragment(fragment);
97 } else if (id == [Link].nav_share) {
98 fragment = new Share();
99 callFragment(fragment);
100 } else if (id == [Link].nav_send) {
fragment = new Send();
101 callFragment(fragment);
102 }
103
104 drawer = (DrawerLayout)
105findViewById([Link].drawer_layout);
[Link]([Link]);
106 return true;
107 }
108
109 // untuk mengganti isi kontainer menu yang dipiih
110 private void callFragment(Fragment fragment) {
111 fragmentTransaction =
[Link]();
112
113 [Link](fragment);
114 [Link]([Link].frame_container,
115fragment);
116 [Link]();
117 }
118
}
119
120
121
122
123
124
125
126
Buat class baru dengan nama [Link] dan masukkan coding seperti dibawah
ini. Class ini berfungsi untuk tampilan awal ketika aplikasi dijalankan.
[Link]
1 package [Link];
2
3 import [Link];
4 import [Link];
import [Link];
5 import [Link];
6 import [Link];
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 = [Link]([Link], container,
20false);
21
22 getActivity().setTitle("Kuncoro Nav Drawer");
23
return rootView;
24 }
25}
26
27
Buat class baru dengan nama [Link] dan masukkan coding seperti dibawah
ini. Class ini berfungsi untuk tampilan menu Import.
[Link]
1 package [Link];
2
3 import [Link];
4 import [Link];
import [Link];
5 import [Link];
6 import [Link];
7 import [Link];
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)
[Link]([Link].import_main, container, false);
22
23 getActivity().setTitle("Import");
24
return view;
25 }
26}
27
28
Buat class baru dengan nama [Link] dan masukkan coding seperti dibawah
ini. Class ini berfungsi untuk tampilan menu Gallery.
[Link]
1 package [Link];
2
3 import [Link];
import [Link];
4 import [Link];
5 import [Link];
6 import [Link];
7 import [Link];
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)
[Link]([Link], container, false);
21
22 getActivity().setTitle("Gallery");
23
24 return view;
25 }
26}
27
28
Buat class baru dengan nama [Link] dan masukkan coding seperti
dibawah ini. Class ini berfungsi untuk tampilan menu SlideShow.
[Link]
1
2 package [Link];
3
4 import [Link];
import [Link];
5 import [Link];
6 import [Link];
7 import [Link];
8 import [Link];
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 [Link]([Link].slide_show, container, false);
23
getActivity().setTitle("Slideshow");
24
25 return view;
26 }
27}
28
Buat class baru dengan nama [Link] dan masukkan coding seperti dibawah
ini. Class ini berfungsi untuk tampilan menu Tools.
[Link]
1 package [Link];
2
3 import [Link];
4 import [Link];
import [Link];
5 import [Link];
6 import [Link];
7 import [Link];
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) [Link]([Link],
21container, false);
22
getActivity().setTitle("Tools");
23
24 return view;
25 }
26}
27
28
Buat class baru dengan nama [Link] dan masukkan coding seperti dibawah
ini. Class ini berfungsi untuk tampilan menu Share.
[Link]
1 package [Link];
2
3 import [Link];
import [Link];
4 import [Link];
5 import [Link];
6 import [Link];
7 import [Link];
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) [Link]([Link],
container, false);
21
22 getActivity().setTitle("Share");
23
24 return view;
25 }
26}
27
28
Buat class baru dengan nama [Link] dan masukkan coding seperti dibawah
ini. Class ini berfungsi untuk tampilan menu Send.
[Link]
1 package [Link];
2
import [Link];
3 import [Link];
4 import [Link];
5 import [Link];
6 import [Link];
import [Link];
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) [Link]([Link],
20container, false);
21
22 getActivity().setTitle("Send");
23
24 return view;
25 }
26
27
28