• Solo Great Sale

    Solo Great Sale Powered By Circle Card 2015

  • Solo Great Sale

    Solo Great Sale Powered By Circle Card 2015

  • Oracle Java Magazine

    As Cover of Oracle Java Magazine March/April 2012 issue

  • Launching jDuchess Indonesia

    Gunadarma University 2011

    www.jduchess.or.id

  • Launching jDuchess Indonesia

    Gunadarma University 2011

    www.jduchess.or.id

  • Launching Java 7

    Binus University 2011

  • Eclipse Democamp

    Microsoft Indonesia 2011

  • Oracle Academy

    SMK PGRI 3 Malang 2010

  • Launching JENI 2.0

    ITB Bandung 2012

  • Oracle Academy

    SMK PGRI 3 Malang 2010

  • Java and Android Roadshow

    SMK PGRI 3 Malang 2012

  • Oracle Academy

    SMK PGRI 3 Malang 2010

  • Launching JENI 2.0

    ITB Bandung 2012

  • Oracle Academy

    SMK PGRI 3 Malang 2011

  • Java and Android Roadshow

    SMK Plus Darussalam Kediri 2012

  • Oracle Academy Seminar

    LIKMI Bandung, 2012

  • Oracle Academy Seminar

    Indonesia University, 2012

  • Seminar Android

    Universitas Budi Luhur 2010

  • Java and Android Roadshow

    SMK Hasan Kafrawi Jepara 2012

  • Sosialisasi Kurikulum 2013

    LPMP Surabaya 2013

  • IOSA

    Indonesia Open Source Award 2011

  • Java Training

    SMKN 02 Sukabumi 2010

  • Sosialisasi Kurikulum

    SMKN 01 Tulungagung 2011

  • Sosialisasi Kurikulum 2013

    LPMP Surabaya 2013

Saturday, December 14, 2013

Posted by Netty Herawaty
| 7:52 PM
Kali ini saya akan membahas custome listview dengan image dan text. Contoh kasus yang saya gunakan adalah pada postingan saya sebelumnya tentang navigation drawer . Jadi kita tinggal memodifikasi dari class dan layout yang sudah ada.

Pada pembahasan tentang navigation drawer, ketika menu Voucher di klik akan tampil halaman fragment baru. Nah, sekarang kita modifikasi agar ketika di klik menu Voucher tampil form fragment yang berisi listview. 

Sebelum kita mulai memodifikasi layout dan class nya, kita siapkan dulu list selector yang berisi background style ketika listview normal dan ketika di klik

Buat file xml baru pada res/drawable

1. voucher_list_selector.xml

Untuk memberikan background state atau keadaan pada background list. normal state ketika list normal dan pressed state ketika list di klik
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">     <item      android:state_selected="false"         android:state_pressed="false"         android:drawable="@drawable/gradient_bg" />     <item android:state_pressed="true"         android:drawable="@drawable/gradient_bg_hover" />     <item android:state_selected="true"       android:state_pressed="false"         android:drawable="@drawable/gradient_bg_hover" /> </selector>

2. gradient_bg.xml

Memberikan gradient warna untuk background list yang normal state
<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"

    android:shape="rectangle">

  <gradient

      android:startColor="#f1f1f2"

      android:centerColor="#fcfcfc"

      android:endColor="#cfcfcf"

      android:angle="270" />

</shape>

3. gradient_bg_pressed.xml

Memberikan gradient warna pada list yang pressed state atau ketika di klik
<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"

    android:shape="rectangle">

  <gradient

      android:startColor="#55AADC"

      android:centerColor="#55AADC"

      android:endColor="#55AADC"

      android:angle="270" />

</shape>

Buat file xml baru pada res/layout

1. voucher.xml

Membuat ListView dengan id yang akan dipanggil pada class VoucherFragment
<?xml version="1.0" encoding="UTF-8"?>

<ListView xmlns:android="http://schemas.android.com/apk/res/android"

    android:id="@android:id/list"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:background="#ffffff"

    android:divider="#b5b5b5"

    android:dividerHeight="1dp"

    android:listSelector="@drawable/voucher_list_selector"

    android:scrollbars="none">

</ListView>

2. voucher_row_item.xml

