Selamat sore semuanya :),
Kali ini aku mau berbagi pengetahuan mengenai bagaimana caranya membuat tampilan ListView di Android dengan layout (susunan item bisa lebih dari 1 baris dan style yang lebih menarik) yang sesuai dengan keinginan kita. Dan data yang ditampilkan dalam listview ini nanti, adalah mengambil dari dalam database SQLite.

Contoh hasil jadi dari aplikasi ini nanti adalah seperti gambar berikut :

Intinya, gimana caranya kita membuat sebuah ListView di Android dengan susunan seperti ini :

Judul Item
Sub item detil

Karena kebanyakan ListView yang standard bawaannya, hanya akan menampilkan di bagian atas saja dari contoh tersebut. Untuk dapat melakukan/membuat tampilan seperti itu, kita membutuhkan bantuan BaseAdapter atau jika ingin lebih lagi bisa pakai ArrayAdapter.

Pertama, kamu buat Android Project baru silahkan kasih nama apa. Dalam kasus ini, Main Activity nya aku beri nama DaftarPenagihan. Sebelum itu, kalian perlu mempersiapkan 1 buah database dengan nama penagihan (karena dalam tutorial ini aku pakai database dengan nama tersebut :D), dan jangan lupa setelah membuat file database ini, taruh file nya di dalam workspace kamu di dalam folder assets, berikut adalah susunan tabelnya :

Dan berikut adalah list source code masing-masing file,, bisa kamu copy paste atau langsung download projectnya nanti.

[sourcecode language=”xml”]
<!– main.xml –>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_gravity="center"
android:paddingLeft="15dp"
android:paddingRight="15dp"
android:background="@drawable/background" >

<ListView
android:id="@+id/listViewSMS"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
</ListView>

</LinearLayout>

// DataPenagihan.java

package com.wjc.penagihan;

import java.util.ArrayList;
import android.os.Bundle;
import android.widget.ListView;
import android.app.Activity;

public class DaftarPenagihan extends Activity {

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

        ListView lViewPenagihan = (ListView) findViewById(R.id.listViewSMS);
        MyDatabaseHandler db = new MyDatabaseHandler(this);
        ArrayList<Penagihan> pnghList = db.getAllPenagihan();
        lViewPenagihan.setAdapter(new MyAdapter(this, pnghList));
    }
}

2 File pasti otomatis akan terbuat saat kalian membuat project, kalian hanya perlu menyesuaikan 2 file yang sudah dibuat tersebut dengan contoh tersebut diatas :). Kemudian kalian perlu membuat 3 buah file Java Class dan 1 xml file layout lagi. Berikut ini adalah list filenya :

Berikut ini file layout_daftar.xml, adalah file penting yang perlu ada. File inilah yang menetukan bagaimana nantinya tampilan ListView yang kita buat. Jadi kalo bisa silahkan dikembangkan sesuai dengan keinginan

[sourcecode language=”xml”]
<!– layout_daftar.xml –>

<?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" >

<TextView
android:id="@+id/tv_nama"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium" />

<TextView
android:id="@+id/tv_detail"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

</LinearLayout>

Berikut ini adalah class yang menangani untuk proses olah database penagihan.db yang sudah kita buat tadi.

// MyDatabaseHandler.java

package com.wjc.penagihan;

import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.util.ArrayList;
import java.util.List;

import android.content.ContentValues;
import android.content.Context;
import android.database.Cursor;
import android.database.SQLException;
import android.database.sqlite.SQLiteDatabase;
import android.database.sqlite.SQLiteException;
import android.database.sqlite.SQLiteOpenHelper;

public class MyDatabaseHandler extends SQLiteOpenHelper {
	private static String DB_PATH = "/data/data/com.wjc.penagihan/databases/";
	private static String DB_NAME = "penagihan.db";
	private final Context _context;
	private SQLiteDatabase db;

	private static final int DATABASE_VERSION = 1;

	public MyDatabaseHandler(Context context) {
		super(context, DB_NAME, null, DATABASE_VERSION);
        this._context = context;
	}

	@Override
	public void onCreate(SQLiteDatabase db) {

	}

	@Override
	public void onUpgrade(SQLiteDatabase db, int arg1, int arg2) {

	}

	public void createDataBase() throws IOException{
        boolean dbExist = checkDataBase();
        if(dbExist){
        }else{
        	this.getReadableDatabase();
        	try {
        		copyDataBase();
        	} catch (IOException e) {
        		throw new Error("Error copying database");
        	}
        }
    }

