Belajar Android ListView dengan CheckBox

Belajar Android kali ini akan membahas tentang ListView dengan CheckBox. Kenapa sih kita harus belajar ini. Dalam kehidupan manusia sering dihadapkan dengan pilihan adayang harus memilih satu pilihan diantara banyak pilihan dan ada yang boleh memilih lebih dari satu. Contohnya Untuk pemilihan ketua BEM kita hanya boleh pilih salah satu nama. Pada saat mengisis data diri untuk bahasa pemroraman yang dikuasai, disitu kita bisa memimilih lebih dari satu bahasa pemrograman.

Nah ListView dengan CheckBox inilah yang bisa kita gunakan untuk memilih bahasa pemrograman yang disukai.

Sekarang mari kita coba membuat peroject yang menampilkan listview bahasa permrograman

1. Buka Eclipse lalu buat project baru dengan nama LearnListViewCheckBox

Klik Next terus sampai finish bisa diklik.

2. Edit activity_main.xml lalu ktikan 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="${relativePackage}.${activityClass}" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:text="Belajar ListView CheckBox" />

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/textView1"
        android:text="Bahasa Pemrograman yang dikuasai" />

    <ListView
        android:id="@+id/listView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/button1" >
    </ListView>

</RelativeLayout>

3. buat layout baru dengan nama bahasa_row.xml lalu ketikan kode berikut

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="6dip" >

    <CheckBox
        android:id="@+id/checkBox1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:focusable="false"
        android:focusableInTouchMode="false"
        android:text="CheckBox" />

    <TextView
        android:id="@+id/code"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/checkBox1"
        android:layout_alignBottom="@+id/checkBox1"
        android:layout_toRightOf="@+id/checkBox1"
        android:text="TextView" />

</RelativeLayout>

4. Buat clas baru dengan nama Bahasa.java lalu ketikkan kode berikut

package net.agusharyanto.learnlistviewcheckbox;

public class Bahasa {

	String id = null;
	String name = null;
	boolean selected = false;

	public Bahasa(String id, String name, boolean selected) {
		super();
		this.id = id;
		this.name = name;
		this.selected = selected;
	}

	public String getId() {
		return id;
	}

	public void setId(String id) {
		this.id = id;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public boolean isSelected() {
		return selected;
	}

	public void setSelected(boolean selected) {
		this.selected = selected;
	}

}

5. Edit class MainActivity.java lalu ketikan kode berikut

package net.agusharyanto.learnlistviewcheckbox;

import java.util.ArrayList;

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.CheckBox;
import android.widget.ListView;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends Activity {

	MyCustomAdapter dataAdapter = null;

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		Button myButton = (Button) findViewById(R.id.button1);
		myButton.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View v) {

				StringBuffer responseText = new StringBuffer();
				responseText.append("Bahsasa Pemrograman Yang dikuasai adalah");

				ArrayList<Bahasa> bahasaList = dataAdapter.bahasaList;
				for (int i = 0; i < bahasaList.size(); i++) {
					Bahasa bahasa = bahasaList.get(i);
					if (bahasa.isSelected()) {
						responseText.append("\n" + bahasa.getName());
					}
				}

				Toast.makeText(getApplicationContext(), responseText,
						Toast.LENGTH_SHORT).show();

			}
		});

		displayListView();

	}

	private void displayListView() {

		// Mendeklarasikan  arraylist bahasList dan menginisialiasai dengan 7 data
		ArrayList<Bahasa> bahasaList = new ArrayList<Bahasa>();
		Bahasa bahasa = new Bahasa("1", "Java", true);
		bahasaList.add(bahasa);
		bahasa = new Bahasa("2", "C++", false);
		bahasaList.add(bahasa);
		bahasa = new Bahasa("3", "Java Script", false);
		bahasaList.add(bahasa);
		bahasa = new Bahasa("4", "Erlang", false);
		bahasaList.add(bahasa);
		bahasa = new Bahasa("5", "Phyton", true);
		bahasaList.add(bahasa);
		bahasa = new Bahasa("6", "Perl", false);
		bahasaList.add(bahasa);
		bahasa = new Bahasa("7", "Pascal", false);
		bahasaList.add(bahasa);

		// Buata array adapter dari data bahasaList
		dataAdapter = new MyCustomAdapter(this, R.layout.bahasa_row,
				bahasaList);
		ListView listView = (ListView) findViewById(R.id.listView1);
		// Assign adapter to ListView
		listView.setAdapter(dataAdapter);

		listView.setOnItemClickListener(new OnItemClickListener() {
			public void onItemClick(AdapterView<?> parent, View view,
					int position, long id) {
				// When clicked, show a toast with the TextView text
				Bahasa bahasa = (Bahasa) parent.getItemAtPosition(position);
				Toast.makeText(getApplicationContext(),
						"Clicked on Row: " + bahasa.getName(),
						Toast.LENGTH_SHORT).show();
			}
		});

	}

	private class MyCustomAdapter extends ArrayAdapter<Bahasa> {

		private ArrayList<Bahasa> bahasaList;

		public MyCustomAdapter(Context context, int textViewResourceId,
				ArrayList<Bahasa> bahasaList) {
			super(context, textViewResourceId, bahasaList);
			this.bahasaList = new ArrayList<Bahasa>();
			this.bahasaList.addAll(bahasaList);
		}

		private class ViewHolder {
			TextView id;
			CheckBox name;
		}

		@Override
		public View getView(int position, View convertView, ViewGroup parent) {

			ViewHolder holder = null;
			Log.v("ConvertView", String.valueOf(position));

			if (convertView == null) {
				LayoutInflater vi = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
				convertView = vi.inflate(R.layout.bahasa_row, null);

				holder = new ViewHolder();
				holder.id = (TextView) convertView.findViewById(R.id.code);
				holder.name = (CheckBox) convertView
						.findViewById(R.id.checkBox1);
				convertView.setTag(holder);

				holder.name.setOnClickListener(new View.OnClickListener() {
					public void onClick(View v) {
						CheckBox cb = (CheckBox) v;
						Bahasa bahasa = (Bahasa) cb.getTag();
						Toast.makeText(
								getApplicationContext(),
								"Clicked on Checkbox: " + cb.getText() + " is "
										+ cb.isChecked(), Toast.LENGTH_SHORT)
								.show();
						bahasa.setSelected(cb.isChecked());
					}
				});
			} else {
				holder = (ViewHolder) convertView.getTag();
			}

			Bahasa bahasa = bahasaList.get(position);
			holder.id.setText(" (id:" + bahasa.getId() + ")");
			holder.name.setText(bahasa.getName());
			holder.name.setChecked(bahasa.isSelected());
			holder.name.setTag(bahasa);

			return convertView;

		}

	}

}

6. Sekarang mari kita run projectnya. Jika semua sudah benar maka hasilnya akan seperti ini

Klik bahasa yang dikuasai lalu sentuh button Bahasa Pemrograman yang dikuasai maka akan muncul Toast yang mengiformasikan bahasa-bahasa yang dipilih

Semoga Bermanfaat

Salam Hangat Developer Android

Agus Haryanto

Pembicara Seminar IT dan Android Developer