Belajar Android Sliding Menu dengan Navigation DrawerPenulis : Agus Haryantohttp://agusharyanto.netagus.superwriter@gmail.comPembicara Seminar IT, Android Workshop Trainer, Freelance Android Developer

Kalau beberapa waktu lalu para developer menggunakan Dashboard untuk Tampilan Awalnya,

sekarang mereka lebih memilih menggunakan Sliding Menu. Facebook, GMAIL menggunakan

sliding menu kalau istilah didunia development android dikenal dengan nama Navigation Drawer,

disebut Navigation Drawer karena cara kerjanya yang mirip Drawer (Laci). Navigation Drawer

mempunyai kelebihan yaitu menunya hanya muncul jika kita inginkan, sehingga tidak memakan

tempat di layar HP. Penasaran dengan Navigation Drawer, Mari kita buat project Jadwal Pelajaran

yang Navigsinya menggunakan Navigation Drawer

1. Buat Project dengan nama NDJadwalPelajaran

2. Pada directory drawable Tambahkan icon ic_drawable.png

3. Edit string.xml lalu ketikkan kode berikut<?xml version="1.0" encoding="utf-8"?><resources>

<string name="app_name">NDJadwalPelajaran</string> <string name="action_settings">Settings</string> <string name="hello_world">Hello world!</string> <string-array name="menus"> <item >Senin</item> <item >Selasa</item> <item >Rabu</item> <item >Kamis</item> <item >Jumat</item> <item >Tambah Jadwal</item> <item >About</item> </string-array> <string name="drawer_open">Open Drawer</string> <string name="drawer_close">Close Drawer</string> </resources>

4. Edit activity_main.xml lalu ketikkan kode berikut<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/drawer_layout" android:layout_width="match_parent" android:layout_height="match_parent" >

<!-- The main content view -->

<FrameLayout android:id="@+id/content_frame" android:layout_width="match_parent" android:layout_height="match_parent" /> <!-- The navigation drawer -->

<ListView android:id="@+id/drawer_list" android:layout_width="240dp" android:layout_height="match_parent"

android:layout_gravity="start" android:background="#111" android:choiceMode="singleChoice" android:divider="@android:color/transparent" android:dividerHeight="0dp" />

</android.support.v4.widget.DrawerLayout>

5. Buat Layout baru dengan nama drawer_list_item.xml<TextView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@android:id/text1" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="?android:attr/activatedBackgroundIndicator" android:gravity="center_vertical" android:minHeight="?android:attr/listPreferredItemHeightSmall" android:paddingLeft="16dp" android:paddingRight="16dp" android:textAppearance="?android:attr/textAppearanceListItemSmall" android:textColor="#fff" />

6. Buat Layout baru dengan nama jadwalfragment_layout.xml<?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:orientation="vertical" >

<ListView android:id="@+id/listViewJadwal" android:layout_width="match_parent" android:layout_height="wrap_content" > </ListView>

</LinearLayout>

7. Buat Layout baru dengan nama row_jadwal.xml<?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="match_parent" >

<TextView android:id="@+id/textViewRowJam" android:layout_width="75dp" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_alignParentTop="true" android:text="TextView" />

<TextView android:id="@+id/textViewRowPelajaran" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentTop="true"

android:paddingLeft="10dp" android:layout_toRightOf="@+id/textViewRowJam" android:text="TextView" />

</RelativeLayout>

8. Buat Layout baru dengan nama fragment_tambah_jadwal.xml<?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="match_parent" >

<TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_centerVertical="true" android:text="Tambah Jadwal Disini" />

</RelativeLayout>

9. Buat Class baru dengan nama Jadwal.javapackage net.agusharyanto.ndjadwalpelajaran;

public class Jadwal {public String hari="";public String jam="";public String pelajaran="";

public Jadwal (String pday, String ptime, String plesson){this.hari = pday;this.jam = ptime;this.pelajaran = plesson;

}

}

10. Buat Class Baru dengan nama AdapterJadwal.java lalu ketikkan kode berikutpackage net.agusharyanto.ndjadwalpelajaran;

import java.util.ArrayList;

import android.app.Activity;import android.content.Context;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.ArrayAdapter;import android.widget.TextView;

