Membuat Custom ListView Secara Mudah

Download, install dan rasakan dulu apk yang udah jadinya dari tutorial ini
Apk_Contoh.apk

Setelah sebelumnya kita telah membahas
Cara Membuat Aplikasi Hello World menggunakan AIDE
Sekarang mari kita sama - sama belajar membuat custom ListView.

Langsung Saja Berikut Langkah - Langkah Membuat Custom ListView Menggunakan AIDE

Buat project baru dengan nama "Apk_Contoh" dan nama Package "inyong.app.contoh".

Edit file main.xml dan tambahkan object ListView.
Masuk ke folder src/main/res/layout dan ubah isi file main.xml menjadi seperti berikut:

<LinearLayout

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

android:layout_width="match_parent"

android:layout_height="match_parent"

android:gravity="center"

android:orientation="vertical">

<TextView

android:text="@string/hello_world"

android:layout_width="wrap_content"

android:layout_height="wrap_content" />

<ListView

android:layout_width="match_parent"

android:layout_height="match_parent"

android:id="@+id/mainListView"/>

</LinearLayout>

Masih di dalam folder layout, buat file xml baru dengan nama list_item.xml kemudian edit dan masukkan code berikut:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout

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

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:orientation="horizontal"

android:padding="10dp"

android:layout_gravity="center_vertical">

<ImageView

android:layout_width="40dp"

android:layout_height="40dp"

android:scaleType="fitCenter"

android:adjustViewBounds="true"

android:id="@+id/image"

android:layout_gravity="center_vertical"/>

<LinearLayout

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_gravity="center_vertical"

android:layout_marginLeft="10dp"

android:orientation="vertical">

<TextView

android:layout_height="wrap_content"

android:text="Medium Text"

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

android:layout_width="wrap_content"

android:id="@+id/text_utama"

android:textColor="#9C4E00"

android:textStyle="bold"/>

<TextView

android:layout_height="wrap_content"

android:text="Text"

android:layout_width="wrap_content"

android:id="@+id/text_kecil"

android:textColor="#E90D00"/>

</LinearLayout>

Sekarang masuk ke folder src/main/java/inyong/app/contoh/.

Buat class baru dengan nama ItemKu.java. File ini akan kita gunakan untuk menghandle setiap item pada ListView.

Edit file ItemKu.java dan isikan code berikut:

package inyong.app.contoh;
import android.graphics.drawable.*;

public class ItemKu
{
 private String stringUtama;
 private String stringKecil;
 private Drawable gambar;

 public void setStringUtama(String stringUtama)
 {
  this.stringUtama = stringUtama;
 }

 public String getStringUtama()
 {
  return stringUtama;
 }

 public void setStringKecil(String stringKecil)
 {
  this.stringKecil = stringKecil;
 }

 public String getStringKecil()
 {
  return stringKecil;
 }


 public void setGambar(Drawable gambar)
 {
  this.gambar = gambar;
 }

 public Drawable getGambar()
 {
  return gambar;
 }}

Sekarang buat class satu lagi dengan nama AdapterKu.java. Class ini bertugas sebagai adapter untuk menghubungkan data (yg berupa list (daftar) dari object ItemKu) dengan Object ListView yang ada di main.xml.

Edit dan masukkan code berikut:

package inyong.app.contoh;
import android.content.*;
import android.view.*;
import android.widget.*;
import java.util.*;

public class AdapterKu extends BaseAdapter
{

 private ArrayList listKu;
 private LayoutInflater layoutInflaterKu;

 public AdapterKu(Context c, ArrayList list)
 {
  this.listKu = list;
  this.layoutInflaterKu = LayoutInflater.from(c);
 }

 @Override
 public int getCount()
 {
  // TODO: Implement this method
  return listKu.size();
 }

 @Override
 public Object getItem(int posisi)
 {
  // TODO: Implement this method
  return listKu.get(posisi);
 }

 @Override
 public long getItemId(int posisi)
 {
  // TODO: Implement this method
  return posisi;
 }

 private static class PenampungView
 {
  TextView textUtama;
  TextView textKecil;
  ImageView imageIkon;
 }

 @Override
 public View getView(int posisi, View view, ViewGroup p3)
 {
  // TODO: Implement this method
  PenampungView penampung;
  if (view == null)
  {
   view = layoutInflaterKu.inflate(R.layout.list_item, p3, false);
   penampung = new PenampungView();
   penampung.textUtama = (TextView)view.findViewById(R.id.text_utama);
   penampung.textKecil = (TextView)view.findViewById(R.id.text_kecil);
   penampung.imageIkon = (ImageView)view.findViewById(R.id.image);
   view.setTag(penampung);
  }
  else
  {
   penampung = (PenampungView)view.getTag();
  }

  penampung.textUtama.setText(listKu.get(posisi).getStringUtama());
  penampung.textKecil.setText(listKu.get(posisi).getStringKecil());
  penampung.imageIkon.setImageDrawable(listKu.get(posisi).getGambar());

  return view;
 }

}

Langkah terakhir yaitu kita edit MainActivity.java untuk menghubungkan class class yang tadi kita buat.

Edit class MainActivity.java dan rubah menjadi seperti berikut:

package inyong.app.contoh;

import android.app.*;
import android.os.*;
import java.util.*;
import android.widget.*;
import android.graphics.drawable.*;

public class MainActivity extends Activity
{
 private ListView listViewKu;
 private ArrayList listData;
 private AdapterKu adapterKu;

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
  listViewKu = (ListView)findViewById(R.id.mainListView);
  listData=new ArrayList();
  adapterKu = new AdapterKu(this, listData);
  listViewKu.setAdapter(adapterKu);

  testingSetUpListData();
    }

 private void testingSetUpListData()
 {
  String[] textUtamaTest={"Mobil","Motor","Kereta","Pesawat Terbang","Blogge Inyong"};
  String[] textKecilTest={"Roda 4","Roda dua","Roda banyak","Roda gak tau","tutorial-aide.blogspot.com"};

  ItemKu item;
  Drawable gambar=getResources().getDrawable(R.drawable.ic_launcher);
  for (int i=0;i < textUtamaTest.length;i++)
  {
   item = new ItemKu();
   item.setGambar(gambar);
   item.setStringUtama(textUtamaTest[i]);
   item.setStringKecil(textKecilTest[i]);
   listData.add(item);
  }

  adapterKu.notifyDataSetChanged();
 }
}