Wednesday, October 7, 2015

Menu Drawable (Menu Samping) Android Part 1

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 

No comments:

Post a Comment