Tutorial Custom ListView Android

Tampilan custom listview yang cukup kompleks

membuat listview sederhana memang gampang, cukup sebuah array data dan simplelistadapter,maka listview sudah tampil. kenyataan dilapangan, simple listview sangat jarang dipakai, terutama untuk aplikasi komersial dan populer. Kita perhatikan Aplikasi GMail, Contact,Facebook, Twitter dan lainnya, mereka memanfaatkan listview amun listviewnya sudah di custom sehingga tampilannya bagus.

Dalam tutorial kali ini, kita akan meneruskan membuat custom listview yang lebih kompleks daripada hanya menampilkan ikon disisi kiri listview. Kasus yang akan kita buat adalah menampilkan listview negara dengan 4 format data dalam setiap item. 4 data itu adalah bendera, nama negara, nama ibukota negara dan jumlah penduduk. Gambarannya seperti apa? lihat gambar berikut ini.

Tampilan custom listview yang cukup kompleks
Tampilan custom listview yang cukup kompleks

File yang dibutuhkan

Untuk membuat listview seperti ini, kita membutuhkan 5 file utama yaitu

  1. Country.java, merupakan model data untuk listview
  2. CountryAdapter.java merupakan ‘pengikat’ antara model dengan view,dalam bahasa lain bisa juga disebut dengan controller.
  3. CountryActivity.java yang merupakan view dari listview itu sendiri.
  4. country_row.xml , berisi pola layout untuk satu item negara
  5. country_activity.xml , berisi layout utama yang akan dipanggil oleh CountryActivity
  6. File gambar icon bendera masing masing negara yang akan ditampilkan. letakan di folder drawable.

    Jika kita perhatikan, model ini sering juga disebut dnegan MVC. Bagi yang terbiasa dengan MVC, insyaAllah akan mudah mengikutinya.

    Country.java

    Model data dari listview, berisi deklarasi field, construktor serta geter setternya. Berikut ini adalah potongan dari file Country.java

    public class Country {
    	private Bitmap flagIcon;
    
    	private String nama;
    	private String ibukota;
    	private String jumlahPenduduk;
    	
    	public Country(Bitmap fi, String n, String i, String jp) {
    		flagIcon = fi;
    		nama = n;
    		ibukota = i;
    		jumlahPenduduk = jp;
    	}
    ...
    ...
    ...
    }
    

    File CountryAdapter

    package com.candralab.listview;
    
    import java.util.List;
    
    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 CountryAdapter extends BaseAdapter {
    	private Context mContext;
    	private List<Country> mListInfo;
    
    	public CountryAdapter(Context context, List<Country> list) {
    		mContext = context;
    		mListInfo = list;
    
    	}
    
    	@Override
    	public int getCount() {
    		return mListInfo.size();
    	}
    
    	@Override
    	public Object getItem(int pos) {
    		return mListInfo.get(pos);
    	}
    
    	@Override
    	public long getItemId(int pos) {
    		return pos;
    	}
    
    	@Override
    	public View getView(int pos, View convertView, ViewGroup parent) {
    		// get selected entry
    		Country entry = mListInfo.get(pos);
    
    		// inflating list view layout if null
    		if (convertView == null) {
    			LayoutInflater inflater = LayoutInflater.from(mContext);
    			convertView = inflater.inflate(R.layout.country_row, null);
    		}
    		// set image icon
    		ImageView imgIcon = (ImageView) convertView.findViewById(R.id.imgIcon);
    		imgIcon.setImageBitmap(entry.getFlagIcon());
    
    		// set nama
    		TextView tvName = (TextView) convertView.findViewById(R.id.tvNama);
    		tvName.setText(entry.getNama());
    
    		TextView tvPhone = (TextView) convertView.findViewById(R.id.tvIbukota);
    		tvPhone.setText(entry.getIbukota());
    
    		TextView tvJumlahPenduduk = (TextView) convertView
    				.findViewById(R.id.tvJumlahPenduduk);
    		tvJumlahPenduduk.setText(entry.getJumlahPenduduk());
    
    		return convertView;
    	}
    
    }
    

    CountryActivity

    potongan code di fungsi onCreate

    setContentView(R.layout.country_activity);
    
    		lvcountry = (ListView) findViewById(R.id.listCountry);
    
    		List<Country> lsCountry = new ArrayList<Country>();
    
    		lsCountry
    				.add(new Country(BitmapFactory.decodeResource(getResources(),
    						R.drawable.indonesia), "Indonesia", "Jakarta",
    						"246 juta jiwa "));
    		lsCountry.add(new Country(BitmapFactory.decodeResource(getResources(),
    				R.drawable.saudi), "Saudi Arabia ", "Riyadh", "28 juta jiwa"));
    
    ....
    ....
    

    Download

    Karena kodenya panjang,maka saya hanya mengambil potongan kode kode inti disetiap file. Jika anda ingin mencoba sendiri,silahkan download source code lengkapnya di sini.

    Author: Candra Adi Putra

    Candra Adi Putra adalah Alumni STMIK AKAKOM Yogyakarta. Like Candralab Studio Di Facebook.

1 thought on “Tutorial Custom ListView Android”

  1. mas saya buat listview dengan Edittext didalamnya.. namun masalahnya ketika diinput edittext tersebut lalu saya scroll keatas dan kebawah listview tsb.. isian yang ada di Edittext tsb kabur dan gak focus gt. ada solusinya g mas? thx before

Tinggalin komentar dong!