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….!!!!
pertamax gan….caranya membuat menu button dinamis gimn gan……nice share
pertamax gan……
maksutnya listview dirubah menjadi gridview…gan
thx gan,,,
dibikinin juga tutor nya,,, 😀
mas gede kan sudah saya buat Grid view berhasil…..untuk menaruh ClickOnListenernya dimana tolng gan kasih tau.
saya belum pernah nyoba grid view di android mas..
ginimas kemarin kan Tutorial Android : Menampilkan Gambar Yang Tersimpan di Database ke ListView Android saya rubah jadi grid view berhasil…..yang saya tanyakan. untuk menaruh setOnItemClickListenernya dimana… biar bisa pindah ke aktivity lainya gitu!!!
saya belum pernah nyoba GridView mas, coba baca2 aja dulu dokumentasinya di http://developer.android.com/guide/topics/ui/layout/gridview.html
masih ada bugnya, setelah di clear cache, image-nya langsung ilang
Nunggu jawaban dr mas lumbung…..
ga akan dijawab sepertinya
Mas itu listviewnya kalo di click, trus pindah ke class lainya gimana caranya..tolong mas di bantu……. mentok di situ ane mas
itu coba ambil dlu idnya, nah eventnya click berdasarkan id itu
Aku jg nunggu…..
jawabanya
Mas LUMBUNG
AKU JG NUNGGU AHHHHHHH…..
mas,,ko pas saya coba masukin gambar dr saya sndri ko gk bsa nampil ya??sdangkan gmbar yg uda bwaannya bsa ditampilin???
sama mas, saya juga kaya gitu, masih ada bugnya ni kodingan -.-“
Bangsat ra balesi…
Caranya nambahin detail aktivitynya gimana. Jadi ketika listview di click pindah ke activity detail… ente bisa gak bosssss
ane udah bisa gan
tolong di share donk caranya gan,…
ketika listview di click pindah ke activity detail…
Ane mnta sharingnya jg dong gan activity untuk ke detail dari per beritanya.? 🙂
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 🙂
coba mbak update SDK aja..
itu versinya minta 2.3.3
gan, itu gambarnya udah kehapus. Tolong diupdate lagi ya gan. Thx
percuma, walaupun gambarnya di update lagi tetep aja bugnya ga akan hilang -.-“
Coba kodingannya diperiksa lagi, masih ada bug nya ternyata
jgn mau tertipu, masih ada ternyata gambarnya cuma muncul di emulatornya aja, setelah diinstall apk-nya di hp, gambarnya ga muncul -.-“
pertamax gan, nie yg saya cari. thanks
nie yang saya cari mas namun kok masih ada yang salah ya mas
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.
orang tutorialnya aja copas dari blog luar, ya ngertinya sebatas itu doang..
mas gede klo ambil gambar dari database local gmn caranya? pake sqlite gtu? tolong penjelasannya mas, klo da tutorialnya boleh di share
hampir sama seperti cara yang di atas, cuma path direktorinya aja yang disesuaikan
misalnya /sdcard/images/nama_gambar.jpg
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
Bang, terkadang waktu ane coba nampilin 50 baris sekaligus, malah force close, dengan pesan gini
`OutOfMemoryError`
Itu bijimane solusinya?
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
baca komen disebelum2nya menyeramkan… pada ga sabar.. ga mau repot nyari2.. maunya serba cepat & instant.. al hasil malah marah2 & lupa berterimakasih..
waduh indonesia banget… @@
namanya juga orang TOLOL gan 😀 mau enaknya doang wkwkwkwkwk
giliran ada yg error ga mau ngoprek ckckck sampah
blm ada action klikx ya gan…?
btw kalau ditampilkan dengan activity gimana tuh gan? mohon pencerahan, thanks
belum brow
sama saja, tinggal buat activity baru, trus parsing intent yg berisi nama gambarnya
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
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 ?
convert dalam bentuk json brow, pake json_encode()
ada tutorialnya b ? ini ane jga lgi nyari.. , mksih masbrow..
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…
gan bisa gak bantuin spy data dari web ku bs ngrim data ke app aku?mhon bantuannya
Mas gedelumbung ..
gmn caranya mengambil gambar dari device android lalu datanya disimpan di Mysql ??
bisa ga ya ??
pake tutorial ini
http://gedelumbung.com/android-tutorial-membuat-imagepicker-dari-kamera-atau-file-manager-di-android/
tambahkan text field untuk menyimpan nama gambarnya sementara sebelum di post ke mysql, tentunya dengan tambahan php sebagai servicenya
bang gede
gmn caranya nampilin gambar di android brdasarkan id yg qta isikan di editText android
mohon pencerahanya bang 😀
untuk data gambarnya agar tersimpan langsung d mysql gmana mas? jika hanya menambah textfield hanya menyimpan judul gambar aja mas, mohon ramuanya,. 🙂
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..?
coba cek logcatnya boss
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 🙂
Gan kalo untuk halaman detail nya gmn?, posing ya.
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.
mas contohnya kok gak ada gambarnya
Nih kalau dibuatin video tutorial mantep banget… TOP
terima kasih gan tutorial ini sangat membantu dalam project kuliah ane ….. maju teruus gedelumbung.com
gan, kok force close yah ?
apa harus dijalanin di android gingerbread
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
Itu nambah coding nya dmna gan??
nambah coding nya dmna itu gan??
mas, ada tutorial klu aksesnya hanya menggunakan database sqlite ?
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
Caranya nambahin detail aktivitynya gimana ya bli..? Jadi ketika listview di click pindah ke activity detail dari berita yang di klik tersebut.. 🙂
thanks tutorial nya om.. sangat membantu sekali
bang gambarnya ga ke load semua 🙁
mau tanya, untuk list_row.xml kan ada imageview, untuk @drawable/no itu boleh gambar apa aja?
Gan, ko aplikasinya error ya pda saat di running.
Saya download dari link yg dikasih itu.
Tolong penjelasannya ya gan!
Thnks