Jumpa lagi dengan agus haryanto dalam seri tutorial android. Pada tutorial kali ini kita akan bahas mengenai kustomisasi ListView. Selama ini List yang kita gunakan dalam tutorial sebelumnya terlihat kurang menarik hanya text saja, sehingga apa bila dijadikan menu terasa kurang enak dipandang mata, bahasa kerennya eye catching.
Sebetulnya jika kita ingin mencari referensi tentang Kustomisasi ListView ini dapat kita temukan dengan mecarinya di Google dengan menggunakan kata kuncil βCustomize ListViewβ.
Pada Project kali ini kita akan membuat List yang isinya Buah-buahan. Dan hasilnya akan seperti ini.
Untuk itu kita perlu icon buah-buahan yang ditampilkan pada list diatas, anda bisa mencarinya sendiri di internet.
Sekarang Mari kita mulai pembuatan projectnya
1. Buka senjata andalan kita yaitu eclipse, Buat New Androi Project
2. Icon buah-buahan yang sudah kita persiapkan compykan ke directory drawable.
3. Sekarang mari kita edit file main.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#FFFFFF"> <ListView android:id="@+id/listView1" android:layout_width="fill_parent" android:layout_height="fill_parent" android:cacheColorHint="#00000000"/> </LinearLayout>
4. Kita buat layout untuk header dari listview, beri nama list_view_header_row.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="fill_parent"> <TextView android:id="@+id/txtHeader" android:layout_width="fill_parent" android:layout_height="fill_parent" android:gravity="center_vertical" android:layout_alignParentTop="true" android:layout_alignParentBottom="true" android:textStyle="bold" android:textSize="22dp" android:textColor="#FFFFFF" android:padding="10dp" android:text="Buah-buahan" android:background="#8B0000" /> </LinearLayout>
5. Buat Layout untuk item-item pada listview, beri nama listview_item_row.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="fill_parent" android:padding="10dp"> <ImageView android:id="@+id/imgIcon" android:layout_width="wrap_content" android:layout_height="fill_parent" android:gravity="center_vertical" android:layout_alignParentTop="true" android:layout_alignParentBottom="true" android:layout_marginRight="15dp" android:layout_marginTop="5dp" android:layout_marginBottom="5dp" /> <TextView android:id="@+id/txtTitle" android:layout_width="fill_parent" android:layout_height="fill_parent" android:gravity="center_vertical" android:layout_alignParentTop="true" android:layout_alignParentBottom="true" android:textStyle="bold" android:textSize="22dp" android:textColor="#000000" android:layout_marginTop="5dp" android:layout_marginBottom="5dp" /> </LinearLayout>
Untuk layout di item list ini ada komponen ImageView untuk menampilkan icon buah dan TextView untuk menampilkan nama buah
6. Sekarang mari kita ke bagian javanya. Buat Class baru dengan nama Fruit.java
package com.agus.list.fancy; public class Fruit { public int icon; public String title; public Fruit(){ super(); } public Fruit(int icon, String title) { super(); this.icon = icon; this.title = title; } }
7. Buat Class baru lagi untuk adapternya, beri name FruitAdapter.java
package com.agus.list.fancy; import android.app.Activity; 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 FruitAdapter extends ArrayAdapter<Fruit>{ Context context; int layoutResourceId; Fruit data[] = null; public FruitAdapter(Context context, int layoutResourceId, Fruit[] data) { super(context, layoutResourceId, data); this.layoutResourceId = layoutResourceId; this.context = context; this.data = data; } @Override public View getView(int position, View convertView, ViewGroup parent) { View row = convertView; WeatherHolder holder = null; if(row == null) { LayoutInflater inflater = ((Activity)context).getLayoutInflater(); row = inflater.inflate(layoutResourceId, parent, false); holder = new WeatherHolder(); holder.imgIcon = (ImageView)row.findViewById(R.id.imgIcon); holder.txtTitle = (TextView)row.findViewById(R.id.txtTitle); row.setTag(holder); } else { holder = (WeatherHolder)row.getTag(); } Fruit weather = data[position]; holder.txtTitle.setText(weather.title); holder.imgIcon.setImageResource(weather.icon); return row; } static class WeatherHolder { ImageView imgIcon; TextView txtTitle; } }
8. Sekarang mari kita edit MainActivity.java
package com.agus.list.fancy; import android.app.Activity; import android.os.Bundle; import android.view.View; import android.widget.ListView; public class MainActivity extends Activity { private ListView listView1; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); Fruit weather_data[] = new Fruit[] { new Fruit(R.drawable.apple, "Apel"), new Fruit(R.drawable.banana, "Pisang"), new Fruit(R.drawable.strawberry, "Stroberi"), new Fruit(R.drawable.orange, "Jeruk"), new Fruit(R.drawable.tomato, "Tomat") }; FruitAdapter adapter = new FruitAdapter(this, R.layout.listview_item_row, weather_data); listView1 = (ListView)findViewById(R.id.listView1); View header = (View)getLayoutInflater().inflate(R.layout.listview_header_row, null); listView1.addHeaderView(header); listView1.setAdapter(adapter); } }
9. Sekarang kalau kita lihat struktur directory projectnya adalah seperti ini
10. Sekarang mari kita run Project kita, maka hasinya akan seperti ini
Cantik bukan, bedakan dengan List-list yang terdahulu. Kalau diibaratkan List-List terdahulu itu adalah TV Monochrome, sedangkan yang sekarang adalah TV Berwarna.
Semoga Bermanfaat,
Salam Hangat
Agus Haryanto
Sumber
http://www.ezzylearning.com
makasih mas tutornya :D, sangat beramanfaat π
keren maz..coba kl list nya di klik bs msuk ke layout laen gitcu…hhehhee
mksh mas tutornya… π
bagus banget pak tutornya
nice share π
jaya selalu buat pak agus haryanto
pak,kalo mau nge print “Apel”,”Pisang” di main activity itu gimana ya pak,caranya?terima kasih
aslmk
untuk mengcostumize listview yang datanya diambil dari database bagaimana crnya pak?
terimkasih
Keren Mas…
Mas mo nanya dunk… bisa nggak yah Android connect ke foxpro ambil data dbf
to convert dolo ke my sql…? Thanks
Lha ini yang saya cari, terima kasih banyak om agus bisa dibuat tambahan referensi milik saya
Pak kalo listnya di intent masuk ke form lain gmn ya?
mas Agus Haryanto…mau nanya nih,,klw misalkan ingin 2 list dimasukan di main layout..untuk mengatur agar kedua list bisa d tampilkan sempurna,,jadi meskipun melebihi layar device tetep bisa d scrol ke bawah,,,saya udah nyoba,,tp 2 list itu jd kecil soalnya menyesuaikan agar bisa masuk 1 halaman,,bingung,,mohon bantuannya
om agus, kalo mau ngasih action ke form lain gimana ya ? thanks…
mas agus.. koq saya coba, udah bener smua, ga ada kesalahan tetapi pas masuk ke dalam virtual AVD nya, tidak bisa masuk.. tibaΒ² di AVDnya tulisannya “Power Off” , “Shutting down”..
kira-kira salah dimana ya? terima kasih
mas kalo listviewnya kita ketik masuk ke halaman berikutnya gimana ya soalnya ini kan objek buka array onlistitemclick ga berfungsi .. mohon pencerahannya mas
Thanks….
maaf mas agus,,,
saya mau nanya, klw misalnya salah satu list itu di klik trus kita manggil class, di tambah kodingan lagi kan? boleh tau g kodingannya apa?
terima kasih tutorial nya. saya berhasil! keren nih tutorialnya!
Mas kalo saya mempunyai layout baru dan mau dibuka ketika klik salah satu menu utama, gimana caranya ya mas?
tolong pencerahannya…
@chand, pahami konsep intent android
ppermisi kak agus mau nanya,
saya ingin buat listview filter seperti android-helper.blogspot.com/2011/07/android-search-in-custom-listview.html cuma dari SQLite databasenya
kan kalau contoh data-datanya langsung disimpan di array string
gmn caranya data-data di SQLite jadiin ke array string? saya masih bingung gmn caranya, tak begitu mengerti bahasa java.
mohon maaf kalau pertanyaannya kurang jelas, thx.
thank you mas…tutorialnya ane ikutin trus dari awal..
sangat bermanfaat mas buat pengetahuan ane..
Sukses trus mas Bro!!
bagaimana menampilkan data yang ada di database mysql misalnya tabel mahasiswa id_mhs, nm_mhs kemudian seluruh data di tabel mahasiswa id dan namanya akan ditampilkan di android menggunakan listview dan checkbox dengan menggunakan for kemudian data yang tampil dapat di pilih (dichek) dan di simpan ke tabel lain berdasarkan pilihan dari user atau pengguna ?? mohon bantuannya
@eka. belum sempat bikin tutorialnya. sementara ini coba googling dulu yah, harusnya sih tidak sulit
gmana cranya mnampilkan data selanjutnya ketika list trsebut diklik ??
pak, kira-kira bapak punya tutorial untuk menu gridview?
Thank’s Bget ya…. π
Program_a sangat bermanfaat Bget ntuk membantu tugas dr kampus,,,
Mas Agus? getHeight(); untuk arrayadapter gmn ya?
@all : pahami konsep intent android…
kalau mau bikin slider buat geser gtu gimana ya ??misal dari halaman 1 ke halaman 2 tinggal geser jari dari kanan ke kiri..hehehe..terimakasih
mas klo nambah fitur pencarian nya pada listview gimana iia?
Bagaimana caranya agar list nya tersebut bisa di on click mas?
mas
terima kasih untuk tutorial kustomisasi listviewnya,sangat membantu
namun mas saya di minta menambahkan fitur searching pada kustomisasi listview ini
bagaimana ya cara agar dapat menambahkan fitur searchingnya mas??
sebelumnya terima kasih
Ass. mas mau nanya nih,, kalau kita mau buat dua buah listview seperti diatas dalam satu project gimana carana ya mas?? apanya yang harus ditambah atau diubah?? makasih sebelumnya mas…
Mas tolong gimana ya kodenya jika kita klik list pisang atau yang lain tampil class pisang. (Cara memanggil inten didalam list tsb) mohon bantuannya sy sdh berhasil membuat kustom nya tinggal memanggilnya blm bisa. Sdh cari cari di google blm ketemu kode memanggil untuk type kustomisasi listview ini sekali lg mhon bantuannya. Terima kasih