TUGAS 4

“Membuat List View”

Oleh:
I Putu Edi Puspayasa
1304505095
Pemrograman Mobile C

JURUSAN TEKNOLOGI INFORMASI

FAKULTAS TEKNIK - UNIVERSITAS UDAYANA
BUKIT JIMBARAN
 Membuat List View pada Andorid dengan Eclipse

List View merupakan suatu widget pada android dimana widget tersebut
dapat menampung data dalam berupa array dan menampilkannya ke dalam
sebuah daftar atau list yang dapat di-scroll. Karena ukuran layar smartphone
terbatas, listview merupakan salah satu widget terpenting dan paling sering
digunakan untuk menampilkan kelompok informasi. Disini akan membahas
pembuatan list view pada android dengan menggunakan eclipse.
1. Langkah – langkah Pembuatan List View
Terdapat langkah-langkah dalam pembuatan list view adalah sebagai
berikut :
a. Pertama buatlah project android baru dengan cara File => New =>
Android Application Project, lalu berikan nama project dan target
project sesuai keinginan anda lalu beri nama Main Class-nya dengan nama
: MainActivity.java dan main Layout-nya activity_main.xml.
b. Kemudian buka activity_main.xml yang terletak pada folder res/layout,
buatlah listview yang berada di Palette => Composite pada Graphical
Layout lalu ganti id-nya dengan listview1, atau bisa dengan ketikkan
sintaks seperti Kode Program 1.1.
<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"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.example.list_view.MainActivity" >

<ListView
android:id="@+id/listview1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" >
</ListView>

</RelativeLayout>
Kode Program 1.1 Sintaks actifity_main.xml
c. Kemudian buat layout untuk setiap baris pada ListView yang berisi judul
dan keterangan. Pilih Project pada Project Explorer, lalu klik kanan
=> Android Tools => New Resources File, atau juga bisa dilakukan
dengan cara klik kanan Project => New => Android XML File. Pilih
resource type “Layout”. Beri nama file misal : row.xml, pilih root element
LinearLayout, XML akan dibuat di dalam direktori /res/layout. File
row.xml ini akan menentukan layout dari setiap baris pada listview.
d. Pada row.xml yang baru dibuat tambahkan widget LargeText dan dua
TextView. Ganti Id semua komponen itu. LargeText dengan tvJudul,
TextView dengan tvSubJudul dan tvKeterangan, atau bisa dengan ketikkan
sintaks seperti Kode Program 1.2.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

<TextView
android:id="@+id/tvJudul"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"

android:textAppearance="?android:attr/textAppearanceLarge" />

<TextView
android:id="@+id/tvSubJudul"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />

<TextView
android:id="@+id/tvKeterangan"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />

</LinearLayout>

Kode Program 1.2 Sintaks row.xml

e. Selanjutnya, buat class untuk menampung data judul, sub judul dan
keterangan. Class dapat dibuat dengan cara, pada Project Explorer =>
pilih /src/[package] => klik kanan => New => Class. Beri nama class
 tersebut, misal : DataList. Sintaks pada class DataList dapat dilihat pada
Kode Program 1.3.
package com.example.list_view;

public class DataList {

public String judul;
public String SubJudul;
public String Keterangan;

public DataList(String judul, String SubJudul, String

Keterangan){
this.judul = judul;
this.SubJudul = SubJudul;
this.Keterangan = Keterangan;
}
}

Kode Program 1.3 Sintaks Class DataList (DataList.java)

f. Selanjutnya membuat adapter untuk list dari listview yang berfungsi untuk
“mengisi” setiap row dengan isi objek DataList. Buat class dengan cara
yang sama seperi sebelumnya (klik /src/[package], klik kanan, new
class), beri nama class, misal : DataAdapter, jadikan class DataAdapter ini
turunan dari class ArrayAdapter. Sintaks dari class DataAdapter dapat
dilihat pada Kode Program 1.4.
public class DataAdapter extends ArrayAdapter<DataList> {
private ArrayList<DataList> alData;

public DataAdapter(Context con, int textViewResourceId,

ArrayList<DataList>alData){
super (con,textViewResourceId,alData);
this.alData = alData;
}

public View getView(int pos, View convertView, ViewGroup

parent){
View v = convertView;
if (v==null){
LayoutInflater li =

(LayoutInflater)getContext().getSystemService(Context.LAYOU
T_INFLATER_SERVICE);
v = li.inflate(R.layout.row, null);
}

DataList dl = alData.get(pos);
if (dl!=null){
TextView tvJudul = (TextView)
v.findViewById(R.id.tvJudul);
 TextView tvSubJudul = (TextView)
v.findViewById(R.id.tvSubJudul);
TextView tvKeterangan = (TextView)
v.findViewById(R.id.tvKeterangan);
tvJudul.setText(dl.judul);
tvSubJudul.setText(dl.SubJudul);
tvKeterangan.setText(dl.Keterangan);
}

return v;
}

}
Kode Program 1.4 Sintaks Class DataAdapter (DataAdapter.java)

