Android ListView

Versi 1.0

1. Mengenal ListView

ListView adalah user interface pada Android yang menampilkan item-item dari sekumpulan daftar yang tersusun berbaris ke bawah atau ke samping dengan tampilan yang dapat scroll. ListView menampilkan item-item dari suatu Array atau List atau Query Database yang dijadikan data model sebagai item dari ListView. Tampilan dari ListView sederhana seperti berikut ini.

2. Adapter

Adapter adalah class yang mengatur item-item pada ListView. Adapter mengatur resource view pada setiap item dari ListView. Resource view pada ListView yang ada pada sebuah tampilan layar sebuah aplikasi memiliki jumlah resource view yang tetap sesuai dengan item yang tampak pada layar. Pada ListView dengan tampilan scroll, resourve view akan digunakan secara berulang (reusable) dengan mengatur item yang tampak dan yang tersembunyi pada ListView. Adapter juga mengatur data model dari setiap item ListView. Sebuah data model akan diatur menjadi sebuah item dari ListView. Gambar sebuah item dari ListView sederhana :

3. Membuat ListView Sederhana

ListView dikatakan sederhana atau komplek ditentukan oleh kompleksitas item dari ListView tersebut. Jika masing-masing item dari ListView menampilkan sebuah kata atau kalimat saja, maka ListView tersebut sederhana. Jika masing-masing item dari ListView memiliki isi yang komplek seperti item dari sebuah status jejaring sosial dimana pada masing-masing item memiliki foto profil, nama, waktu, status dan komentar, maka ListView tersebut adalah ListView komplek. Pembuatan ListView komplek dilakukan dengan Custom ListView.

Untuk membuat ListView sederhana, kita buat terlebih dahulu file layout.xml pada folder layout. Copy-paste code di bawah ini pada file tersebut.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <ListView
        android:id="@+id/id_list"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

Kemudian kita buat class MainActivity (class ini biasanya sudah dibuat otomatis pada project). Hapus isi class tersebut kemudian copy-paste code di bawah ini pada class tersebut.

import android.os.Bundle;
import android.app.Activity;
import android.widget.ArrayAdapter;
import android.widget.ListView;

public class MainActivity extends Activity {

        @Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.layout);

		String[] arrName = {"Samsung","Sony","Apple","LG","Motorola",
		"HTC","Acer","Lenovo","Oppo","Nokia","BlackBerry","Huawei",
		"ZTE","Meizu","HP","Asus","Panasonic"};

		ArrayAdapter adapter = new ArrayAdapter(this,
		android.R.layout.simple_list_item_1, arrName);

		ListView listView = (ListView) findViewById(R.id.id_list);
		listView.setAdapter(adapter);
	}
}

Array String[] arrName merupakan kumpulan data String yang akan ditampilkan pada ListView. Array ini dimasukkan ke dalam object dari ArrayAdapter yang bernama adapter. Adapter ini merupakan adapter sederhana yang hanya menampilkan sebuah TextView pada item ListView. Code ListView listView = (ListView) findViewById(R.id. id_list); membuat object dari class ListView dengan menginisiasi object tersebut dengan ListView yang kita buat pada file layout.xml. Jalankan project, maka ListView tampil seperti berikut ini.

4. Membuat Custom ListView

Custom ListView merupakan ListView dengan item yang bisa kita buat sesuai selera, misalnya item yang memiliki atribut foto, nama, dan keterangan. Item yang custom seperti itu dapat dibuat dan diatur oleh class Adapter. Contoh Item pada Custom ListView:

Untuk membuat Custom ListView, kita buat terlebih dahulu layout-layoutnya. Kita membutuhkan 2 layout, yaitu layout halaman yang menampilkan ListView dan layout item untuk Adapter.

Layout halaman kita buat dengan membuat file layout.xml di dalam folder layout dengan isi seperti ini :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <ListView
        android:id="@+id/id_list"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

Layout item untuk Adapter kita buat dengan membuat file item.xml di dalam folder layout dengan isi seperti ini :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:padding="8dp" >

    <ImageView
        android:id="@+id/item_icon"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_marginRight="8dp" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/item_nama"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Galaxy S4"
            android:textSize="18sp" />

        <TextView
            android:id="@+id/item_keterangan"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Samsung"
            android:textSize="12sp" />
    </LinearLayout>

</LinearLayout>

Kemudian kita siapkan gambar yang menjadi icon dari item ListView. Saya pakai gambar Android seperti ini dengan ukuran 48 x 48 px (panjang x lebar harus sama). Kita simpan gambar pada folder drawable-hdpi dengan nama icon.png.