public class AdapterJadwal extends ArrayAdapter<Jadwal> { private Activity activity; private ArrayList<Jadwal> lJadwal;

private static LayoutInflater inflater = null;

public AdapterJadwal (Activity activity, int textViewResourceId,ArrayList<Jadwal> al_Jadwal) { super(activity, textViewResourceId, al_Jadwal); try { this.activity = activity; this.lJadwal = al_Jadwal;

inflater = (LayoutInflater) activity.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

} catch (Exception e) {

} }

public int getCount() { return lJadwal.size(); }

public long getItemId(int position) { return position; }

public static class ViewHolder { public TextView jam; public TextView pelajaran;

}

public View getView(int position, View convertView, ViewGroup parent) { View vi = convertView; final ViewHolder holder; try { if (convertView == null) { vi = inflater.inflate(R.layout.row_jadwal, null); holder = new ViewHolder();

holder.jam = (TextView) vi.findViewById(R.id.textViewRowJam); holder.pelajaran = (TextView) vi.findViewById(R.id.textViewRowPelajaran);

vi.setTag(holder); } else { holder = (ViewHolder) vi.getTag(); }

holder.jam.setText(lJadwal.get(position).jam); holder.pelajaran.setText(lJadwal.get(position).pelajaran);

} catch (Exception e) {

} return vi;

}}

11. Buat Class baru dengan FragmentTambahJadwal.java lalu ketikkan kode berikutpackage net.agusharyanto.ndjadwalpelajaran;

import android.app.Fragment;import android.os.Bundle;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup; public class FragmentTambahJadwal extends Fragment { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) { View v = inflater.inflate(R.layout.fragment_tambah_jadwal, container, false); return v; } }

12. Buat class ListFragment.java lalu ketikkan kode berikutpackage net.agusharyanto.ndjadwalpelajaran;

import java.util.ArrayList;

import android.app.Fragment;import android.os.Bundle;import android.util.Log;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.ListView;import android.widget.TextView; public class ListFragment extends Fragment {

ArrayList <Jadwal> list_jadwal = new ArrayList<Jadwal>();TextView tvhari;ListView listviewJadwal ;

@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,

Bundle savedInstanceState) {

// Retrieving the currently selected item numberint position = getArguments().getInt("position");

String[] menus = getResources().getStringArray(R.array.menus);

// Creating view corresponding to the fragmentView v = inflater.inflate(R.layout.jadwalfragment_layout, container,

false);

listviewJadwal = (ListView) v.findViewById(R.id.listViewJadwal); // Updating the action bar titlegetActivity().getActionBar().setTitle(menus[position]);initData();showJadwal(menus[position]);return v;

}

public void showJadwal(String hari) {Log.d("TAGS","hari:"+hari);

// tvhari.setText("Hari " + hari);ArrayList<Jadwal> jadwal_terpilih = new ArrayList<Jadwal>();

for (int i = 0; i < list_jadwal.size(); i++) {Jadwal jadwal = list_jadwal.get(i);if (jadwal.hari.equals(hari)) {

jadwal_terpilih.add(jadwal);}

}

AdapterJadwal adapterjadwal = new AdapterJadwal(getActivity(), 0,jadwal_terpilih);

listviewJadwal.setAdapter(adapterjadwal);

} public void initData() {

list_jadwal.add(new Jadwal("Senin","08:00-10:00","Matematika"));list_jadwal.add(new Jadwal("Senin","10:00-12:00","Agama Islam"));list_jadwal.add(new Jadwal("Senin","12:00-13:00","Istirahat"));list_jadwal.add(new Jadwal("Senin","13:00-15:00","Fisika"));list_jadwal.add(new Jadwal("Selasa","08:00-10:00","Bahasa Indonesia"));list_jadwal.add(new Jadwal("Selasa","10:00-12:00","Kimia"));list_jadwal.add(new Jadwal("Selasa","12:00-13:00","Istirahat"));list_jadwal.add(new Jadwal("Selasa","13:00-15:00","Biologi"));list_jadwal.add(new Jadwal("Rabu","08:00-10:00","Matematika"));list_jadwal.add(new Jadwal("Rabu","10:00-12:00","Seni Rupa"));list_jadwal.add(new Jadwal("Rabu","12:00-13:00","Istirahat"));list_jadwal.add(new Jadwal("Rabu","13:00-15:00","Bahasa Inggris"));list_jadwal.add(new Jadwal("Kamis","08:00-10:00","Fisika"));list_jadwal.add(new Jadwal("Kamis","10:00-12:00","Penjaskes"));list_jadwal.add(new Jadwal("Kamis","12:00-13:00","Istirahat"));list_jadwal.add(new Jadwal("Kamis","13:00-15:00","Geografi"));list_jadwal.add(new Jadwal("Jumat","08:00-10:00","Pemrograman Java"));list_jadwal.add(new Jadwal("Jumat","10:00-12:00","Pemrograman Android"));list_jadwal.add(new Jadwal("Jumat","12:00-13:00","Istirahat"));list_jadwal.add(new Jadwal("Jumat","13:00-15:00","Logika Algoritma"));

}

}

13. Edit class MainActivity.java lalu ketikkan kode berikutpackage net.agusharyanto.ndjadwalpelajaran;

