Belajar Android Sliding Menu dengan Navigation Drawer

Penulis : Agus Haryanto

http://agusharyanto.net
agus.superwriter@gmail.com
Pembicara 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.java

package 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 berikut
package net.agusharyanto.ndjadwalpelajaran;
import java.util.ArrayList;
import
import
import
import
import
import
import

android.app.Activity;
android.content.Context;
android.view.LayoutInflater;
android.view.View;
android.view.ViewGroup;
android.widget.ArrayAdapter;
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 berikut
package net.agusharyanto.ndjadwalpelajaran;
import
import
import
import
import

android.app.Fragment;
android.os.Bundle;
android.view.LayoutInflater;
android.view.View;
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 berikut

package net.agusharyanto.ndjadwalpelajaran;
import java.util.ArrayList;
import
import
import
import
import
import
import
import

android.app.Fragment;
android.os.Bundle;
android.util.Log;
android.view.LayoutInflater;
android.view.View;
android.view.ViewGroup;
android.widget.ListView;
android.widget.TextView;

public class ListFragment extends Fragment {

ArrayList <Jadwal> list_jadwal = new ArrayList<Jadwal>();
TextView tvhari;
ListView listviewJadwal ;
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Retrieving the currently selected item number
int position = getArguments().getInt("position");
String[] menus = getResources().getStringArray(R.array.menus);
// Creating view corresponding to the fragment
View v = inflater.inflate(R.layout.jadwalfragment_layout, container,
false);

listviewJadwal = (ListView) v.findViewById(R.id.listViewJadwal);

// Updating the action bar title
getActivity().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
list_jadwal.add(new
list_jadwal.add(new
list_jadwal.add(new
list_jadwal.add(new
list_jadwal.add(new
list_jadwal.add(new
list_jadwal.add(new
list_jadwal.add(new
list_jadwal.add(new
list_jadwal.add(new
list_jadwal.add(new
list_jadwal.add(new
list_jadwal.add(new
list_jadwal.add(new
list_jadwal.add(new
list_jadwal.add(new
list_jadwal.add(new
list_jadwal.add(new
list_jadwal.add(new
}

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

13. Edit class MainActivity.java lalu ketikkan kode berikut

package net.agusharyanto.ndjadwalpelajaran;
import android.annotation.SuppressLint;

import
import
import
import
import
import
import
import
import
import
import
import
import

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

public class MainActivity extends Activity {

// Within which the entire activity is enclosed
private DrawerLayout mDrawerLayout;
// ListView represents Navigation Drawer
private ListView mDrawerList;
// ActionBarDrawerToggle indicates the presence of Navigation Drawer in the
action bar
private ActionBarDrawerToggle mDrawerToggle;
// Title of the action bar
private String mTitle = "";
@SuppressLint("NewApi")
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mTitle = "Jadwal Pelajaran";
getActionBar().setTitle(mTitle);
// Getting reference to the DrawerLayout
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
mDrawerList = (ListView) findViewById(R.id.drawer_list);
// Getting reference to the ActionBarDrawerToggle
mDrawerToggle = 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 DrawerLayout
mDrawerLayout.setDrawerListener(mDrawerToggle);
// Creating an ArrayAdapter to add items to the listview mDrawerList
ArrayAdapter<String> adapter = new ArrayAdapter<String>(getBaseContext(),
R.layout.drawer_list_item,
getResources().getStringArray(R.array.menus));
// Setting the adapter on mDrawerList
mDrawerList.setAdapter(adapter);
// Enabling Home button
getActionBar().setHomeButtonEnabled(true);
// Enabling Up navigation
getActionBar().setDisplayHomeAsUpEnabled(true);
// Setting item click listener for the listview mDrawerList
mDrawerList.setOnItemClickListener(new OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view,
int position, long id) {
// Getting an array of rivers
String[] menuItems =
getResources().getStringArray(R.array.menus);
// Currently selected river
mTitle = menuItems[position];
if (mTitle.equals("Tambah Jadwal")){
FragmentTambahJadwal fragmentone = new
FragmentTambahJadwal();
FragmentManager fragmentManager =
getFragmentManager();
// Creating a fragment transaction
FragmentTransaction ft =
fragmentManager.beginTransaction();
// Adding a fragment to the fragment transaction
ft.replace(R.id.content_frame, fragmentone);
// Committing the transaction
ft.commit();
}else{
// Creating a fragment object
ListFragment rFragment = new ListFragment();
// Passing selected item information to fragment
Bundle 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 transaction
FragmentTransaction ft = fragmentManager.beginTransaction();
// Adding a fragment to the fragment transaction
ft.replace(R.id.content_frame, rFragment);
// Committing the transaction
ft.commit();
}
// Closing the drawer
mDrawerLayout.closeDrawer(mDrawerList);
}
});
}
@Override
protected void onPostCreate(Bundle savedInstanceState) {
super.onPostCreate(savedInstanceState);
mDrawerToggle.syncState();
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
if (mDrawerToggle.onOptionsItemSelected(item)) {
return true;
}
return super.onOptionsItemSelected(item);
}
/** Called whenever we call invalidateOptionsMenu() */
@Override
public boolean onPrepareOptionsMenu(Menu menu) {
// If the drawer is open, hide action items related to the content view
boolean drawerOpen = mDrawerLayout.isDrawerOpen(mDrawerList);
menu.findItem(R.id.action_settings).setVisible(!drawerOpen);
return super.onPrepareOptionsMenu(menu);
}
@Override
public 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.