Thursday, May 10, 2012

Kustomisasi ListView Pada 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 apabila 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
01<?xml version="1.0" encoding="utf-8"?>
02<LinearLayout
03    xmlns:android="http://schemas.android.com/apk/res/android"
04    android:orientation="vertical"
05    android:layout_width="fill_parent"
06    android:layout_height="fill_parent"
07    android:background="#FFFFFF">
08 
09     <ListView
10        android:id="@+id/listView1"
11        android:layout_width="fill_parent"
12        android:layout_height="fill_parent" android:cacheColorHint="#00000000"/>
13 
14</LinearLayout>
4. Kita buat layout untuk header dari listview, beri nama list_view_header_row.xml
01<?xml version="1.0" encoding="utf-8"?>
02<LinearLayout
03    xmlns:android="http://schemas.android.com/apk/res/android"
04    android:orientation="horizontal"
05    android:layout_width="fill_parent"
06    android:layout_height="fill_parent">
07 
08     <TextView android:id="@+id/txtHeader"
09        android:layout_width="fill_parent"
10        android:layout_height="fill_parent"
11        android:gravity="center_vertical"
12        android:layout_alignParentTop="true"
13        android:layout_alignParentBottom="true"
14        android:textStyle="bold"
15        android:textSize="22dp"
16        android:textColor="#FFFFFF"
17        android:padding="10dp"
18        android:text="Buah-buahan"
19        android:background="#8B0000" />
20 
21</LinearLayout>
5. Buat Layout untuk item-item pada listview, beri nama listview_item_row.xml
01<?xml version="1.0" encoding="utf-8"?>
02<LinearLayout
03    xmlns:android="http://schemas.android.com/apk/res/android"
04    android:orientation="horizontal"
05    android:layout_width="fill_parent"
06    android:layout_height="fill_parent"
07    android:padding="10dp">
08 
09     <ImageView android:id="@+id/imgIcon"
10        android:layout_width="wrap_content"
11        android:layout_height="fill_parent"
12        android:gravity="center_vertical"
13        android:layout_alignParentTop="true"
14        android:layout_alignParentBottom="true"
15        android:layout_marginRight="15dp"
16        android:layout_marginTop="5dp"
17        android:layout_marginBottom="5dp" />
18 
19     <TextView android:id="@+id/txtTitle"
20        android:layout_width="fill_parent"
21        android:layout_height="fill_parent"
22        android:gravity="center_vertical"
23        android:layout_alignParentTop="true"
24        android:layout_alignParentBottom="true"
25        android:textStyle="bold"
26        android:textSize="22dp"
27        android:textColor="#000000"
28        android:layout_marginTop="5dp"
29        android:layout_marginBottom="5dp" />
30 
31</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
01package com.agus.list.fancy;
02 
03public class Fruit {
04    public int icon;
05    public String title;
06    public Fruit(){
07        super();
08    }
09 
10    public Fruit(int icon, String title) {
11        super();
12        this.icon = icon;
13        this.title = title;
14    }
15}
7. Buat Class baru lagi untuk adapternya, beri name FruitAdapter.java
01package com.agus.list.fancy;
02 
03import android.app.Activity;
04import android.content.Context;
05import android.view.LayoutInflater;
06import android.view.View;
07import android.view.ViewGroup;
08import android.widget.ArrayAdapter;
09import android.widget.ImageView;
10import android.widget.TextView;
11 
12public class FruitAdapter extends ArrayAdapter<Fruit>{
13 
14    Context context;
15    int layoutResourceId;
16    Fruit data[] = null;
17 
18    public FruitAdapter(Context context, int layoutResourceId, Fruit[] data) {
19        super(context, layoutResourceId, data);
20        this.layoutResourceId = layoutResourceId;
21        this.context = context;
22        this.data = data;
23    }
24 
25    @Override
26    public View getView(int position, View convertView, ViewGroup parent) {
27        View row = convertView;
28        WeatherHolder holder = null;
29 
30        if(row == null)
31        {
32            LayoutInflater inflater = ((Activity)context).getLayoutInflater();
33            row = inflater.inflate(layoutResourceId, parent, false);
34 
35            holder = new WeatherHolder();
36            holder.imgIcon = (ImageView)row.findViewById(R.id.imgIcon);
37            holder.txtTitle = (TextView)row.findViewById(R.id.txtTitle);
38 
39            row.setTag(holder);
40        }
41        else
42        {
43            holder = (WeatherHolder)row.getTag();
44        }
45 
46        Fruit weather = data[position];
47        holder.txtTitle.setText(weather.title);
48        holder.imgIcon.setImageResource(weather.icon);
49 
50        return row;
51    }
52 
53    static class WeatherHolder
54    {
55        ImageView imgIcon;
56        TextView txtTitle;
57    }
58}
8. Sekarang mari kita edit MainActivity.java
01package com.agus.list.fancy;
02 
03import android.app.Activity;
04import android.os.Bundle;
05import android.view.View;
06import android.widget.ListView;
07 
08public class MainActivity extends Activity {
09 
10    private ListView listView1;
11 
12    @Override
13    public void onCreate(Bundle savedInstanceState) {
14        super.onCreate(savedInstanceState);
15        setContentView(R.layout.main);
16 
17        Fruit weather_data[] = new Fruit[]
18        {
19            new Fruit(R.drawable.apple, "Apel"),
20            new Fruit(R.drawable.banana, "Pisang"),
21            new Fruit(R.drawable.strawberry, "Stroberi"),
22            new Fruit(R.drawable.orange, "Jeruk"),
23            new Fruit(R.drawable.tomato, "Tomat")
24        };
25 
26        FruitAdapter adapter = new FruitAdapter(this,
27                R.layout.listview_item_row, weather_data);
28 
29        listView1 = (ListView)findViewById(R.id.listView1);
30 
31        View header = (View)getLayoutInflater().inflate(R.layout.listview_header_row, null);
32        listView1.addHeaderView(header);
33 
34        listView1.setAdapter(adapter);
35    }
36}
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. Jika diibaratkan List-List terdahulu itu adalah TV Monochrome, sedangkan yang sekarang adalah TV Berwarna.
Semoga Bermanfaat,

2 comments:

  1. waaa ini cuma kopas dari blog sebelah.
    kasih sumber dong bang..

    http://agusharyanto.net/wordpress/?p=637

    ReplyDelete
  2. copas tp gag ada sumbernya....fayaah

    ReplyDelete