Tutorial Android : Menampilkan Gambar Yang Tersimpan di Database ke ListView Android

Badan rasanya masih remuk gara-gara kecelakaan kemarin pagi ketika akan berangkat ke kampus untuk UTS. Motor jupiter Z aka Bejo yang sudah menemani saya hampir 4 tahun belakangan ini head to head langsung dengan honda 80 yang dikemudikan oleh pak tua yang bongol. Si pak tua dengan honda 80-nya tiba-tiba nyelonong dari gang menuju gang selanjutnya, saya yang datang dari arah lainnya gak sempat untuk menginjak rem dan saya bersama si Bejo tengkurap di tengah jalan, begitu juga si pak Tua bersama honda 80-nya. Tak tanggung-tanggung, selebor depan+lampu depan si Bejo pecah. Ketika akan membangunkan si Bejo, saya ceramahi si pak Tua dan beliau cuma bisa bengong. Mau minta ganti rugi juga kasian, jadi ingat sama si Engkong di kampus. Karena takut telat, saya ikhlaskan saja si Bejo cacat di bagian depannya. Setelah bersalaman dengan si pak Tua, saya langsung meluncur ke kampus dengan kaki lecet gara-gara nempel di mesin yang panas. Lebih apesnya lagi, ternyata saya baru tau kalau jadwal ujian masih sekitar 1 jam lagi. Yaw beginilah akibatnya kalau bangun telat gara-gara begadang+salah lihat jadwal.

Hari ini UTS yang saya ikuti sudah selesai, lumayanlah ada waktu 1 minggu nganggur setelah UTS yang bisa dipakai untuk belajar. Nah, pada postingan kali ini saya akan membahas tentang android (lagi), kebetulan juga kemarin sempat ada yang bertanya cara menampilkan gambar yang tersimpan di dalam database ke dalam sebuah listview, mirip-mirip seperti aplikasi detik.com yang berjalan di android. Saya coba baca-baca dokumentasinya di developer.android.com, ternyata kita bisa menggunakan ArrayList<Drawable>. Kemudian untuk penempatan gambarnya, tinggal mengesetnya saja dengan fungsi setImageDrawable(Drawabale draw). Biasanya ketika gambar diambil dari internet, dia akan menyimpannya di dalam cache. Jika hanya menggunakan fungsi yang tadi saya sebutkan, manajemen cache belum cukup baik. Iseng-iseng saya browsing class-class khusus yang sudah siap pakai untuk mengambil gambar dan menampilkannya ke dalam listview di situs Github. Akhirnya ketemu sebuah project yang dibuat oleh Fedor Vlasov, yang manajemen cache-nya sudah baik. Kita hanya perlu memanfaatkan+modifikasi pada class-class tersebut. Disini saya memodifikasi class LazyAdapter, yang sebagai pengganti listadapter seperti di tutorial tentang listview sebelumnya. Daripada kelamaan, kita langsung aja ke cara penggunaannya, cekidot gan…

1. Disini saya menggunakan JSON, jadi kita siapkan sebuah class JSONParser seperti di tutorial listview sebelumnya. Silahkan download juga class-class pada link https://github.com/thest1/LazyList/tree/master/src/com/fedorvlasov/lazylist.

2. Studi kasusnya kita akan menampilkan konten berita beserta thumbnailnya pada sebuah listview. Kita buat terlebih dahulu file php untuk mengambil data dari database yang formatnya sudah disusun sesuai aturan JSON.

<?php
include("koneksi.php");
$q = mysql_query("SELECT * FROM tbl_artikel");
$v = '{"berita" : [';
while($r=mysql_fetch_array($q))
{
	if(strlen($v)<15)
	{
		$v .= '{"judul" : "'.strip_tags($r['judul']).'", "gambar" : "http://10.0.2.2/android/gb_berita/'.strip_tags($r['gambar']).'", "tanggal" : "'.$r['tanggal'].'", "waktu" : "'.$r['waktu'].'"}';
	}
	else
	{
		$v .= ',{"judul" : "'.strip_tags($r['judul']).'", "gambar" : "http://10.0.2.2/android/gb_berita/'.strip_tags($r['gambar']).'", "tanggal" : "'.$r['tanggal'].'", "waktu" : "'.$r['waktu'].'"}';
	}

}
$v .= ']}';
	echo $v;
?>

3. Buat sebuah project android baru, seperti di bawah ini :

4. Copy class-class yang sudah didownload tadi ke dalam folder src, sehingga susunannya seperti di bawah ini :