    private boolean checkDataBase(){
        SQLiteDatabase checkDB = null;
        try{
            String myPath = DB_PATH + DB_NAME;
            checkDB = SQLiteDatabase.openDatabase(myPath, null, SQLiteDatabase.OPEN_READWRITE);

        }catch(SQLiteException e){
        }
        if(checkDB != null){
            checkDB.close();
        }

        return checkDB != null ? true : false;
    }

    private void copyDataBase() throws IOException{
        InputStream myInput = _context.getAssets().open(DB_NAME);
        String outFileName = DB_PATH + DB_NAME;
        OutputStream myOutput = new FileOutputStream(outFileName);
        byte[] buffer = new byte[1024];
        int length;
        while ((length = myInput.read(buffer))>0){
            myOutput.write(buffer, 0, length);
        }
        myOutput.flush();
        myOutput.close();
        myInput.close();
    }

    public void openDataBase() throws SQLException{
    	String myPath = DB_PATH + DB_NAME;
    	db = SQLiteDatabase.openDatabase(myPath, null, SQLiteDatabase.OPEN_READWRITE);
    }

    @Override
    public void close() {
    	if(db != null)
    		db.close();
	    super.close();
    }

	public ArrayList<Penagihan> getAllPenagihan(){
		if(db != null)
    		db.close();
		openDataBase();
		String tgl = new Penagihan().getCurrentDate();
		db.delete("daftar", "tanggal_input <> ?", new String[]{tgl});

		ArrayList<Penagihan> pngList = new ArrayList<Penagihan>();
		String query = "SELECT nama_pelanggan, jumlah_bayar, jenis_bayar FROM daftar";
		Cursor cur = db.rawQuery(query, null);
		if(cur.moveToFirst()){
			do{
				Penagihan png = new Penagihan();
				png.setDaftarPlg(cur.getString(0));
				png.setDaftarJumlahBayar(cur.getString(1));
				png.setDaftarBayar(cur.getString(2));
				pngList.add(png);
			}while(cur.moveToNext());
		}
		cur.close();
		return pngList;
	}
}

Berikut ini adalah class yang digunakan untuk helper dalam mengakses data sementara untuk olah database.

// Penagihan.java

package com.wjc.penagihan;

public class Penagihan {
	private String d_plg, d_jumlah, d_bayar;

	public void setDaftarPlg(String plg){
		d_plg = plg;
	}

	public String getDaftarPlg(){
		return d_plg;
	}

	public void setDaftarBayar(String byr){
		d_bayar = byr;
	}

	public String getDaftarBayar(){
		return d_bayar;
	}

	public void setDaftarJumlahBayar(String byr){
		d_jumlah = byr;
	}

	public String getDaftarJumlahBayar(){
		return d_jumlah;
	}
}

Dan ini file terakhir, adalah file BaseAdapter yang digunakan untuk membaca data dari database kemudian ditampilkan ke dalam listview yang sudah kita design pada file layout_daftar.xml tersebut diatas.

package com.wjc.penagihan;

import java.util.ArrayList;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.TextView;

public class MyAdapter extends BaseAdapter {
	private static ArrayList<Penagihan> daftarPenagihan;
	private LayoutInflater myInflater;

	public MyAdapter(Context context, ArrayList<Penagihan> results) {
		daftarPenagihan = results;
		myInflater = LayoutInflater.from(context);
	}

	public int getCount() {
		return daftarPenagihan.size();
	}

	public Object getItem(int arg0) {
		return daftarPenagihan.get(arg0);
	}

	public long getItemId(int arg0) {
		return arg0;
	}

	public View getView(int position, View convertView, ViewGroup parent) {
		ViewHolder holder;
		if(convertView == null) {
			convertView = myInflater.inflate(R.layout.layout_daftar, null);
			holder = new ViewHolder();
			holder.txtName = (TextView) convertView.findViewById(R.id.tv_nama);
			holder.txtDetails = (TextView) convertView.findViewById(R.id.tv_detail);
			convertView.setTag(holder);
		}else{
			holder = (ViewHolder) convertView.getTag();
		}

		holder.txtName.setText(daftarPenagihan.get(position).getDaftarPlg());
		String detil = "Rp "+daftarPenagihan.get(position).getDaftarJumlahBayar()+", "+daftarPenagihan.get(position).getDaftarBayar();
		holder.txtDetails.setText(detil);
		return convertView;
	}

	static class ViewHolder {
		TextView txtName;
		TextView txtDetails;
	}
}

Sekian terima kasih :), semoga sukses dan selamat mencoba. Jika ingin mendownload contoh project ini yang sudah jadi, silahkan download di sini (Contoh Custom ListView Android Multiline Dengan Database)

Related articles

• Create SQLite DB in Android library (stackoverflow.com)
• Database in Android (androidmyway.wordpress.com)
• Android sqlite database error SQLiteException no such column (stackoverflow.com)