Mengelola FragmentDalam modul ini kita akan mempelajari bagaimana mengelola fragment menggunakan navigasi drawer. Nantinya menu navigasi drawer diakses dengan cara menggeser di sisi kiri layar (sliding menu). Hasil akhir yang diharapkan seperti gambar di bawah ini.

Berikut ini tahap-tahap dalam membuat aplikasi.

Membuat Project baru1. Buatlah project baru dalam AndroidStudio dengan nama SlidingMenu. Tetapkan nama activity

dengan nama MainActivity.java. Dalam contoh kasus ini nama paket yang dicontohkan adalah com.example.ds.slidingmenu (dapat disesuaikan dengan keinginan anda).

2. Tambahkan file ikon ke dalam project, dengan klik kanan folder “drawable” “Add” “New Image Asset” Pada asset type pilih “Launcher Icons” Image File-> Browse. Sesuaikan nama aset ikon (ic_home, ic_people, ic_photos, ic_communities, ic_pages, ic_whats_hot).

3. Tambahkan beberapa atribut string dan nama ikon dalam strings.xml, sehingga seperti berikut:

<resources> <string name="app_name">Slider Menu</string> <string name="action_settings">Settings</string> <string name="hello_world">Hello world!</string> <string name="drawer_open">Slider Menu Opened</string> <string name="drawer_close">Slider Menu Closed</string>

<!-- Nav Drawer Menu Items --> <string-array name="nav_drawer_items"> <item>Home</item> <item>Find People</item> <item>Photos</item> <item>Communities</item> <item>Pages</item> <item>What\'s Hot</item> </string-array>

<!-- Nav Drawer List Item Icons --> <!-- Keep them in order as the titles are in --> <array name="nav_drawer_icons"> <item>@drawable/ic_home</item> <item>@drawable/ic_people</item> <item>@drawable/ic_photos</item> <item>@drawable/ic_communities</item> <item>@drawable/ic_pages</item> <item>@drawable/ic_whats_hot</item> </array>

<!-- Content Description --> <string name="desc_list_item_icon">Item Icon</string>

<!-- TODO: Remove or change this placeholder text --> <string name="hello_blank_fragment">Hello blank fragment</string></resources>

4. Tambahkan aset warna dengan membuat file “Values XML File” dalam direktori “res/values”. Sesuaikan isinya seperti berikut.

<resources> <color name="list_item_title">#fff</color> <color name="list_background">#303030</color> <color name="list_background_pressed">#992416</color> <color name="list_divider">#272727</color> <color name="counter_text_bg">#626262</color> <color name="counter_text_color">#c5c4c4</color></resources>

5. Untuk menggunakan navigasi drawer diperlukan penambahan library tambahan yaitu support-v4 dan support-v7. Untuk menambahkan library tersebut, klik “File” “Project Structure” “App” “Dependencies” + “Library Dependency” pilih “library support-v4” “Ok”. Lakukan langkah yang sama untuk menambahkan support-v7.

6. Buka file layout utama (activity_main.xml) dan sesuaikan isinya seperti kode di bawah ini. FrameLayout digunakan untuk menggantikan konten utama menggunakan Fragments.

<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">

<!-- Framelayout to display Fragments --> <FrameLayout android:id="@+id/frame_container" android:layout_width="match_parent" android:layout_height="match_parent" />

<!-- Listview to display slider menu --> <ListView android:id="@+id/list_slidermenu" android:layout_width="240dp" android:layout_height="match_parent" android:layout_gravity="start" android:choiceMode="singleChoice" android:divider="@color/list_divider" android:dividerHeight="1dp" android:listSelector="@drawable/list_selector" android:background="@color/list_background"/></android.support.v4.widget.DrawerLayout>

7. Saat ini anda sudah membuat wadah untuk menempatkan navigasi drawer dan fragment beserta sumber daya yang dibutuhkan. Debug aplikasi yang sudah dibuah untuk memastikan tidak ada kesalahan.

Membuat List View AdapterUntuk membuat sebuah List View Adapter yang dilengkapi ikon, kita harus melalui tahap-tahap yang agak rumit. Kita membutuhkan layout pada setiap keadaan pilihan menu ketika ditekan dan pada keadaan normal. Untuk membuatnya diperlukan tiga file xml. Satu untuk keadaan normal, kedua untuk keadaan tertekan dan ketiga untuk mengkombinasikan keduanya.

1. Buatlah file xml dalam direktori /res/drawable, denga klik kanan drawable new Drawable resource file dengan nama list_item_bg_normal.xml dan sesuaikan isinya seperti berikut.

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <gradient android:startColor="@color/list_background" android:endColor="@color/list_background" android:angle="90" /></shape>