import android.annotation.SuppressLint;

import android.app.Activity;import android.app.FragmentManager;import android.app.FragmentTransaction;import android.os.Bundle;import android.support.v4.app.ActionBarDrawerToggle;import android.support.v4.widget.DrawerLayout;import android.view.Menu;import android.view.MenuItem;import android.view.View;import android.widget.AdapterView;import android.widget.AdapterView.OnItemClickListener;import android.widget.ArrayAdapter;import android.widget.ListView;

public class MainActivity extends Activity {

// Within which the entire activity is enclosedprivate DrawerLayout mDrawerLayout;

// ListView represents Navigation Drawerprivate ListView mDrawerList;

// ActionBarDrawerToggle indicates the presence of Navigation Drawer in the action bar

private ActionBarDrawerToggle mDrawerToggle;

// Title of the action barprivate String mTitle = "";

@SuppressLint("NewApi")@Overrideprotected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);

mTitle = "Jadwal Pelajaran";getActionBar().setTitle(mTitle);

// Getting reference to the DrawerLayoutmDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);

mDrawerList = (ListView) findViewById(R.id.drawer_list);

// Getting reference to the ActionBarDrawerTogglemDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout,

R.drawable.ic_drawer, R.string.drawer_open,R.string.drawer_close) {

/** Called when drawer is closed */public void onDrawerClosed(View view) {

getActionBar().setTitle(mTitle);invalidateOptionsMenu();

}

/** Called when a drawer is opened */public void onDrawerOpened(View drawerView) {

getActionBar().setTitle("Jadwal Pelajaran");invalidateOptionsMenu();

}

};

// Setting DrawerToggle on DrawerLayoutmDrawerLayout.setDrawerListener(mDrawerToggle);

// Creating an ArrayAdapter to add items to the listview mDrawerListArrayAdapter<String> adapter = new ArrayAdapter<String>(getBaseContext(),

R.layout.drawer_list_item, getResources().getStringArray(R.array.menus));

// Setting the adapter on mDrawerListmDrawerList.setAdapter(adapter);

// Enabling Home buttongetActionBar().setHomeButtonEnabled(true);

// Enabling Up navigationgetActionBar().setDisplayHomeAsUpEnabled(true);

// Setting item click listener for the listview mDrawerListmDrawerList.setOnItemClickListener(new OnItemClickListener() {

@Overridepublic void onItemClick(AdapterView<?> parent, View view,

int position, long id) {

// Getting an array of riversString[] menuItems =

getResources().getStringArray(R.array.menus);

// Currently selected rivermTitle = menuItems[position];if (mTitle.equals("Tambah Jadwal")){

FragmentTambahJadwal fragmentone = new FragmentTambahJadwal();

FragmentManager fragmentManager = getFragmentManager();

// Creating a fragment transactionFragmentTransaction ft =

fragmentManager.beginTransaction();

// Adding a fragment to the fragment transactionft.replace(R.id.content_frame, fragmentone);

// Committing the transactionft.commit();

}else{// Creating a fragment objectListFragment rFragment = new ListFragment();

// Passing selected item information to fragmentBundle data = new Bundle();data.putInt("position", position);//data.putString("url", getUrl(position));rFragment.setArguments(data);

// Getting reference to the FragmentManager

FragmentManager fragmentManager = getFragmentManager();

// Creating a fragment transactionFragmentTransaction ft = fragmentManager.beginTransaction();

// Adding a fragment to the fragment transactionft.replace(R.id.content_frame, rFragment);

// Committing the transactionft.commit();}// Closing the drawermDrawerLayout.closeDrawer(mDrawerList);

}});

}

@Overrideprotected void onPostCreate(Bundle savedInstanceState) {

super.onPostCreate(savedInstanceState);mDrawerToggle.syncState();

}

@Overridepublic boolean onOptionsItemSelected(MenuItem item) {

if (mDrawerToggle.onOptionsItemSelected(item)) {return true;

}return super.onOptionsItemSelected(item);

}

/** Called whenever we call invalidateOptionsMenu() */@Overridepublic boolean onPrepareOptionsMenu(Menu menu) {

// If the drawer is open, hide action items related to the content viewboolean drawerOpen = mDrawerLayout.isDrawerOpen(mDrawerList);

menu.findItem(R.id.action_settings).setVisible(!drawerOpen);return super.onPrepareOptionsMenu(menu);

}

@Overridepublic boolean onCreateOptionsMenu(Menu menu) {

getMenuInflater().inflate(R.menu.main, menu);return true;

}}

14. Mari Kita Run Projectnya, Sentuh Icon Drawer, maka akan keluar menu pilih salah satu hari, akan menampilkan jadwal dihari tersebut.