Belajar Android – Kustomisasi ListView

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

33 comments to Belajar Android – Kustomisasi ListView

  • jpedang

    makasih mas tutornya :D, sangat beramanfaat πŸ˜‰

  • phanilla

    keren maz..coba kl list nya di klik bs msuk ke layout laen gitcu…hhehhee

  • iid

    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

  • m4ru

    Keren Mas…

    Mas mo nanya dunk… bisa nggak yah Android connect ke foxpro ambil data dbf

    to convert dolo ke my sql…? Thanks

  • androkid

    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?

  • andrian

    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

  • Rewcrell

    om agus, kalo mau ngasih action ke form lain gimana ya ? thanks…

  • sonny

    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

  • Luqman Hakim Nurus

    mas kalo listviewnya kita ketik masuk ke halaman berikutnya gimana ya soalnya ini kan objek buka array onlistitemclick ga berfungsi .. mohon pencerahannya mas

  • Sandy

    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?

  • Yuanita

    terima kasih tutorial nya. saya berhasil! keren nih tutorialnya!

  • Chand

    Mas kalo saya mempunyai layout baru dan mau dibuka ketika klik salah satu menu utama, gimana caranya ya mas?
    tolong pencerahannya…

  • Agus Haryanto

    @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.

  • sandzo green

    thank you mas…tutorialnya ane ikutin trus dari awal..
    sangat bermanfaat mas buat pengetahuan ane..
    Sukses trus mas Bro!!

  • eka

    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

  • Agus Haryanto

    @eka. belum sempat bikin tutorialnya. sementara ini coba googling dulu yah, harusnya sih tidak sulit

  • Indra

    gmana cranya mnampilkan data selanjutnya ketika list trsebut diklik ??

  • elva

    pak, kira-kira bapak punya tutorial untuk menu gridview?

  • Puput Gustini Utari

    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

  • Gizna Suyoga

    mas klo nambah fitur pencarian nya pada listview gimana iia?

  • Adi

    Bagaimana caranya agar list nya tersebut bisa di on click mas?

  • sam

    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

  • eki ashadi

    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…

  • alfaiziey

    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

Leave a Reply

You can use these HTML tags

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>