Kode Program 1.4 merupakan sintaks dari class DataAdapter,

dimana pada sintaks tersebut terdapat method getView yang berisi
parameter pos yang merupakan indeks baris. Pada Kode Program 1. 4
terdapat sintaks seperti :

Pada lingkaran no 1, merupakan penulisan untuk jadikan class

DataAdapter ini turunan dari class ArrayAdapter. Lingkaran no 2, 3, dan 4
merupakan pembacaan id dari widget LargeText dan dua buah widget
TextView pada layout row.xml yang dibuat sebelumnnya.
g. Kemudian langkah terakhir, pada class utama (MainActivity.java) dapat
ditambahkan sintaks seperti Kode Program 1.5.
public class MainActivity extends ActionBarActivity {

ArrayList<DataList> alData = new ArrayList<DataList>();

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

alData.add(new DataList("Judul 1", "Keterangan1", ""));

alData.add(new DataList("Judul 2", "Sub Judul 2",
"Keterangan 2"));
alData.add(new DataList("Judul 3", "Sub Judul 3",
"Keterangan 3"));
alData.add(new DataList("Judul 4", "Sub Judul 4",
"Keterangan 4"));
alData.add(new DataList("Judul 5", "Sub Judul 5",
"Keterangan 5"));
alData.add(new DataList("Judul 6", "Sub Judul 6",
"Keterangan 6"));
alData.add(new DataList("Judul 7", "Sub Judul 7",
"Keterangan 7"));

ListView listview = (ListView)

findViewById(R.id.listview1);
DataAdapter adapter = new DataAdapter
(this,R.layout.row,alData);
listview.setAdapter(adapter);

}
}

Kode Program 1.5 Sintaks Class Utama (MainActivity.java)

Kode Program 1.5 merupakan sintaks dari class utama dari

program. Pada Kode Program 1.5 terdapat sintaks seperti :
 Lingkaran no 1 merupakan pembacaan layout, dimana layout yang
dibaca merupakan layout untuk menampilkan program, atau layout tempat
dari tampilan list view. Lingkaran no 2 merupakan sintaks untuk
memberikan nilai array kepada DataList, perhatikan lingkaran hitam yang
terdapat pada lingkaran no 2, akan menyebabkan baris listview pertama
terdapat perbedaan atau lebihjelasnya dapat dilihat pada uji coba.
Lingkaran no 3 merupakan pembacaan dari id listview yang dibuat atau
dituliskan sebelumnya pada activity_main.xml. Sedangkan lingkaran no 4
merupakan sintaks pembacaan id layout row.xml dan pengiriman nilai
array kepada DataAdapter. Pada baris terakhir terdapat sintaks
listview.setAdapter(adapter) yang berfungsi untuk menampilkan nilai
array ke listview.

2. Uji Coba
Uji coba dari program list view dengan menggunakan Android Virtual
Device. Uji coba dapat dilihat pada Gambar 2.1.
 Gambar 2.1 Uji Coba List View

Gambar 2.1 merupakan uji coba dari program list view. Kita dapat
memodifikasi warna background dari program dengan cara seperti berikut :
1. Tambahkan sintaks pada layout activity_main.xml. Sintaks tambahan dari
layout activity_main.xml dapat dilihat pada Gambar 2.2.
 Gambar 2.2 Screenshoot Sintaks activity_main.xml

Perhatikan lingkaran merah pada Gambar 2.2, sintaks yang

dilingkari tersebut merupakan penambahan background dari tampilan
program list view yang berwarna hitam yang dimana warna hitam tersebut
diambil pada value color.xml.
2. Buat value baru untuk menyimpan nilai warna background, berikan nama
value tersebut color.xml. Sintaks dari value color.xml dapat dilihat pada
Kode Program 2.1.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="black">#000000</color>
</resources>
Kode Program 2.1 Sintaks Color.xml

3. Karena warna tulisan dari listview sama dengan warna background maka
tulisan tidak dapat dilihat, agar tulisan dari listview dapat dilihat dapat
dilakukan dengan cara memberikan warna dari listview. Untuk
memberikan warna pada listview dapat menambahkan sintaks pada kelas
utama (MainActivity.java) agar lebih jelas dapat dilihat pada Gambar 2.3.
 Gambar 2.3 Screenshoot Sintaks Class Utama (MainActivity.java)

Pada Gambar 2. terdapat sintaks untuk memberikan warna dari

listview yang dilingkari warna merah.
4. Tampilan dari program listview yang warna background-nya sudah diubah
dapat dilihat pada Gambar 2.4
Gambar 2.4 Uji Coba List View dengan Warna Background Berbeda