Disini kita akan membuat menu samping Android menggunakan Eclipse Juno.
Yang tampilannya seperti ini:
list menu yang ditampilkan
Jika menu Profile dipilih
Jika menu Email dipilih, maka muncul pop up list aplikasi email yang akan kita pakai untuk compose email
Begitu juga seterusnya jika menu lain yang dipilih.
Jadi setiap menu yang kita pilih akan ditampilkan sesuai dengan fragment buatan kita sendiri, kalau pada web istilahnya seperti frame
1.Create new android application dengan nama
MenuDrawable
disini saya menggunakan
Target SDK dan
Compile With :
API 19
dan pada pilihan Create Activity pilih
Navigation Drawer Activity
2. Pada res/values/
strings.xml edit code seperti ini
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
| <?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">MenuDrawable</string>
<string name="menu">Menu</string>
<string name="home">Home</string>
<string name="profile">Profile</string>
<string name="profile_content">Hendro Pardiyanto</string>
<string name="email">Email</string>
<string name="share">Share</string>
<string name="facebook">Facebook</string>
<string name="website">Website</string>
<string name="telp">Telp</string>
<string name="navigation_drawer_open">Open navigation drawer</string>
<string name="navigation_drawer_close">Close navigation drawer</string>
<string name="action_example">Example action</string>
<string name="action_settings">Settings</string>
<string-array name="nav_drawer_item">
<item >Home</item>
<item >Email</item>
<item >Share</item>
<item >Facebook</item>
<item >Website</item>
<item >Telp</item>
</string-array>
</resources>
|
3. Edit
NavigationDrawerFragment.java pada function onCreateView
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| @Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
mDrawerListView = (ListView) inflater.inflate(
R.layout.fragment_navigation_drawer, container, false);
mDrawerListView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
selectItem(position);
}
});
mDrawerListView.setAdapter(new ArrayAdapter<String>(
getActionBar().getThemedContext(),
android.R.layout.simple_list_item_1,
android.R.id.text1,
new String[]{
getString(R.string.home),
getString(R.string.profile),
getString(R.string.email),
getString(R.string.share),
getString(R.string.facebook),
getString(R.string.website),
getString(R.string.telp)
}));
mDrawerListView.setItemChecked(mCurrentSelectedPosition, true);
return mDrawerListView;
}
|
4.Edit
MainActivity.java pada function
onNavigationDrawerItemSelected
*Catatan: Script "getActionBar().setTitle(R.string.****)" (line 8,13,17,21) terkadang menyebabkan error jika anda pada pertama kali create new android application dengan setting Compile With diatas API 19 , Jadi lebih baik tidak usah digunakan/diremarks jika terjadi error, fungsi ini untuk menampilkan judul diatas fragment/halaman
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| @Override
public void onNavigationDrawerItemSelected(int position) {
// update the main content by replacing fragments
Fragment fragment = null;
switch (position) {
case 0:
fragment = new Home();
getActionBar().setTitle(R.string.home);
break;
case 1:
fragment = new Profile();
getActionBar().setTitle(R.string.profile);
break;
case 2:
fragment = new Email();
getActionBar().setTitle(R.string.email);
break;
case 3:
fragment = new Share();
getActionBar().setTitle(R.string.share);
break;
}
FragmentManager fragmentManager = getFragmentManager();// PENTING
fragmentManager.beginTransaction().replace(R.id.container,fragment).commit(); //PENTING
}
|
5. pada
MainActivity.java ubah code ini
1
2
| import android.support.v4.app.Fragment; //PENTING
import android.supprot.v4.app.FragmentManager; //PENTING
|
menjadi Seperti ini agar tidak error
1
2
| import android.app.Fragment; //PENTING
import android.app.FragmentManager; //PENTING
|
6. Selanjutnya kita buat desain tampilan home dengan membuat file
fragment_home.xml di dalam folder layout (disini saya hanya menampilkan textview tulisan Home saja, selanjutnya silahkan kreasikan sesuka anda )
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <?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="match_parent"
android:layout_margin="16dp"
android:orientation="vertical" >
<TextView
android:id="@+id/tv_home"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/home" />
</LinearLayout>
|
7. Buat juga
fragment_profile.xml di folder layout untuk desain tampilan profile
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <?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="match_parent"
android:layout_margin="16dp"
android:orientation="vertical" >
<TextView
android:id="@+id/tv_profile"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/profile" />
<TextView
android:id="@+id/tv_profile_content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/profile_content" />
</LinearLayout>
|
Untuk menu
Email tidak diperlukan tampilan karena kita akan panggil fungsi compose email yang sudah tersedia dari android, begitu juga dengan menu
Share. Selanjutnya kita tinggal membuat Class Java nya untuk memanggil fragment/layout dari menu tersebut
8.Buat Class Java di folder setara MainActivity.java
Class
Home.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| package com.menudrawable;
import android.os.Bundle;
import android.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class Home extends Fragment {
View view;
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {
view = inflater.inflate(R.layout.fragment_home, container, false);
return view;
}
}
|
Class
Profile.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| package com.menudrawable;
import android.os.Bundle;
import android.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class Profile extends Fragment{
View view;
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
view = inflater.inflate(R.layout.fragment_profile, container, false);
return view;
}
}
|
Class
Email.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| package com.menudrawable;
import android.app.Fragment;
import android.content.Intent;
import android.os.Bundle;
public class Email extends Fragment{
Intent intent;
@Override
public void onCreate(Bundle savedInstanceState){
intent=new Intent(Intent.ACTION_SEND);
intent.putExtra(Intent.EXTRA_EMAIL, "hendro05@gmail.com");
intent.putExtra(Intent.EXTRA_SUBJECT, "Mengirim Email Dari Android");
intent.putExtra(Intent.EXTRA_TEXT, "Cara Mengirim Email Menggunakan Intent Di Pemrograman Danroid Dengan Java");
intent.setType("message/rfc822");
startActivity(intent.createChooser(intent, "Pilih Aplikasi Mengirim Email"));
super.onCreate(savedInstanceState);
}
}
|
Class
Share.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| package com.menudrawable;
import android.app.Fragment;
import android.content.Intent;
import android.os.Bundle;
public class Share extends Fragment {
Intent intent;
@Override
public void onCreate(Bundle savedInstanceState) {
intent=new Intent(android.content.Intent.ACTION_SEND);
intent.setType("text/plain");
intent.putExtra(android.content.Intent.EXTRA_SUBJECT, "Aplikasi Menu Drawer \n\n");
intent.putExtra(android.content.Intent.EXTRA_TEXT, "Pada aplikasi ini diterangkan bagaimana cara membuat menu drawable");
startActivity(intent.createChooser(intent, "Sebarkan Aplikasi Ini Dengan : "));
super.onCreate(savedInstanceState);
}
}
|
Jangan lupa beri Permission internet karena kita harus akses internet dalam aplikasi ini dan minSdkVersion ke 11, agar menu berfungsi di file AndroidManifest.xml
9.
AndroidManifest.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
| <?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.menudrawable"
android:versionCode="1"
android:versionName="1.0" >
<uses-sdk
android:minSdkVersion="11"
android:targetSdkVersion="19" />
<uses-permission android:name="android.permission.INTERNET"/>
<application
android:allowBackup="true"
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme" >
<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>
|
Pada dasarnya Untuk Menu lainnya dapat dikembangkan dari contoh diatas, untuk source code menu lainnya nanti akan saya lanjutkan di
part 2.
Untuk SourceCode dapat diunduh
disini