2. Ulangi langkah diatas untuk membuat file list_item_bg_pressed.xml dan sesuaikan isinya seperti berikut.

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <gradient android:startColor="@color/list_background_pressed" android:endColor="@color/list_background_pressed" android:angle="90" /></shape>

3. Ulangi langkah diatas untuk membuat file list_selector.xml dan sesuaikan isinya seperti berikut.

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:drawable="@drawable/list_item_bg_normal" android:state_activated="false"/>

<item android:drawable="@drawable/list_item_bg_pressed" android:state_pressed="true"/>

<item android:drawable="@drawable/list_item_bg_pressed" android:state_activated="true"/>

</selector>

4. Setelah membuat tampilan untuk setiap item menu. Kita memerlukan file layout yang mendefinisikan setiap baris menu. Buatlah file layout dengan nama drawer_list_item.xml dalam direktori /res/layout/. Dalam file ini kita meletakkan ikon, judul pada menu navigasi drawer.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="48dp" android:background="@drawable/list_selector">

<ImageView android:id="@+id/icon" android:layout_width="25dp" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_centerVertical="true" android:layout_marginLeft="12dp" android:layout_marginRight="12dp" android:contentDescription="@string/desc_list_item_icon" android:src="@drawable/ic_home" />

<TextView android:id="@+id/title" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_toRightOf="@id/icon" android:gravity="center_vertical" android:minHeight="?android:attr/listPreferredItemHeightSmall" android:paddingRight="40dp" android:textAppearance="?android:attr/textAppearanceListItemSmall" android:textColor="@color/list_item_title" />

<TextView android:id="@+id/counter" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_centerVertical="true" android:layout_marginRight="8dp" android:textColor="@color/counter_text_color" />

</RelativeLayout>

5. Setiap item menu terdiri dari tiga elemen yaitu ikon, judul dan counter. Untuk menampilkan ketiga elemen tersebut perlu dibuat sebuah kelas model. Buatlah package baru dengan nama model di dalam direktori “java/com.example.ds.slidingmenu”. Dalam package model, buatlah kelas baru dengan nama “NavDrawerItem”. Sesuaikan isinya seperti kode di bawah ini. Jika anda tidak menginginkan menampilkan counter, maka anda dapat mengisinya “false”.

package com.example.ds.slidingmenu.model;

public class NavDrawerItem { private String title; private int icon; private String count = "0"; // boolean to set visiblity of the counter private boolean isCounterVisible = false;

public NavDrawerItem() { }

public NavDrawerItem(String title, int icon) { this.title = title; this.icon = icon; }

public NavDrawerItem(String title, int icon, boolean isCounterVisible, String count) { this.title = title; this.icon = icon; this.isCounterVisible = isCounterVisible; this.count = count; }

public String getTitle() { return this.title; }

public int getIcon() { return this.icon; }

public String getCount() { return this.count; }

public boolean getCounterVisibility() { return this.isCounterVisible; }

public void setTitle(String title) { this.title = title; }

public void setIcon(int icon) { this.icon = icon; }

public void setCount(String count) { this.count = count; }

public void setCounterVisibility(boolean isCounterVisible) { this.isCounterVisible = isCounterVisible; }}

6. Sekarang kita sudah memiliki semua file yang dibutuhkan untuk membuat list adapter khusus. Selanjutnya kita perlu membuat package baru dengan nama “adapter”. Selanjutnya buat kelas baru dengan nama “NavDrawerListAdapter” dalam package “adapter”. Sesuaikan isinya sesuai dengan kode berikut.

package com.example.ds.slidingmenu.adapter;

import android.app.Activity;import android.content.Context;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.BaseAdapter;import android.widget.ImageView;import android.widget.TextView;import java.util.ArrayList;

import com.example.ds.slidingmenu.R;import com.example.ds.slidingmenu.model.NavDrawerItem;

/** * Created by ds on 6/2/15. */public class NavDrawerListAdapter extends BaseAdapter {

private Context context; private ArrayList<NavDrawerItem> navDrawerItems;

public NavDrawerListAdapter(Context context, ArrayList<NavDrawerItem> navDrawerItems){ this.context = context;

this.navDrawerItems = navDrawerItems; }

@Override public int getCount() { return navDrawerItems.size(); }

@Override public Object getItem(int position) { return navDrawerItems.get(position); }

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

@Override public View getView(int position, View convertView, ViewGroup parent) { if (convertView == null) { LayoutInflater mInflater = (LayoutInflater) context.getSystemService(Activity.LAYOUT_INFLATER_SERVICE); convertView = mInflater.inflate(R.layout.drawer_list_item, null); }

ImageView imgIcon = (ImageView) convertView.findViewById(R.id.icon); TextView txtTitle = (TextView) convertView.findViewById(R.id.title); TextView txtCount = (TextView) convertView.findViewById(R.id.counter);

imgIcon.setImageResource(navDrawerItems.get(position).getIcon()); txtTitle.setText(navDrawerItems.get(position).getTitle());

// displaying count // check whether it set visible or not if(navDrawerItems.get(position).getCounterVisibility()){ txtCount.setText(navDrawerItems.get(position).getCount()); }else{ // hide the counter view txtCount.setVisibility(View.GONE); }

return convertView; }

}