Untuk membuat list row yang berisi image dan text
<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="fill_parent"

    android:layout_height="wrap_content"

    android:background="@drawable/voucher_list_selector"

    android:orientation="horizontal"

    android:padding="5dip" >



    <LinearLayout

        android:id="@+id/thumbnail"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignParentLeft="true"

        android:layout_marginRight="5dip"

        android:background="@drawable/image_bg"

        android:padding="3dip" >



        <ImageView

            android:id="@+id/imageView1"

            android:layout_width="50dip"

            android:layout_height="50dip"

            android:src="@drawable/noimage" />

    </LinearLayout>



    <TextView

        android:id="@+id/textView1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignTop="@+id/thumbnail"

        android:layout_toRightOf="@+id/thumbnail"

        android:text="Burger King"

        android:textColor="#040404"

        android:textSize="15dp"

        android:textStyle="bold"

        android:typeface="sans" />



    <TextView

        android:id="@+id/textView2"

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:layout_below="@id/textView1"

        android:layout_marginTop="1dip"

        android:layout_toRightOf="@+id/thumbnail"

        android:text="Free 1 Burger Alacarte"

        android:textColor="#343434"

        android:textSize="10dip" />



    <ImageView

        android:id="@+id/imageView2"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignParentRight="true"

        android:layout_centerVertical="true"

        android:src="@drawable/icon_arrow" />



    <TextView

        android:id="@+id/textView3"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignLeft="@+id/textView2"

        android:layout_below="@+id/textView2"

        android:layout_marginTop="1dip"

        android:text="Exp: 25-Feb-2014 / 23:59"

        android:textColor="#343434"

        android:textSize="10dip" />



    <ImageView

        android:id="@+id/imageView3"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_centerVertical="true"

        android:layout_toLeftOf="@+id/imageView2"

        android:src="@drawable/icon_new" />



</RelativeLayout>

Buat class baru pada package model

1. VoucherModel.java

Untuk mendefinisikan variable-variable yang kita butuhkan dari listview
package com.netyherawaty.slidingmenu.model;



public class VoucherModel {

 

  public int img;

  public String title;

  public String desc;

  public String expired;

 

  public VoucherModel(int img, String title, String desc, String expired) {

   

    this.img = img;

    this.title = title;

    this.desc = desc;

    this.expired = expired;

  }

}

Buat class baru pada package adapter

1. VoucherAdapter.java

Pada class ini memanggil layout voucher_row_item.xml dan memanggil id dari masing-masing komponen yang ada didalamnya (TextView, ImageView dll)
package com.netyherawaty.slidingmenu.adapter;


import com.netyherawaty.slidingmenu.R;

import com.netyherawaty.slidingmenu.model.VoucherModel;


import android.content.Context;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.ArrayAdapter;

import android.widget.ImageView;

import android.widget.TextView;


public class VoucherAdapter extends ArrayAdapter<VoucherModel> {


  public VoucherAdapter(Context context) {

    super(context, 0);

  }


  public View getView(int position, View convertView, ViewGroup parent) {

    if (convertView == null) {

      convertView = LayoutInflater.from(getContext()).inflate(R.layout.voucher_row_item, null);

    }

   

    ImageView imageView = (ImageView) convertView.findViewById(R.id.imageView1);

    TextView title = (TextView) convertView.findViewById(R.id.textView1);

    TextView desc = (TextView) convertView.findViewById(R.id.textView2);

    TextView expired = (TextView) convertView.findViewById(R.id.textView3);



    imageView.setImageResource(getItem(position).img);

    title.setText(getItem(position).title);

    desc.setText(getItem(position).desc);

    expired.setText(getItem(position).expired);

    return convertView;

  }

}

Modifikasi VoucherFragment

Langkah terakhir adalah modifikasi VoucherFragment.java dengan menambahkan list yang kita butuhkan dengan perintah adapter.add() . Perhatikan bahwa class extends bukan extend Fragment namun extends ke ListFragment sehingga kita butuh memanggil id list dari voucher.xml
package com.netyherawaty.slidingmenu;


import android.app.ListFragment;

import android.os.Bundle;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;


import com.netyherawaty.slidingmenu.adapter.VoucherAdapter;

