Mengelola Fragment

Dalam
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 baru

1. 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 Adapter

Untuk 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
import
import
import
import
import
import
import
import

android.app.Activity;
android.content.Context;
android.view.LayoutInflater;
android.view.View;
android.view.ViewGroup;
android.widget.BaseAdapter;
android.widget.ImageView;
android.widget.TextView;
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
import
import
import
import
import
import
import
import
import
import
import
import

android.app.Activity;
android.content.res.Configuration;
android.content.res.TypedArray;
android.os.Bundle;
android.support.v4.widget.DrawerLayout;
android.support.v7.app.ActionBarDrawerToggle;
android.util.Log;
android.view.Menu;
android.view.MenuItem;
android.view.View;
android.widget.AdapterView;
android.widget.ListView;
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 Menu

Setiap 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
import
import
import
import

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