Belajar Android Membuat Zebra ListView

Dulu Awal tahun saya punya target untuk bisa posting artikel setiap hari, tetapi kenyataanya
hanya mampu sebulan sekali. Yah memang belum cukup kalau hanya baru niat saja harus
dilanjutkan dengan tindakan untuk mencapai target
Topik kali ini kita akan membahas tentang Zebra, tapi bukan hewan yah. Melainkan membuat
Zebra ListView pada android. Kalau permen saja ada yang zebra warnanya masak ListView
nggak boleh hehehe.
Untuk mempersingkat waktu mari kita mulai langkah-langkahnya.
1. Buat Project baru dengan nama ZebraListView dan Packagennya dengan nama
com.batikmob.zebralistview
2. Seperti biasaya yang kita urus pertamakali adalah bagian user interface untuk itu mari kita
buka main_activity.xml lalu ketikan kode berikut.
01 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
02
xmlns:tools="http://schemas.android.com/tools"
03
android:layout_width="match_parent"
04
android:layout_height="match_parent"
05
tools:context=".MainActivity" >
06
07
<TextView
08
android:id="@+id/textViewRowName"
09
android:layout_width="wrap_content"
10
android:layout_height="wrap_content"
11
android:layout_alignParentLeft="true"
12
android:layout_alignParentTop="true"
13
android:text="Food Price List"
14
android:textAppearance="?android:attr/textAppearanceMedium" />
15
16
<TextView
17
android:id="@+id/textView2"
18
android:layout_width="wrap_content"
19
android:layout_height="wrap_content"
20
android:layout_alignParentLeft="true"
21
android:layout_below="@+id/textViewRowName"
22
android:text="Name" />
23
24
<TextView
25
android:id="@+id/textView3"
26
android:layout_width="wrap_content"
27
android:layout_height="wrap_content"

28
29
30
31
32
33
34
35
36
37
38
39
40
41

android:layout_alignBaseline="@+id/textView2"
android:layout_alignBottom="@+id/textView2"
android:layout_alignParentRight="true"
android:text="Price" />
<ListView
android:id="@+id/listViewMakanan"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="@+id/textView2" >
</ListView>
</RelativeLayout>

3. Buat Layout untuk isi dari listview simpan dengan nama row.xml
01 <?xml version="1.0" encoding="utf-8"?>
02 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
03
android:id="@+id/RelativeLayout1"
04
android:layout_width="match_parent"
05
android:layout_height="match_parent"
06
android:orientation="vertical" >
07
08
<TextView
09
android:id="@+id/textViewRowName"
10
android:layout_width="wrap_content"
11
android:layout_height="wrap_content"
12
android:layout_alignParentLeft="true"
13
android:layout_alignParentTop="true"
14
android:text="Name" />
15
16
<TextView
17
android:id="@+id/textViewRowPrice"
18
android:layout_width="wrap_content"
19
android:layout_height="wrap_content"
20
android:layout_alignParentRight="true"
21
android:layout_alignParentTop="true"
22
android:text="Price" />
23
24
</RelativeLayout>

4. Buat class baru untuk adapter listview diaman dsini warna untuk baris listview ditentukan.
Simpan dengan SpecialAdapater.java
01
02
03

package com.batikmob.zebralistview;
import java.util.HashMap;

04
import java.util.List;
05
06
import android.content.Context;
07
import android.view.View;
08
import android.view.ViewGroup;
09
import android.widget.SimpleAdapter;
10
11 public class SpecialAdapter extends SimpleAdapter {
12
private int[] colors = new int[] { 0x306666FF, 0x30FF0066};
13
public SpecialAdapter(Context context, List<HashMap<String, String>>
14
items, int resource, String[] from, int[] to) {
15
super(context, items, resource, from, to);
16
}
17
18
@Override
19
public View getView(int position, View convertView, ViewGroup parent) {
20
View view = super.getView(position, convertView, parent);
21
int colorPos = position % colors.length;
22
view.setBackgroundColor(colors[colorPos]);
23
return view;
24
}
25
}

5 Sekarang kita kebagian jantung dari aplikasi yaitu class MainActivity.java lalu ketikan kode
berikut
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20

package com.batikmob.zebralistview;
import java.util.ArrayList;
import java.util.HashMap;
import android.app.Activity;
import android.os.Bundle;
import android.widget.ListView;
public class MainActivity extends Activity {
private ArrayList<HashMap<String, String>> listmakanan = new
ArrayList<HashMap<String, String>>();
ListView listviewFood;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
listviewFood = (ListView) findViewById(R.id.listViewMakanan);
initData();
populateListView();
}

21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

private void initData(){

listmakanan.add(genHashMap("Ayam Bakar Madu", "20000"));
listmakanan.add(genHashMap("Ayam Kremes", "22000"));
listmakanan.add(genHashMap("Ayam Goreng Pemuda", "15000"));
listmakanan.add(genHashMap("Ikan Gurame Bakar", "30000"));
listmakanan.add(genHashMap("Ikan Gurame Kipas", "30000"));
listmakanan.add(genHashMap("Juz Jomblo", "15000"));
listmakanan.add(genHashMap("Juz Anti Galau", "17000"));
listmakanan.add(genHashMap("Juz Pemuda Idaman", "25000"));
listmakanan.add(genHashMap("Juz Pembakar Semangat", "25000"));
}
private HashMap<String,String> genHashMap(String name, String price){
HashMap<String,String> map = new HashMap<String, String>();
map.put("name", name);
map.put("price", price);
return map;
}
private void populateListView(){
SpecialAdapter adapter = new
SpecialAdapter(this,listmakanan,R.layout.row,new String[] {"name", "price"
}, new int[] {
R.id.textViewRowName, R.id.textViewRowPrice });
listviewFood.setAdapter(adapter);
}
}

6. Sekarang mari kita Run Programnya