import com.netyherawaty.slidingmenu.model.VoucherModel;


public class VoucherFragment extends ListFragment{

        
      public VoucherFragment(){}
      

      @Override

      public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
   

          View rootView = inflater.inflate(R.layout.voucher, container, false);


          return rootView;

      }

     
      @Override

    public void onActivityCreated(Bundle savedInstanceState) {

      super.onActivityCreated(savedInstanceState);

      VoucherAdapter adapter = new VoucherAdapter(getActivity());

      adapter.add(new VoucherModel(R.drawable.iloyal_burgerking, "Burger King", "Free 1 Burger Alacarte", "Exp : 2014-03-15 till 2014-04-15"));  

      adapter.add(new VoucherModel(R.drawable.iloya_ten, "Ten Ten", "Free 1 Tempura Donburi", "Exp : 2014-03-01 till 2014-03-10"));

      adapter.add(new VoucherModel(R.drawable.iloyal_blitz, "Blitz Megaplex", "Free 1 Regular Movie Ticket", "Exp : 2014-02-20 till 2014-02-28"));

      adapter.add(new VoucherModel(R.drawable.iloyal_pepperlunch, "Pepper Lunch", "Free 1 Red Velvet Dessert + Drink", "Exp : 2014-02-10 till 2014-02-20"));

      adapter.add(new VoucherModel(R.drawable.iloyal_dairyqueen, "Dairy Queen", "Free 1 Moolatte Cappucino", "Exp : 2014-01-01 till 2014-01-30"));

      getListView().setAdapter(adapter);

    }

}

Sekarang run project dan hasilnya seperti berikut



Saturday, December 7, 2013

Posted by Netty Herawaty
| 12:25 PM
Satu tahun yang lalu saya pernah membahas tentang Android Dashboard. Silahkan dilihat disini . Nah sekarang dashboard sudah digeser dengan UI pattern untuk sliding menu yang baru diperkenalkan Google yang bernama "Navigation Drawer".

Sejak Google memperkenalkan Navigation Drawer, kita mulai banyak menemukan aplikasi mobile apps Android yang menggunakan "hamburger" style ini. 

Navigation Drawer ini letaknya disembunyikan dan dapat dilihat dengan menggeser screen dari kiri atau dengan menekan button "hamburger" dan app icon di action bar. Perhatikan contoh sliding menu yang ada di Facebook dan Google Play Store berikut ini

                               

Nah sekarang kita akan membuat sliding menu yang menyerupai contoh diatas

Membuat Project Baru

1. Download "hamburger" icon

Download "hamburger" icon dan simpan pada res/drawable

2. Membuat project baru

Buat project baru dari File > New > Android Application Project


3. Membuat String variable

Buka strings.xml pada folder res/value dan tambahkan array item untuk navigation drawer
<?xml version="1.0" encoding="utf-8"?>

<resources>


    <string name="app_name">Navigation Drawer</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 >Directory</item>

        <item >Promotion</item>

        <item >Event</item>

        <item >Voucher</item>

        <item >My Account</item>

        <item >Logout</item>

    </string-array>


    <!-- Nav Drawer List Item Icons -->

    <!-- Keep them in order as the titles are in -->

    <array name="nav_drawer_icons">

        <item>@drawable/icon_home</item>

        <item>@drawable/icon_directory</item>

        <item>@drawable/icon_promo</item>

        <item>@drawable/icon_event</item>

        <item>@drawable/icon_voucher</item>

        <item>@drawable/icon_myaccount</item>

        <item>@drawable/icon_logout</item>

    </array>
    

    <!-- Content Description -->

    <string name="desc_list_item_icon">Item Icon</string>


</resources>

4. Membuat DrawerLayout

UI element untuk navigation drawer adalah DrawerLayout. tambahkan kode berikut pada activity_main.xml di folder res/layout. FrameLayout untuk menampilkan Fragment dan ListView untuk menampilkan slider menu
<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="280dp"

        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>

Membuat Layout Custom ListView

Untuk membuat custome listview kita membutuhkan Adapter class dan custom layout untuk masing-masing list item pada listview. Sebelum kita membuat Adapter class, kita persiapkan dulu kebutuhan layout nya.

5. Membuat State ListItem

