• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Android Sliding Menu dengan Navigation Drawer
 

Android Sliding Menu dengan Navigation Drawer

on

  • 2,432 views

Pada tutorial ini akan membahas cara membuat Sliding menu di Android dengan Navigation Drawer

Pada tutorial ini akan membahas cara membuat Sliding menu di Android dengan Navigation Drawer

Statistics

Views

Total Views
2,432
Views on SlideShare
532
Embed Views
1,900

Actions

Likes
2
Downloads
38
Comments
2

2 Embeds 1,900

http://agusharyanto.net 1898
http://translate.googleusercontent.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

12 of 2 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Android Sliding Menu dengan Navigation Drawer Android Sliding Menu dengan Navigation Drawer Document Transcript

    • 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 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 berikut package 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 berikut package 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 ; @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 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 berikut package 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 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.