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.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    <TextView
        android:id="@+id/textViewRowName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:text="Food Price List"
        android:textAppearance="?android:attr/textAppearanceMedium" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/textViewRowName"
        android:text="Name" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        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

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/RelativeLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/textViewRowName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:text="Name" />

    <TextView
        android:id="@+id/textViewRowPrice"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:text="Price" />

</RelativeLayout>

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

package com.batikmob.zebralistview;

import java.util.HashMap;
import java.util.List;

import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.SimpleAdapter;

public class SpecialAdapter extends SimpleAdapter {
    private int[] colors = new int[] { 0x306666FF, 0x30FF0066};
	
    public SpecialAdapter(Context context, List<HashMap<String, String>> items, int resource, String[] from, int[] to) {
        super(context, items, resource, from, to);
    }
 
    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
      View view = super.getView(position, convertView, parent);
      int colorPos = position % colors.length;
      view.setBackgroundColor(colors[colorPos]);      
      return view;
    }
}

5 Sekarang kita kebagian jantung dari aplikasi yaitu class MainActivity.java lalu ketikan kode berikut

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();
	}

	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

Nah Lebih enak dilihatkan ListViewnya.
Ayooo semangat…..

Semoga Bemanfaat
Salam Hangat

Agus Haryanto