Kita membutuhkan 4 file xml, 2 file xml untuk membuat 2 state list item, yaitu ketika normal state dan pressed state atau ketika list item ditekan dan 1 file xml untuk menggabungkan keduanya (list selector) dan 1 file untuk membuat counter background

a. Normal State
Buat xml file di dalam res/drawable dan beri nama list_item_bg_normal.xml (jika belum tersedia folder drawable, silahkan create new folder dan beri nama drawable)
<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>

b. Pressed State
Buat xml file di dalam res/drawable dan beri nama list_item_bg_pressed.xml
<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>

c. List Selector
Buat xml file di dalam res/drawable dan beri nama list_selector.xml
<?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>

d. Counter Background
Buat xml file di dalam res/drawable dan beri nama counter_bg.xml
<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"

    android:shape="rectangle" >


    <!-- view background color -->

    <solid android:color="@color/counter_text_bg" >

    </solid>


    <!-- If you want to add some padding -->

    <padding

        android:right="3dp"

        android:left="3dp" >

    </padding>


    <!-- Here is the corner radius -->

    <corners android:radius="2dp" >

    </corners>

</shape>

Sampai disini pasti layout yang kalian buat banyak yang error, karena kita belum menambahkan file xml untuk menampung color atau warna-warna yang kita gunakan pada listview. Color ini harus diletakkan di dalam res/values

e. Color
Buat xml file di dalam res/values dan beri nama color.xml
<?xml version="1.0" encoding="utf-8"?>

<resources>

    <color name="list_item_title">#000000</color>

    <color name="list_background">#FAFAFA</color>

    <color name="list_background_pressed">#55AADC</color>

    <color name="list_divider">#272727</color>

    <color name="counter_text_bg">#626262</color>

    <color name="counter_text_color">#FFFFFF</color>

</resources>

6. Membuat Layout Drawer ListItem

Buat xml file di dalam res/layout dan beri nama drawer_list_item.xml Drawer ListItem ini unuk mendefinisikan masing-masing list row. RelativeLayout yang ada di file ini berisi title, icon dan counter listview
<?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="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_marginLeft="12dp"

        android:layout_marginRight="12dp"

        android:contentDescription="@string/desc_list_item_icon"

        android:src="@drawable/icon_home"

        android:layout_centerVertical="true" />



    <TextView

        android:id="@+id/title"

        android:layout_width="wrap_content"

        android:layout_height="match_parent"

        android:layout_toRightOf="@id/icon"

        android:minHeight="?android:attr/listPreferredItemHeightSmall"

        android:textAppearance="?android:attr/textAppearanceListItemSmall"

        android:textColor="@color/list_item_title"

        android:gravity="center_vertical"

        android:paddingRight="40dp"/>


    <TextView android:id="@+id/counter"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:background="@drawable/counter_bg"

        android:layout_alignParentRight="true"

        android:layout_centerVertical="true"

        android:layout_marginRight="8dp"

        android:textColor="@color/counter_text_color"/>


</RelativeLayout>

Membuat Class Custom ListView

Masing-masing list item berisi title, icon dan counter. Jadi kita membuat model untuk merepresentasikan ketiga elemen tersebut

7. Buat Model DrawerItem

Buat package baru untuk meletakkan class model. Package saya com.netyherawaty.slidingmenu.model
Buat class NavDrawerItem.java dan tambahkan kode berikut
package com.netyherawaty.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;

  }

}

8. Membuat Adapter DrawerItem

Buat package baru untuk meletakkan class adapter. Package saya com.netyherawaty.slidingmenu.adapter Buat class NavDrawerListAdapter.java dan tambahkan kode berikut
package com.netyherawaty.slidingmenu.adapter;



import java.util.ArrayList;



import com.netyherawaty.slidingmenu.R;

import com.netyherawaty.slidingmenu.model.NavDrawerItem;



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;



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());

       

        if(navDrawerItems.get(position).getCounterVisibility()){

          txtCount.setText(navDrawerItems.get(position).getCount());

        }else{

          txtCount.setVisibility(View.GONE);

        }

       

        return convertView;

  }



}

9. Update class MainActivity

tambahkan kode berikut pada class MainActivity.java
package com.netyherawaty.slidingmenu;



import java.util.ArrayList;



