Tutorial Listview dengan Ikon gambar

negara

Membuat listview berupa data teks tentunya bukanlah hal yang menarik. Akan lebih bagus jika listview yang kita buat diberi ikon disisi kirinya. Misalkan jika anda menampilkan listview tentang mobile phone, bagusnya ada ikon gadget. Jika membuat listview menu restoran, akan lebih bagus ada icon restoran atau icon makanan.

Dalam tutorial kali ini, kita akan menampilkan daftar negara dengan ikon disamping kirinya. Untuk membuat listview seperti ini,kita harus membuat custom Adapter. Adapter adalah komponen di android yang akan ‘mengikat’ model data dengan ‘view’ di listview. Gambar dibawah ini adalah hasil dari tutorial custom listview yang akan kita buat.

negara

Beberapa file yang harus dibuat adalah

  1. list_country.xml
  2. CountryAdapter.java
  3. ListCountryActivity.java
  4. world.png , letakan file ini di folder drawable. Silahkan ganti dengan gambar lain sesuka anda.

List_country.xml

Layout XML yang berisi imageview dan textview untuk menampung icon gambar dan textnya

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

    <ImageView
        android:id="@+id/logo"
        android:layout_width="40px"
        android:layout_height="40px"
        android:layout_marginLeft="5px"
        android:layout_marginRight="20px"
        android:layout_marginTop="5px"
        android:src="@drawable/world" >
    </ImageView>

    <TextView
        android:id="@+id/label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@+id/label"
        android:textSize="20px" >
    </TextView>

</LinearLayout>

CountryAdapter

Berisi kelas yang bertanggung jawab untuk mengikat model data dengan view.

package com.listdemo;

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 CountryAdapter extends ArrayAdapter<String> {
	private final Context context;
	private final String[] values;

	public CountryAdapter(Context context, String[] values) {
		super(context, R.layout.list_country, values);
		this.context = context;
		this.values = values;
	}

	@Override
	public View getView(int position, View convertView, ViewGroup parent) {
		LayoutInflater inflater = (LayoutInflater) context
				.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
		View rowView = inflater.inflate(R.layout.list_country, parent, false);
		TextView textView = (TextView) rowView.findViewById(R.id.label);
		ImageView imageView = (ImageView) rowView.findViewById(R.id.logo);
		textView.setText(values[position]);

		imageView.setImageResource(R.drawable.world);

		return rowView;
	}
}

ListCountryActivity

Kode untuk menampilkan listview dengan custom Adapter yang telah kita buat sebelumnya.

package com.listdemo;

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

public class ListCountryActivity extends ListActivity {

	static final String[] COUNTRY = new String[] { "Indonesia", "Malaysia",
			"Brunai", "Jerman", "Inggris" };

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setListAdapter(new CountryAdapter(this, COUNTRY));

	}

	@Override
	protected void onListItemClick(ListView l, View v, int position, long id) {

		// get selected items
		String selectedValue = (String) getListAdapter().getItem(position);
		Toast.makeText(this, selectedValue, Toast.LENGTH_SHORT).show();

	}

}

Kekurangan tampilan listview

Tampilan listview ini sudah cukup dibanding hanya listview yang berisi teks, namun saya yakin sebagian dari anda akan bertanya, bisa ga ya kalau gambar iconnya beda untuk masing masing negara. misalkan bendera merah putih untuk indonesia, bendera inggris untuk negara inggris. Jawabannya bisa!. Caranya bagaimana? akan dibahas ditutorial selanjutnya

Author: Candra Adi Putra

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

4 thoughts on “Tutorial Listview dengan Ikon gambar”

  1. ga bisa jalan aplikasinya dan terdapt pesan error.
    “CountryAdapter has no zero argument constructor”.
    tolong pencerahannya…min

Tinggalin komentar dong!