5. Kita memerlukan 2 buah file layout, layout pertama (main.xml) berisi sebuah listview untuk menampung layout data dari listview kedua. Layout kedua (list_row.xml) berisi data dan gambar yang sudah berisikan hasil parsing dari file JSON.

main.xml

<?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="fill_parent"
    android:orientation="vertical">

    <ListView
        android:id="@+id/list"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:divider="#b5b5b5"
        android:dividerHeight="1dp" />

</LinearLayout>

list_row.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:padding="7dip" >

	<LinearLayout android:id="@+id/gbr"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:padding="3dip"
        android:layout_alignParentLeft="true"
        android:background="#F0F0F0"
	    android:layout_marginRight="5dip">

		<ImageView
			android:id="@+id/gambar"
	        android:layout_width="80dip"
	        android:layout_height="80dip"
	        android:src="@drawable/no"/>

	</LinearLayout>

    <TextView
        android:id="@+id/judul"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/gbr"
        android:layout_toRightOf="@+id/gbr"
        android:textColor="#fff"
        android:textSize="13dip"
        android:textStyle="bold"/>

    <TextView
        android:id="@+id/tanggal"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/judul"
        android:textColor="#fff"
        android:textSize="11dip"
        android:textStyle="bold"
        android:layout_marginTop="3dp"
        android:layout_toRightOf="@+id/gbr" />

</RelativeLayout>

6. Edit file TampilkanGambarActivity.java, ketik kode di bawah ini untuk menggunakan semua class-class adapter image di atas.

public class TampilkanGambarActivity extends Activity {

	static String in_judul = "judul";
	static String in_waktu = "tanggal";
	static String in_gambar = "gambar";
	JSONArray str_json = null;
	public String lo_Koneksi,isi ;

	ListView list;
    LazyAdapter adapter;
	ArrayList<HashMap<String, String>> data_map = new ArrayList<HashMap<String, String>>();

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

        Koneksi lo_Koneksi = new Koneksi();
        isi = lo_Koneksi.isi_koneksi();

        String link_url = isi+"berita.php";
		JSONParser jParser = new JSONParser();
		JSONObject json = jParser.AmbilJson(link_url);

		try {
			str_json = json.getJSONArray("berita");

			for(int i = 0; i < str_json.length(); i++){
				JSONObject ar = str_json.getJSONObject(i);

				String judul = ar.getString("judul");
				String gambar = ar.getString("gambar");
				String waktu = ar.getString("tanggal")+" | "+ar.getString("waktu");

				HashMap<String, String> map = new HashMap<String, String>();

				map.put(in_judul, judul);
				map.put(in_gambar, gambar);
				map.put(in_waktu, waktu);

				data_map.add(map);
			}
		} catch (JSONException e) {
			e.printStackTrace();
		}

		list=(ListView)findViewById(R.id.list);
        adapter=new LazyAdapter(this, data_map);
        list.setAdapter(adapter);
    }
}

7. Seperti yang saya sampaikan tadi, kita perlu menyesuaikan class-class tersebut, terutama LazyAdapter pada method getView().

public View getView(int position, View convertView, ViewGroup parent) {
        View vi=convertView;
        if(convertView==null)

            vi = inflater.inflate(R.layout.list_row, null);

	        TextView judul = (TextView)vi.findViewById(R.id.judul);
	        TextView tanggal = (TextView)vi.findViewById(R.id.tanggal);
	        ImageView gambar=(ImageView)vi.findViewById(R.id.gambar);

	        HashMap<String, String> berita = new HashMap<String, String>();
	        berita = data.get(position);

	        judul.setText(berita.get(TampilkanGambarActivity.in_judul));
	        tanggal.setText(berita.get(TampilkanGambarActivity.in_waktu));
	        imageLoader.DisplayImage(berita.get(TampilkanGambarActivity.in_gambar), gambar);
	        return vi;
    }

8. Karena mengakses http dan menggunakan cache, kita perlu menambahkan permision untuk mengakses internet dan menuliskan data ke memory card di file AndroidManifest.xml.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="dlmbg.pckg.tampil.gambar"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk android:minSdkVersion="10" />

    <application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name" >
        <activity
            android:name=".TampilkanGambarActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

	<uses-permission android:name="android.permission.INTERNET" />
	<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

</manifest>

9. Jalankan aplikasi via emulator dan hasilnya kira-kira seperti di bawah ini :