import com.netyherawaty.slidingmenu.adapter.NavDrawerListAdapter;

import com.netyherawaty.slidingmenu.model.NavDrawerItem;



import android.os.Bundle;

import android.app.Activity;

import android.app.Fragment;

import android.app.FragmentManager;

import android.content.res.Configuration;

import android.content.res.TypedArray;

import android.support.v4.app.ActionBarDrawerToggle;

import android.support.v4.widget.DrawerLayout;

import android.util.Log;

import android.view.Menu;

import android.view.MenuItem;

import android.view.View;

import android.widget.AdapterView;

import android.widget.ListView;



public class MainActivity extends Activity {



  private DrawerLayout mDrawerLayout;

  private ListView mDrawerList;

  private ActionBarDrawerToggle mDrawerToggle;

  private CharSequence mDrawerTitle;

  private CharSequence mTitle;

  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();

   

    navMenuTitles = getResources().getStringArray(R.array.nav_drawer_items);



    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>();



    navDrawerItems.add(new NavDrawerItem(navMenuTitles[0], navMenuIcons.getResourceId(0, -1)));

    navDrawerItems.add(new NavDrawerItem(navMenuTitles[1], navMenuIcons.getResourceId(1, -1)));

    navDrawerItems.add(new NavDrawerItem(navMenuTitles[2], navMenuIcons.getResourceId(2, -1), true, "5"));

    navDrawerItems.add(new NavDrawerItem(navMenuTitles[3], navMenuIcons.getResourceId(3, -1), true, "2"));

    navDrawerItems.add(new NavDrawerItem(navMenuTitles[4], navMenuIcons.getResourceId(4, -1), true, "12"));

    navDrawerItems.add(new NavDrawerItem(navMenuTitles[5], navMenuIcons.getResourceId(5, -1)));

    navDrawerItems.add(new NavDrawerItem(navMenuTitles[5], navMenuIcons.getResourceId(6, -1)));

   

    navMenuIcons.recycle();



    mDrawerList.setOnItemClickListener(new SlideMenuClickListener());

   

    adapter = new NavDrawerListAdapter(getApplicationContext(),

        navDrawerItems);

    mDrawerList.setAdapter(adapter);



    getActionBar().setDisplayHomeAsUpEnabled(true);

    getActionBar().setHomeButtonEnabled(true);



    mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout,

        R.drawable.ic_drawer,

        R.string.app_name,

        R.string.app_name

    ) {

      public void onDrawerClosed(View view) {

        getActionBar().setTitle(mTitle);

        invalidateOptionsMenu();

      }



      public void onDrawerOpened(View drawerView) {

        getActionBar().setTitle(mDrawerTitle);

        invalidateOptionsMenu();

      }

    };

    mDrawerLayout.setDrawerListener(mDrawerToggle);



    if (savedInstanceState == null) {

      displayView(0);

    }

  }



  private class SlideMenuClickListener implements

      ListView.OnItemClickListener {

    @Override

    public void onItemClick(AdapterView<?> parent, View view, int position,

        long id) {

      displayView(position);

    }

  }



  @Override

  public boolean onCreateOptionsMenu(Menu menu) {

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

    return true;

  }



  @Override

  public boolean onOptionsItemSelected(MenuItem item) {

    if (mDrawerToggle.onOptionsItemSelected(item)) {

      return true;

    }

    switch (item.getItemId()) {

    case R.id.action_settings:

      return true;

    default:

      return super.onOptionsItemSelected(item);

    }

  }



  @Override

  public boolean onPrepareOptionsMenu(Menu menu) {

    boolean drawerOpen = mDrawerLayout.isDrawerOpen(mDrawerList);

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

    return super.onPrepareOptionsMenu(menu);

  }



  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 DirectoryFragment();

      break;

    case 2:

      fragment = new PromotionFragment();

      break;

    case 3:

      fragment = new EventFragment();

      break;

    case 4:

      fragment = new VoucherFragment();

      break;

    case 5:

      fragment = new MyAccountFragment();

      break;

    case 6:  

      break; 

     

    default:

      break;

    }



    if (fragment != null) {

      FragmentManager fragmentManager = getFragmentManager();

      fragmentManager.beginTransaction()

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



      mDrawerList.setItemChecked(position, true);

      mDrawerList.setSelection(position);

      setTitle(navMenuTitles[position]);

      mDrawerLayout.closeDrawer(mDrawerList);

    } else {

      Log.e("MainActivity", "Error in creating fragment");

    }

  }



  @Override

  public void setTitle(CharSequence title) {

    mTitle = title;

    getActionBar().setTitle(mTitle);

  }



  @Override

  protected void onPostCreate(Bundle savedInstanceState) {

    super.onPostCreate(savedInstanceState);

    mDrawerToggle.syncState();

  }


  @Override

  public void onConfigurationChanged(Configuration newConfig) {

    super.onConfigurationChanged(newConfig);

    mDrawerToggle.onConfigurationChanged(newConfig);

  }

}