Kemudian kita buat sebuah class data model dari item ListView yang bernama class Phone. Object dari class ini akan menyimpan data-data yang akan ditampilkan pada item dari ListView. Sebuah object dari class Phone akan ditampilkan pada sebuah item dari ListView. Kita buat class yang bernama Phone.java dengan isi class sebagai berikut.

public class Phone {

	private String name;
	private String brand;

	public Phone(String name, String brand) {
		setName(name);
		setBrand(brand);
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public String getBrand() {
		return brand;
	}

	public void setBrand(String brand) {
		this.brand = brand;
	}
}

Kemudian kita buat class Adapter. Class Adapter adalah class yang akan membuat dan mengatur item-item dari ListView. Class ini mengkonversi data dari object Phone menjadi item dari ListView. Kita buat class yang bermama ListAdapter.java dengan isi class sebagai berikut :

import java.util.ArrayList;

import android.app.Activity;
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 ListAdapter extends ArrayAdapter {

	private ArrayList list;
	private Activity act;

	public ListAdapter(Activity context, ArrayList objects) {
		super(context, R.layout.item, objects);
		this.list = objects;
		this.act = context;
	}

	static class ViewHolder {
		protected ImageView icon;
		protected TextView nama;
		protected TextView keterangan;
	}

	@Override
	public View getView(int position, View convertView, ViewGroup parent) {
		View view = convertView;
		if (view == null) {
			LayoutInflater inflater = act.getLayoutInflater();
			view = inflater.inflate(R.layout.item, null);

			ViewHolder holder = new ViewHolder();
			holder.icon = (ImageView) view.findViewById(R.id.item_icon);
			holder.nama = (TextView) view.findViewById(R.id.item_nama);
			holder.keterangan = (TextView) view
					.findViewById(R.id.item_keterangan);
			view.setTag(holder);
		}

		ViewHolder holder = (ViewHolder) view.getTag();
		Phone phone = list.get(position);

		holder.icon.setImageResource(R.drawable.icon);
		holder.nama.setText(phone.getName());
		holder.keterangan.setText(phone.getBrand());

		return view;
	}
}

Kemudian kita buat class MainActivity (class ini biasanya sudah dibuat otomatis pada project) sebagai class controller yang mengelola pembuatan Custom ListView. Buat class MainActivity.java dengan isi sebagai berikut :

import java.util.ArrayList;

import android.os.Bundle;
import android.app.Activity;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ListView;
import android.widget.Toast;

public class MainActivity extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.layout);

		ArrayList list = new ArrayList();
		list.add(new Phone("Galaxy S4", "Samsung"));
		list.add(new Phone("Galaxy S3", "Samsung"));
		list.add(new Phone("Galaxy Mega", "Samsung"));
		list.add(new Phone("Galaxy Note", "Samsung"));
		list.add(new Phone("Iphone", "Apple"));
		list.add(new Phone("HTC One", "HTC"));
		list.add(new Phone("Nexus 5", "LG"));
		list.add(new Phone("Nexus 4", "LG"));
		list.add(new Phone("LG G2", "LG"));
		list.add(new Phone("Moto x", "Motorola"));

		ListAdapter adapter = new ListAdapter(this, list);

		ListView listView = (ListView) findViewById(R.id.id_list);
		listView.setAdapter(adapter);
	}
}

Pada class tersebut kita membuat ArrayList yang berisi object-object dari Phone. ArrayList ini menjadi kumpulan data yang akan ditampilkan pada ListView. Di bawahnya ada object dari class ListAdapter yang bernama adapter. Object ini yang akan dimasukkan pada object dari ListView pada fungsi setAdapter(adapter). Jika project dijalankan, maka ListView akan tampil seperti ini.

5. Click ListView Item

ListView dapat mengenali beberapa event, salah satunya adalah event click. Masing-masing item dari ListView dapat menangkap event click dan memberikan reaksi terhadap event tersebut. Kita akan menangkap event tersebut dan memberikan reaksi sederhana dengan menampilkan sebuah kalimat. Untuk menangkap event click, maka tambahkan code berikut ini pada class MainActivity di bawah code listView.setAdapter(adapter);.

listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {

	@Override
	public void onItemClick(AdapterView<?> arg0, View arg1,
			int position, long arg3) {
		Toast.makeText(MainActivity.this, "Yeahh... I want it...!!!",
				Toast.LENGTH_SHORT).show();
	}
});

Jalankan project maka jika item ListView kita click akan menampilkan kalimat “Yeah… I want it…!!!”.

Tulisan “Yeah… I want it…!!!” muncul sebagai tanggapan dari event click yang kita berikan pada item-item dari ListView.

Yeahhh… if You really want it, you will get it… 🙂

4. Download

Download dan nikmati project dari tutorial ini di sini.

• adapter
• android
• listview
• tutorial