Nah…dengan modal di atas, kita sudah dapat membuat sebuah aplikasi RSS reader seperti aplikasi detik.com untuk android. Tinggal membuat API web service-nya yang handal dan lumayan bisa dipakai bahan tugas akhir ataupun skripsi :ngakaks:. Bagi yang masih bingung, di bawah ini sudah saya sediakan file lengkapnya. Silahkan dipelajari dan jangan lupa untuk dibagikan. OK deh, sekian dulu postingan saya kali ini, semoga bermanfaat untuk kita semua.

Happy Blogging and Keep Coding

Cheerrrss….!!!!

[to_like][/to_like]

70 comments

  1. apiet Reply

    pertamax gan….caranya membuat menu button dinamis gimn gan……nice share

  2. afgan Reply

    mas gede kan sudah saya buat Grid view berhasil…..untuk menaruh ClickOnListenernya dimana tolng gan kasih tau.

  3. afgan Reply

    Mas itu listviewnya kalo di click, trus pindah ke class lainya gimana caranya..tolong mas di bantu……. mentok di situ ane mas

  4. arif Reply

    mas,,ko pas saya coba masukin gambar dr saya sndri ko gk bsa nampil ya??sdangkan gmbar yg uda bwaannya bsa ditampilin???

    • Joko Reply

      sama mas, saya juga kaya gitu, masih ada bugnya ni kodingan -.-“

  5. safii Reply

    Caranya nambahin detail aktivitynya gimana. Jadi ketika listview di click pindah ke activity detail… ente bisa gak bosssss

      • Ryoza Morugakiro Reply

        tolong di share donk caranya gan,…
        ketika listview di click pindah ke activity detail…

      • Ary Ceno Reply

        Ane mnta sharingnya jg dong gan activity untuk ke detail dari per beritanya.? 🙂

  6. venny Reply

    Gan, saya kan coba masukkin ke eclipse untuk project yang agan kasi linknya, trus saya coba, kok ga bisa ya
    erornya :
    Project has no default.properties file! Edit the project properties to set one.

    terus pas di Utils.java itu ada tanda silangnya.
    Gmana solusinya yah gan??
    makasi 🙂

  7. ardey Reply

    gan, itu gambarnya udah kehapus. Tolong diupdate lagi ya gan. Thx

    • Joko Reply

      percuma, walaupun gambarnya di update lagi tetep aja bugnya ga akan hilang -.-“

  8. Joko Reply

    jgn mau tertipu, masih ada ternyata gambarnya cuma muncul di emulatornya aja, setelah diinstall apk-nya di hp, gambarnya ga muncul -.-“

  9. ladur Reply

    Bisa nampil klo nama gambar ga ada spasinya (“satu.jpg”). Tapi klo nama gambar di dalem database ada spasiny (“dua tiga emapat.jpg”) maka tampilan di android jadi “no.jpg” a.k.a ga muncul..

    Pertanyaan nya adalah, ada cara lain ga biar bisa nampilin gambar yg namanya menggunakan spasi.

    Terimakasih sebelumnya.

  10. rai Reply

    mas gede klo ambil gambar dari database local gmn caranya? pake sqlite gtu? tolong penjelasannya mas, klo da tutorialnya boleh di share

    • Gede Lumbung Post authorReply

      hampir sama seperti cara yang di atas, cuma path direktorinya aja yang disesuaikan
      misalnya /sdcard/images/nama_gambar.jpg

  11. nizam Reply

    bagus gann tutor nya tapi kok untuk screen shot UI nya ada yang muncul ada yg ga ya??

    ane minat banget ni . pengen bkin SI berbasis android

  12. Rdiksa Reply

    Bang, terkadang waktu ane coba nampilin 50 baris sekaligus, malah force close, dengan pesan gini

    `OutOfMemoryError`

    Itu bijimane solusinya?

    • Gede Lumbung Post authorReply

      kalo gambar memang sering begitu, secara tidak langsung jika memanggil gambar akan menyimpan cache di memory internal
      solusinya gunakan limit, atau tambahkan fungsi load more
      sehingga ketika aplikasi baru dijalankan, data tidak langsung ditampilkan semua
      tutorial utk limit data akan saya posting di bulan depan

  13. Adhi Ismail Hasan Reply

    baca komen disebelum2nya menyeramkan… pada ga sabar.. ga mau repot nyari2.. maunya serba cepat & instant.. al hasil malah marah2 & lupa berterimakasih..
    waduh indonesia banget… @@

    • orang pintar Reply

      namanya juga orang TOLOL gan 😀 mau enaknya doang wkwkwkwkwk

      giliran ada yg error ga mau ngoprek ckckck sampah

  14. Basribaz Reply

    blm ada action klikx ya gan…?

    btw kalau ditampilkan dengan activity gimana tuh gan? mohon pencerahan, thanks

  15. Basribaz Reply

    protected void onPostExecute(String file_url) {
    pDialog.dismiss();
    runOnUiThread(new Runnable() {
    public void run() {

    ListAdapter adapter = new SimpleAdapter(
    MainActivity.this, data_map,
    R.layout.list_row, new String[] { in_nama_wisata,in_gambar },
    new int[] {R.id.nama_wisata,R.id.gambar});
    setListAdapter(adapter);

    gambar tidak tampil gan, mohon pencerahan…. 🙂
    thanks

  16. alfi Reply

    kalo mau liat file xml dari halaman web yg pngen diparsing gmna bro ? kalo yg dparsing file .php (waralabaku.com/event_index.php) mau ambil data judul,tgl,pelaksana,detail gitu pake apa ?

  17. harysay Reply

    Bli, kalo mau dibuat pke asynctask dalam fragment gimana ya dibagian onPostExecute nya?

    protected void onPostExecute(String file_url) {
    pDialog.dismiss();
    getActivity().runOnUiThread(new Runnable() {
    public void run() {
    list=(ListView)findViewById(R.id.list);
    adapter=new LazyAdapter(getActivity(), data_map);
    list.setAdapter(adapter);
    }
    });

    muncul error “list cannot be resolved or is not a field” di baris list=(ListView)findViewById(R.id.list);
    Layout nya pake id kek gni:

    Kira-kira gimana solusinya ya?
    Mohon bantuannya…

  18. WIRA Reply

    gan bisa gak bantuin spy data dari web ku bs ngrim data ke app aku?mhon bantuannya

  19. rahman Reply

    Mas gedelumbung ..
    gmn caranya mengambil gambar dari device android lalu datanya disimpan di Mysql ??
    bisa ga ya ??

  20. findi Reply

    gan ane mau nanya ..
    kan saya downlod tuh program terus saya jalanin tapi tidak bisa muncul pesan

    Unfortunately, TampilkanGambar has stopped

    apa yang agan kasih source ea emg masih ada error atau g..?

  21. pearlymaccha Reply

    Mas, saya ada masalah di “TampilkanGambarActivity.java”, baris 2 terakhir:

    adapter = new LazyAdapter(this, data_map);

    katanya: “The constructor LazyAdapter(MainActivity, ArrayList<HashMap>) is undefined”

    ini kira-kira kenapa ya mas? Saya udah coba ganti di LazyAdapter.java nya tapi masih error. Mohon bantuannya, terima kasih mas Gede 🙂

  22. Alexander Reply

    Bli kalo menampilkan gambar yg dah kesimpen di sqlite ke gridview gimana?
    Aku dah nguprek2 tapi gambar yg muncul cuma gambar pertama doang, gambar ke-2 dst nggak muncul malah gambarnya sama dgn gambar yg pertama. Dah ambil dr dokumentasinya gridview di developer.android tetep aja tampilannya kayak gitu. Makasih.

  23. rochim Reply

    terima kasih gan tutorial ini sangat membantu dalam project kuliah ane ….. maju teruus gedelumbung.com

    • ValeksIndehooy Reply

      setelah ane baca2 kalau di atas ginger harus nambah coding
      ” StrictMode.ThreadPolicy policy = new StrictMode.ThreadPolicy.Builder().permitAll().build();
      StrictMode.setThreadPolicy(policy); ”
      tanpa tanda kutip

  24. Imam Reply

    gan ane udah coba…
    ada gambar yang tampil dan ada yang gak tampil…
    itu solusinya gimana…
    padahal json udah bener
    tapi pas coba akses alamat gambarnya lewat broser di emulator berhasil

    tolong pencerahannya

  25. Ary Ceno Reply

    Caranya nambahin detail aktivitynya gimana ya bli..? Jadi ketika listview di click pindah ke activity detail dari berita yang di klik tersebut.. 🙂

  26. alin Reply

    mau tanya, untuk list_row.xml kan ada imageview, untuk @drawable/no itu boleh gambar apa aja?

  27. Sutrisno Reply

    Gan, ko aplikasinya error ya pda saat di running.
    Saya download dari link yg dikasih itu.
    Tolong penjelasannya ya gan!
    Thnks