Sampai disini Anda akan menemukan error di bagian kode berikut
  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 DirectoryFragment();

      break;

    case 2:

      fragment = new PromotionFragment();

      break;

    case 3:

      fragment = new EventFragment();

      break;

    case 4:

      fragment = new VoucherFragment();

      break;

    case 5:

      fragment = new MyAccountFragment();

      break;

    case 6:  

      break; 

    default:

      break;

    }

Kode diatas adalah sebagai handling navigation ketika salah satu sliding menu di klik. Jadi buatlah class dan layout untuk menu Home, Directory, Promotion, Event, Voucher dan MyAccount. Saya beri contoh untuk class dan layout menu Voucher.

10. Membuat Fragment View

Buatlah class baru dengan nama VoucherFragment.java dan tambahkan kode berikut
package com.netyherawaty.slidingmenu;

import android.app.Fragment;

import android.os.Bundle;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;
public class VoucherFragment extends Fragment {


      public VoucherFragment(){}

      @Override

      public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {


          View rootView = inflater.inflate(R.layout.fragment_voucher, container, false);

          return rootView;

      }

}

Kemudian untuk layoutnya buat file xml dengan nama fragment_voucher.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/txtLabel"

         android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_centerInParent="true"

        android:textSize="16dp"

        android:text="Voucher View"/>


    <ImageView android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_below="@id/txtLabel"

        android:src="@drawable/icon_voucher"

        android:layout_centerHorizontal="true"

        android:layout_marginTop="10dp"/>

</RelativeLayout>

Lakukan hal yang sama untuk menu lain. Perhatikan struktur project yang sudah kita buat sampai saat ini



Sekarang run project, klik pada hamburger icon dan navigation drawer akan tampil seperti gambar dibawah ini.


Ketika di klik pada menu Voucher, maka akan tampil fragment layout yang telah kita buat di langkah no 10 dan navigation drawer akan hilang (hidden)


Sunday, December 1, 2013

Posted by Netty Herawaty
| 7:58 PM
Wah tidak terasa saya sudah membahas Android sejak tahun 2010 dari Android masih versi Cupcake sampai sekarang sudah versi KitKat. Semakin baru versi yang dirilis semakin banyak fitur baru yang menarik. Tidak hanya dari sisi user atau pengguna, tapi dari sisi developer atau pengembang juga menemukan banyak sekali fitur back end yang menarik untuk dicoba.

Salah satunya adalah Android menyediakan holo theme yaitu (Holo Dark, Holo Light dan Holo Light with Dark Action Bar), activity type (Blank Activity, Fullscreen Activity dan Master/Detail Flow), navigation type (Fixed Tabs + Swipe, Scrollable Tabs + Swipe, Dropdown)

1. Holo Theme

Silahkan pilih tema ketika membuat new android project



a. Holo Dark
Contoh tema Holo Dark adalah pada Gmail



b. Holo Light
Contoh holo light adalah pada setting



c. Holo Light with Dark Action Bar
Tema warna terang dengan action bar warna gelap

3. Navigation Type

a. Fixed Tabs + Swipe
Tipe navigasi dengan tab menu yang fix atau tetap tidak bisa bergerak dan form swipe atau bisa digeser


b. Scrollable Tabs + Swipe
Tipe navigasi dengan menu tab yang bisa di scroll ke kanan dan ke kiri dan form yang bisa di geser atau swipe


c. Dropdown
Terdapat dropdown pada action bar