• 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




Reactions: