Materi Mobile Programming (Pertemuan V) Universitas Pamulang

Pertemuan V
LISTVIEW

5.1 ListView
ListView merupakan menu yang paling sering digunakan dalam membuat berbagai
aplikasi android. ListView merupakan sekumpulan list (daftar) data yang ditampilkan dan
dapat di-scroll secara vertikal. Inti dari membuat listview adalah menampung daftar data
ke dalam array, kemudian dimasukkan ke adapter dari widget listVew.

5.2 Membuat Project Alert dan Toast

Untuk membuat project baru, klik menu File >> New >> Other... sehingga tampil
kotak dialog seperti gambar 5.1 berikut ini:

Gambar 5. 1 Kotak dialog membuat project baru

Pilih Android Application Project di dalam folder Android, kemudian klik tombol
Next. Setelah tampil kotak dialog pengaturan seperti gambar 5.2, beri nama aplikasi
“MateriListView”, dan pada nama package ubah “example” menjadi “unpam”. Tentukan
versi android SDK (Software Development Kit) untuk aplikasi yang akan dibuat pada menu
dropdown Build SDK, dan minimum required SDK.

[email protected] (2012-2013) page 1 of 14

Materi Mobile Programming (Pertemuan V) Universitas Pamulang

Gambar 5. 2 Kotak dialog pengaturan project

Setelah pengaturan nama aplikasi, nama project, nama package, dan SDK dari
aplikasi, klik tombol Next untuk melanjutkan sehingga tampil kotak dialog seperti gambar
5.3. Atur icon dari aplikasi yang akan dibuat, bisa menggunakan image, clipart, maupun
text. Atur bentuk dan warna dari icon jika diperlukan, jika sudah selesai lanjutkan dengan
mengklik tombol Next.

[email protected] (2012-2013) page 2 of 14

Materi Mobile Programming (Pertemuan V) Universitas Pamulang

Gambar 5. 3 Pengaturan icon aplikasi

Gambar 5. 4 Memilih jenis Activity

[email protected] (2012-2013) page 3 of 14

Materi Mobile Programming (Pertemuan V) Universitas Pamulang

Pilih Blank Activity untuk jenis Activity dari aplikasi yang akan dibuat. Lanjutkan
dengan mengklik tombol Next. Ubah judul (Title) aplikasi menjadi “Materi ListView”.

Gambar 5. 5 Mengatur nama dan judul activity

Klik tombol Finish untuk mengakhiri pengaturan pembuatan aplikasi. Tunggu

beberapa saat sampai tampil desain aplikasi seperti gambar 5.6. Jika jendela yang tampil
tidak sama, dapat diatur dari menu Window >> Show View dan pilih jendela yang ingin
ditampilkan. Jika ingin mengubah tampilan ke bentuk standar, dapat dilakukan melalui
menu Window >> Reset Perspective.

[email protected] (2012-2013) page 4 of 14

Materi Mobile Programming (Pertemuan V) Universitas Pamulang

Gambar 5. 6 Tampilan IDE aplikasi android

Hapus TextView (teks “Hello Word!”), tambahkan Linear Layout (Horizontal) di

sudut kiri atas, kemudian di dalamnya tambahkan Medium dengan teksnya “Daftar Mata
Kuliah” dan Button dengan teks “X”. Di bawahnya tambahkan Linear Layout (Horizontal)
dan isi dengan ListView. Atur desain tampilan menjadi seperti gambar 5.7 dan desain
outline menjadi seperti gambar 5.8.

[email protected] (2012-2013) page 5 of 14

Materi Mobile Programming (Pertemuan V) Universitas Pamulang

Gambar 5. 7 Graphical layout activity_main.xml

Ubah ID dari Button dan ListView dengan cara klik kanan >> EditID, sehingga outline
menjadi seperti berikut ini:

Gambar 5. 8 Outline activity_main.xml

Desain activity dapat juga diatur melalui source code XML sebagai 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" >

<LinearLayout
android:id="@+id/linearLayout1"

[email protected] (2012-2013) page 6 of 14

Materi Mobile Programming (Pertemuan V) Universitas Pamulang

android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true" >

<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Daftar Mata Kuliah"
android:textAppearance="?android:attr/textAppearanceMedium"
/>

<Button
android:id="@+id/xButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="X" />

</LinearLayout>

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="@+id/linearLayout1" >

<ListView
android:id="@+id/mataKuliahListView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1" >
</ListView>

</LinearLayout>

</RelativeLayout>

Selanjutnya tambahkan activity baru dengan cara klik kanan pada project, pilih New,
kemudian Other (atau Ctrl+N) sehingga tampil kotak dialog seperti gambar 5.9 berikut ini:

[email protected] (2012-2013) page 7 of 14

Materi Mobile Programming (Pertemuan V) Universitas Pamulang

Gambar 5. 9 Menambahkan activity baru

Klik tombol Next, pada kotak dialog seperti gambar 5.10 ubah nama activity
menjadi “DipilihActivity” dan ubah judul menjadi “Mata Kuliah Dipilih”.

Gambar 5. 10 Pengaturan activity

[email protected] (2012-2013) page 8 of 14

Materi Mobile Programming (Pertemuan V) Universitas Pamulang

Klik tombol Finish untuk mengakhiri pengaturan nama dan judul Activity.
Selanjutnya atur layout activity_dipilih menjadi seperti gambar 5.11 dan 5.11 berikut ini:

Gambar 5. 11 Graphical layout activity_dipilih.xml

Gambar 5. 12 Outline activity_dipilih.xml

Source code activity_dipilih.xml:

<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" >

<LinearLayout
android:id="@+id/linearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:orientation="vertical" >

<TextView
android:id="@+id/textView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Mata kuliah dipilih:" />

<TextView
android:id="@+id/mataKuliahTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"

[email protected] (2012-2013) page 9 of 14

Materi Mobile Programming (Pertemuan V) Universitas Pamulang

android:text="Mata Kuliah"
android:textAppearance="?android:attr/textAppearanceMedium"
/>

</LinearLayout>

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_below="@+id/linearLayout1" >

<Button
android:id="@+id/kembaliButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Kembali" />

</LinearLayout>

</RelativeLayout>

5.3 Mengubah Source Code

Setelah selesai mengatur desain activity, selanjutnya menambahkan source code
java. Tambahkan source code di dalam file MainActivity.java yang berada di project dalam
folder src >> com.unpam.materilistview sehingga menjadi seperti berikut ini:

package com.unpam.materilistview;

import android.os.Bundle;
import android.app.Activity;
import android.app.AlertDialog;
import android.content.DialogInterface;
import android.content.Intent;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.AdapterView.OnItemLongClickListener;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.Toast;

public class MainActivity extends Activity implements OnClickListener,

OnItemClickListener, OnItemLongClickListener{
private java.util.ArrayList<String> items = new
java.util.ArrayList<String>();
private ListView mataKuliahListView;
private String[] listMataKuliah = {"Algorithma Pemrograman
I","Algorithma Pemrograman II","Struktur Data I","Struktur Data
II","Mobile Programming","Pemrograman I","Pemrograman II","Bahasa
Indonesia","Agama","PKN","Bahasa Inggris","Basis Data I","Basis Data
II","Kalkulus","Aljabar Linier","Matematika Diskrit","Fisika","Etika
Profesi"};

@Override

[email protected] (2012-2013) page 10 of 14

Materi Mobile Programming (Pertemuan V) Universitas Pamulang

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

for (int i=0; i<listMataKuliah.length; i++){

items.add(listMataKuliah[i]);
}

mataKuliahListView = (ListView)
findViewById(R.id.mataKuliahListView);
mataKuliahListView.setOnItemClickListener(this);

ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,

android.R.layout.simple_list_item_1,items);
mataKuliahListView.setAdapter(adapter);

findViewById(R.id.xButton).setOnClickListener(this);
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.activity_main, menu);
return true;
}

public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,

long arg3) {
// TODO Auto-generated method stub
Intent intent = new Intent(this, DipilihActivity.class);
intent.putExtra("mataKuliah", items.get(arg2));
startActivity(intent);
}

public void onClick(View v) {

// TODO Auto-generated method stub
switch (v.getId()){
case R.id.xButton:
System.exit(0);
}
}

public boolean onItemLongClick(AdapterView<?> arg0, View arg1, int

arg2,
long arg3) {
// TODO Auto-generated method stub
AlertDialog.Builder alert = new AlertDialog.Builder(this);
alert.setTitle("Informasi");
alert.setMessage("Mata kuliah "+items.get(arg2));
alert.setIcon(R.drawable.ic_launcher);
alert.setPositiveButton("Ya", new
DialogInterface.OnClickListener() {

public void onClick(DialogInterface arg0, int arg1) {

// TODO Auto-generated method stub
Toast.makeText(getApplicationContext(), "Tombol
Ya di klik", Toast.LENGTH_SHORT).show();
}
});
alert.setNegativeButton("Tidak", new
DialogInterface.OnClickListener() {

[email protected] (2012-2013) page 11 of 14

Materi Mobile Programming (Pertemuan V) Universitas Pamulang

public void onClick(DialogInterface arg0, int arg1) {

// TODO Auto-generated method stub
Toast.makeText(getApplicationContext(), "Tombol
Tidak di klik", Toast.LENGTH_SHORT).show();
}
});
return false;
}
}

Tambahkan juga source code di dalam file DipilihActivity.java sehingga menjadi

seperti berikut ini:

package com.unpam.materilistview;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.TextView;

public class DipilihActivity extends Activity implements

OnClickListener{

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_dipilih);

TextView mataKuliahTV = (TextView)

findViewById(R.id.mataKuliahTextView);

mataKuliahTV.setText(getIntent().getExtras().getString("mataKuliah"));

findViewById(R.id.kembaliButton).setOnClickListener(this);
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.activity_dipilih, menu);
return true;
}

public void onClick(View v) {

// TODO Auto-generated method stub
switch (v.getId()){
case R.id.kembaliButton:
finish();
}
}
}

5.4 Tampilan Aplikasi

Untuk mengeksekusi, klik kanan pada nama project atau pilih menu Run, kemudian
pilih Run As >> Android Application.

[email protected] (2012-2013) page 12 of 14

Materi Mobile Programming (Pertemuan V) Universitas Pamulang

Gambar 5. 13 Tampilan aplikasi di AVD (MainActivity)

Gambar 5. 14 Tampilan aplikasi di AVD (DipilihActivity)

[email protected] (2012-2013) page 13 of 14

Materi Mobile Programming (Pertemuan V) Universitas Pamulang

Referensi:
1. Allen, Grant, Beginning Android 4, 2012, Apress, New York
2. H., Nazruddin Safaat, ANDROID Pemrograman Aplikasi Mobile Smartphone dan
Tablet PC Berbasis Android
3. http://www.oracle.com/
4. http://www.android.com/

[email protected] (2012-2013) page 14 of 14