7. Langkah berikutnya, kita perlu mendeklarasikan variable-variabel yang dibutuhkan, menempatkan judul setiam menu dan ikonnya dari strings.xml, membuat sebuah adapter dan menambahkan setiap item menu. Dan terakhir kita menambahkan sebuah navigation drawer listener untuk merespon tap/klik dari pengguna.invalidateOptionsMenu() dipanggil dalam onDrawerOpenen() dan onDrawerClosed() untuk menyembunyikan dan menampilkan ikon action bar saat navigasi drawer dibuka dan ditutup.

import android.app.Activity;import android.content.res.Configuration;import android.content.res.TypedArray;import android.os.Bundle;import android.support.v4.widget.DrawerLayout;import android.support.v7.app.ActionBarDrawerToggle;import android.util.Log;import android.view.Menu;import android.view.MenuItem;import android.view.View;import android.widget.AdapterView;import android.widget.ListView;import java.util.ArrayList;

import com.example.ds.slidingmenu.adapter.NavDrawerListAdapter;import com.example.ds.slidingmenu.model.NavDrawerItem;

public class MainActivity extends Activity { private DrawerLayout mDrawerLayout; private ListView mDrawerList; private ActionBarDrawerToggle mDrawerToggle;

// nav drawer title private CharSequence mDrawerTitle;

// used to store app title private CharSequence mTitle;

// slide menu items private String[] navMenuTitles; private TypedArray navMenuIcons;

private ArrayList<NavDrawerItem> navDrawerItems; private NavDrawerListAdapter adapter;

@Override

protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main);

mTitle = mDrawerTitle = getTitle();

// load slide menu items navMenuTitles = getResources().getStringArray(R.array.nav_drawer_items);

// nav drawer icons from resources navMenuIcons = getResources() .obtainTypedArray(R.array.nav_drawer_icons);

mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout); mDrawerList = (ListView) findViewById(R.id.list_slidermenu);

navDrawerItems = new ArrayList<NavDrawerItem>();

// adding nav drawer items to array // Home navDrawerItems.add(new NavDrawerItem(navMenuTitles[0], navMenuIcons.getResourceId(0, -1))); // Find People navDrawerItems.add(new NavDrawerItem(navMenuTitles[1], navMenuIcons.getResourceId(1, -1))); // Photos navDrawerItems.add(new NavDrawerItem(navMenuTitles[2], navMenuIcons.getResourceId(2, -1))); // Communities, Will add a counter here navDrawerItems.add(new NavDrawerItem(navMenuTitles[3], navMenuIcons.getResourceId(3, -1), true, "22")); // Pages navDrawerItems.add(new NavDrawerItem(navMenuTitles[4], navMenuIcons.getResourceId(4, -1))); // What's hot, We will add a counter here navDrawerItems.add(new NavDrawerItem(navMenuTitles[5], navMenuIcons.getResourceId(5, -1), true, "50+"));

// Recycle the typed array navMenuIcons.recycle();

// setting the nav drawer list adapter adapter = new NavDrawerListAdapter(getApplicationContext(), navDrawerItems); mDrawerList.setAdapter(adapter);

// enabling action bar app icon and behaving it as toggle button getActionBar().setDisplayHomeAsUpEnabled(true); getActionBar().setHomeButtonEnabled(true);

