Pada kesempatan tutorial kali ini kita akan membahas mengenai materi 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.

Kustomisasi ListView Pada Android
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
Kustomisasi ListView Pada Android
2. Icon buah-buahan yang sudah kita persiapkan compykan ke directory drawable.
Kustomisasi ListView Pada Android
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 akan membuat sebuah layout untuk bagian header dari listview, beri nama/judul 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 sebuah file layout untuk item-item pada listview, dan kita beri nama dengan 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 sebuah Class baru lagi untuk komponen adapternya, dan beri nama kelas 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
Kustomisasi ListView Pada Android
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,

0 komentar:

Post a Comment

Translate

RSS Feed

Enter your email address:

Delivered by FeedBurner

Dark Mode

Popular Posts

Blog Archive