mDrawerToggle = new ActionBarDrawerToggle(this,mDrawerLayout, R.string.app_name, // nav drawer open - description for accessibility R.string.app_name // nav drawer close - description for accessibility ){

public void onDrawerClosed(View view) { getActionBar().setTitle(mTitle); // calling onPrepareOptionsMenu() to show action bar icons invalidateOptionsMenu(); }

public void onDrawerOpened(View drawerView) { getActionBar().setTitle(mDrawerTitle); // calling onPrepareOptionsMenu() to hide action bar icons invalidateOptionsMenu(); }

}; mDrawerLayout.setDrawerListener(mDrawerToggle);

if (savedInstanceState == null) { // on first time display view for first nav item displayView(0); } mDrawerList.setOnItemClickListener(new SlideMenuClickListener()); }

@Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.menu_main, menu); return true; }

@Override public boolean onOptionsItemSelected(MenuItem item) { // toggle nav drawer on selecting action bar app icon/title if (mDrawerToggle.onOptionsItemSelected(item)) { return true; } // Handle action bar actions click switch (item.getItemId()) { case R.id.action_settings: return true; default: return super.onOptionsItemSelected(item); }

}

/*** * Called when invalidateOptionsMenu() is triggered */ @Override public boolean onPrepareOptionsMenu(Menu menu) { // if nav drawer is opened, hide the action items boolean drawerOpen = mDrawerLayout.isDrawerOpen(mDrawerList); menu.findItem(R.id.action_settings).setVisible(!drawerOpen); return super.onPrepareOptionsMenu(menu);

}

@Override public void setTitle(CharSequence title) { mTitle = title; getActionBar().setTitle(mTitle); }

/** * When using the ActionBarDrawerToggle, you must call it during * onPostCreate() and onConfigurationChanged()... */

@Override protected void onPostCreate(Bundle savedInstanceState) { super.onPostCreate(savedInstanceState); // Sync the toggle state after onRestoreInstanceState has occurred. mDrawerToggle.syncState(); }

@Override public void onConfigurationChanged(Configuration newConfig) { super.onConfigurationChanged(newConfig); // Pass any configuration change to the drawer toggls mDrawerToggle.onConfigurationChanged(newConfig); } }

8. Saat ini anda sudah membuat navigasi drawer dengan sebuah listview. Jalankan aplikasi yang sudah dibuat, untuk memastikan langkah yang dikerjakan sudah benar. Anda dapat membuka navigasi drawer dengan meng-klik pada ikon di action bar atau dengan menggeser pada sisi kiri layar. Akan tetapi anda belum dapat memilih menu dari daftar yang ditampilkan.

Membuat Tampilan Fragment untuk Setiap MenuSetiap pengguna memilih menu dari navigasi drawer, akan ditampilkan fragment yang sesuai. Setiap tampilan fragment membutuhkan sebuah kelas Fragment dan sebuah file layout.

1. Buatlah sebuah kelas fragment dengan nama HomeFragment dengan nama layout fragment_home. Untuk membuat kelas fragment, klik kanan package New Fragment Fragment (blank). Sesuaikan isinya sehingga seperti berikut.

import android.app.Fragment;import android.os.Bundle;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;

public class HomeFragment extends Fragment {

public HomeFragment() {

// Required empty public constructor }

@Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { // Inflate the layout for this fragment View rootView = inflater.inflate(R.layout.fragment_home, container, false);

return rootView; }

}

2. Dengan langkah yang sama buatlah fragment yang lainnya CommunityFragment.java - fragment_community.xml FindPeopleFragment – fragment_find_people.xml PagesFragment – fragment_pages.xml PhotosFragment – fragment_photos.xml WhatHotFragment – fragment_whats_hot .xml

3. Untuk dapat menampilkan fragment sesuai dengan menu yang dipilih dari navigasi drawer, perlu ditambahkan klik listener dan menempatkan tampilan fragment yang dimaksud. Tambahkan kode berikut ke dalam MainActivity.java.

public class MainActivity extends Activity{……@Override protected void onCreate(Bundle savedInstanceState) { … mDrawerList.setOnItemClickListener(new SlideMenuClickListener()); } … … /** * Slide menu item click listener * */ private class SlideMenuClickListener implements ListView.OnItemClickListener { @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) { // display view for selected nav drawer item displayView(position); }

}

/** * Diplaying fragment view for selected nav drawer list item * */ private void displayView(int position) { // update the main content by replacing fragments Fragment fragment = null; switch (position) { case 0: fragment = new HomeFragment(); break; case 1: fragment = new FindPeopleFragment(); break; case 2: fragment = new PhotosFragment(); break; case 3: fragment = new CommunityFragment(); break; case 4: fragment = new PagesFragment(); break; case 5: fragment = new WhatsHotFragment(); break;

default: break; }

if (fragment != null) { FragmentManager fragmentManager = getFragmentManager(); FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();

fragmentTransaction.replace(R.id.frame_container, fragment); fragmentTransaction.commit();

// update selected item and title, then close the drawer mDrawerList.setItemChecked(position, true); mDrawerList.setSelection(position); setTitle(navMenuTitles[position]); mDrawerLayout.closeDrawer(mDrawerList);

} else { // error in creating fragment Log.e("MainActivity", "Error in creating fragment");

} }

public void onFragmentInteraction(Uri uri){ //you can leave it empty }}

4. Sekarang jalankan aplikasi dan uji event klik pada listview. Anda akan mendapatkan tampilan fragment sesuai dengan meu yang anda pilih.